Colour converter — HEX, RGB, HSL

How to use it

1. Type a colour in any notation — #7c3aed, rgb(124 58 237), hsl(262 83% 58%) — or use the colour picker.
2. HEX, RGB and HSL update together; the swatch shows the exact colour, checkerboard behind it for transparency.
3. Tap Copy on the format you need.

What HSL is good at, and where it misleads

HEX and RGB are the same thing in different bases: #7c3aed is rgb(124 58 237), nothing more. HSL is a genuine reprojection: the RGB cube tipped onto its grey diagonal and read off as an angle, a saturation and a lightness. That is what makes it the notation to reason in when building a palette — rotate the hue 30 degrees for a neighbouring colour of the same intensity.

The catch is that HSL’s lightness is not perceived lightness. hsl(60 100% 50%) is pure yellow and hsl(240 100% 50%) pure blue; both declare 50% lightness, and the yellow is many times brighter to the eye. Selecting text colours by matching L values therefore produces pairs that fail WCAG contrast, since contrast is computed from relative luminance, which weights green far above blue. OKLCH and LCH exist to correct exactly this.

Where a round trip loses something

HEX to RGB and back is lossless: each pair of hex digits is one byte, and a three-digit shorthand doubles each digit, so #7ce is precisely #77ccee. HSL is different. It is computed in floating point and written out in whole degrees and percentages — the conventional readable form, and also a quantisation. A round trip can shift a channel by one, about 0.4% of its range, which no display resolves.

Grey is where HSL turns ambiguous: with saturation at zero the hue is undefined, so every hue value round-trips identically and a converter reporting 0 degrees is choosing rather than measuring. The larger boundary is that all three notations are sRGB, which cannot express what a P3 display shows. There is no hex for a saturated cyan outside the sRGB triangle; CSS reaches those through color(display-p3 ...) or oklch().

Questions