This tool runs entirely in your browser. Nothing you paste is uploaded.
How you can check →HEX to HSL converter
Converts HEX to HSL, entirely in your browser, with the same round-trip receipt the full color converter shows.
Converting hex to HSL is really two steps folded into one: the hex string is first read as three 0-255 RGB channels, then those channels go through HSL's geometric formula — hue from which channel dominates, saturation and lightness from the spread between the brightest and darkest of the three. Nothing about this transform is perceptual; it's algebra on 8-bit numbers, which is exactly why the HSL lightness it produces doesn't track how light a color actually looks.
The clean way to see the gap: hsl(60 100% 50%) (pure yellow) and hsl(240 100% 50%) (pure blue) both report exactly 50% lightness. Their real WCAG relative luminance — the figure that actually predicts brightness and contrast on a screen — is 0.93 and 0.07 respectively, roughly an 8:1 contrast ratio between two colors HSL's own number calls identical. If you've ever built a gradient or a lightness-based scale in HSL and had it look uneven through the blues and purples, this is why.
A worked example, measured directly: #3b82f6 converts to hsl(217, 91%, 60%) at whole-number precision, but parsing that string back does not return exactly #3b82f6 — it lands on #3c83f6, off by one unit each of red and green. This isn't unusual: whole-number HSL is a rounded value, and how much precision it takes to round-trip exactly depends on the specific color. This page's converter checks the real answer for whatever hex you paste in and shows the smallest precision that actually closes the gap, rather than assuming whole numbers are always enough.
Hex itself is the one format on this page guaranteed to be inside sRGB — it's an sRGB-only syntax by construction, so there's no gamut mapping to worry about in this direction, unlike converting from an unbounded space like OKLCH. The only precision loss possible here comes from how many decimal places the printed HSL string keeps, not from the color itself being unrepresentable.
Use this conversion when a design tool or brand guideline hands you a hex value and your CSS needs HSL specifically — for broad legacy browser support, or because you want to programmatically rotate the hue or adjust saturation, both more intuitive in HSL's polar coordinates than in raw RGB.
Frequently asked questions
- Does every hex color round-trip exactly through HSL?
- Not always at whole-number precision. #3b82f6, for example, prints as hsl(217, 91%, 60%) but parses back to #3c83f6, off by a unit of red and green. Other hex values need additional decimal places in the printed HSL string to return the exact original. This page shows the actual receipt for whatever value you enter.
- Why does hsl(60 100% 50%) look so much brighter than hsl(240 100% 50%)?
- Because HSL's lightness channel is a geometric midpoint of the RGB channels, not a perceptual measure. Those two colors' real WCAG relative luminance is 0.93 versus 0.07 — an 8:1 difference — despite both claiming 50% HSL lightness.
- Can hex represent every color HSL can?
- Yes, and the reverse is also true here — hex and HSL both describe the same sRGB gamut, just with different coordinate systems. Neither can hold a color outside sRGB the way OKLCH or Lab can.