Color Converter
Convert between HEX, RGB, and HSL color formats with live preview and luminance analysis.
Luminance
0.235
Text
Dark
What the converter does
All three formats are live and editable at once, so this works as much for adjusting a colour as for converting one. Change any channel and the others recompute in place.
- Native picker — the swatch beside the HEX field opens your OS colour picker.
- Editable channels — separate inputs for R, G, B and H, S, L.
- Shorthand HEX —
#fffis accepted and expanded. - Copy each format — one button per row, formatted ready to paste into CSS.
- Legibility preview — a large swatch with overlay text in black or white, chosen from WCAG relative luminance.
HEX, RGB or HSL — which to work in
| Format | Example | Best at |
|---|---|---|
| HEX | #3b82f6 | Compact, copy-paste between tools, design handoff |
| RGB | rgb(59 130 246) | Channel maths, blending, canvas and image work |
| HSL | hsl(217 91% 60%) | Adjusting a colour — hover states and shade ramps |
The practical reason to care about HSL: a hover state is usually the same hue with the lightness moved 8–10%, which is one number in HSL and three unrelated ones in HEX.
Reading the luminance value
Relative luminance is the WCAG measure of perceived brightness, weighted because the eye is far more sensitive to green than to blue. Two colours can share a lightness value in HSL and still differ here. The preview flips its overlay text to black above roughly 0.18 and white below.
That is a heuristic for one colour, not a compliance check. For an actual pass or fail against AA and AAA on a specific pairing, use the contrast checker.
What this tool does not cover
- Alpha. No 8-digit HEX, no
rgba(). Opaque colours only. - Named colours.
rebeccapurpleis not parsed; give it a HEX value. - Wide-gamut spaces. No
oklch(),lab(), ordisplay-p3— this is sRGB. - Rounding. HSL channels are whole numbers, so a HEX → HSL → HEX round trip can land one value off.
Related colour tools
Frequently Asked Questions
Which colour formats are supported?
HEX, RGB, and HSL — the three that appear in CSS and design tools. All three stay in sync, and you can type into whichever one you have to hand.
Can I edit the RGB and HSL values directly?
Yes. Every channel is its own input, so nudging lightness from 60% to 45% updates the HEX and RGB immediately. It is not a one-way HEX converter.
Does it support alpha or 8-digit HEX?
No. Only 3- and 6-digit HEX, plus opaque RGB and HSL. For transparency, add the alpha channel yourself with rgba() or an 8-digit HEX in your CSS.
What is the luminance number for?
It is WCAG relative luminance — how bright the colour reads to the eye. The preview uses it to pick black or white overlay text, which is a quick legibility sanity check.
Why does my HEX not round-trip exactly?
HSL has fewer distinct values than HEX at 8 bits per channel, so converting out and back can shift a digit. Keep HEX or RGB as your source of truth and treat HSL as the editing view.