Skip to main content
FileForge

Color Converter — HEX, RGB & HSL

Convert any color between HEX, RGB and HSL formats instantly. Type a value in any field or use the visual picker — the other formats update live, with one-click copy for your CSS.

Runs in your browser — files never leave your device

Free · No sign-upOutputs HEX, RGB, HSL
Loading tool…

How to use Color Converter

  1. Type or paste a color into the HEX, RGB or HSL field — or use the visual picker.

  2. Watch the other two formats and the preview swatch update instantly.

  3. Click a copy button to grab the format you need.

About this tool

HEX, RGB and HSL are three ways of writing the same color. HEX (#0f766e) is the compact web classic; RGB (rgb(15, 118, 110)) maps directly to how screens mix red, green and blue light; and HSL (hsl(175, 77%, 26%)) describes hue, saturation and lightness — the most human-friendly of the three, because making a color lighter, darker or more muted means changing a single obvious number.

This converter keeps all three formats in sync as you type, accepts flexible input (with or without the # or rgb()/hsl() wrappers), and shows a live swatch so you always see exactly what you're copying. Everything runs instantly in your browser with nothing sent anywhere.

Common ways people use this

  • Converting a designer's HEX value into the HSL your CSS codebase uses
  • Grabbing the RGB equivalent of a brand color for a canvas, chart, or email template
  • Nudging a color lighter or darker via HSL, then copying the HEX back to your stylesheet

Tips for better results

  • Prefer HSL when creating color variations — hover states, borders, backgrounds — since shifting only the lightness value keeps the hue perfectly consistent.
  • Shorthand 3-digit HEX values like #0af work too; they expand automatically to the full 6-digit form.

Frequently asked questions

What's the difference between HEX, RGB and HSL?
They're three notations for the same color. HEX and RGB both express red/green/blue channel values (in hexadecimal and decimal respectively), while HSL expresses hue (0–360°), saturation and lightness — which is why it's easiest to reason about when adjusting colors.
Which format should I use in CSS?
All three are fully supported everywhere. HEX is the most common convention; HSL is increasingly preferred in design systems because creating consistent lighter/darker variants only requires changing the lightness number.
Can I paste values without the wrappers?
Yes. "15, 118, 110" works as RGB, "175, 77, 26" as HSL, and HEX works with or without the leading # — including 3-digit shorthand.
Does the tool support transparency (alpha) values?
Not yet — it converts opaque colors between HEX, RGB and HSL. For rgba()/hsla(), convert the base color here and append your alpha value in CSS.
Are the conversions exact?
HEX ↔ RGB conversion is exact in both directions. HSL values are rounded to whole numbers for readability, which is the standard convention and visually identical in practice.

Related tools

Other tools people commonly use alongside this one.

QR Code Generator

Create a QR code from any text or URL and download it as PNG or scalable SVG. No watermark, no expiry — the code is generated in your browser.

Developer

Password Generator

Create strong random passwords with control over length, symbols, digits and ambiguous characters. Generated locally with cryptographic randomness — never transmitted.

Developer

UUID Generator

Generate version-4 UUIDs using your browser's cryptographic random source. Create one or a batch, with uppercase and hyphen-free formatting options.

Developer

Base64 Text

Convert text to Base64 and back. Unlike naive implementations, this handles UTF-8 correctly, so emoji and non-Latin text round-trip safely.

Developer