Color Converter (HEX / RGB / HSL)

What this Color Converter is for

The same color can be written three ways, and different tools expect different ones. CSS and design software often hand you a HEX code like #3B82F6. JavaScript canvas work and older stylesheets usually want RGB, as in rgb(59, 130, 246). And when you need to lighten, darken, or find a matching shade, HSL — hsl(217, 91%, 60%) — is the easiest to reason about. This tool moves a single color between all three so you can copy whichever one your file needs.

When you'd actually use it

A designer sends a HEX code, but your Android or brand-token file wants RGB channels — paste the HEX and read off the R, G, and B. You want a hover state that's 15% darker: switch to HSL, drop the lightness, and convert back to HEX for your stylesheet. Or you're matching a logo and need to know if a blue is truly saturated or a bit gray — HSL's saturation number tells you at a glance in a way six hex digits never will.

How the formats relate

HEX and RGB are the same thing in different clothing: each pair of hex digits (00–FF) is one channel from 0 to 255. So FF is 255 and #FFFFFF is pure white. HSL describes the color by Hue (0–360° around the color wheel), Saturation (how vivid, 0–100%), and Lightness (how bright, 0–100%), which is why nudging one slider gives a predictable result. Everything is computed live in your browser as you type.

How to use it

1. Paste or type a color in any field — a HEX code (with or without the #), RGB values, or HSL values.
2. Watch the other two formats update instantly, and check the live swatch to confirm it's the color you expected.
3. Adjust the HSL lightness or saturation if you want a tint or shade, and the HEX and RGB will follow.
4. Copy the format your project needs and paste it straight into your CSS, code, or design tool.

FAQ

Do I need the # in front of a HEX code?

No — type it with or without. You can also use 3-digit shorthand like #F0C, which expands to #FF00CC.

Are the converted values exact?

HEX and RGB convert exactly. HSL involves rounding to whole degrees and percentages, so converting HSL to HEX and back can shift by one unit — normal and rarely visible.

Is my color data sent anywhere?

No. The conversion runs entirely in your browser; nothing is uploaded or stored.

Is it free?

Yes, it's free and ad-supported, with no signup.