How the maths works
Start with chroma, C = (1 - |2L - 1|) × S — the colourfulness available at that lightness. A second term X handles the ramp between the two dominant channels, and m = L - C/2 lifts everything to the right brightness. The hue then selects which of six 60° sectors of the wheel you are in, and that decides which channel gets C, which gets X and which gets zero. Finally each channel is scaled to 0-255 and printed as two hex digits.
Plenty of people keep the hex to RGB converter open alongside this one.
Rounding is normal
Hex has only 256 steps per channel, so an HSL triple almost never lands on an exact byte. Converting hsl(11, 100%, 60%) and back through the RGB to HSL converter can shift a degree of hue or a percent of lightness. That is expected and invisible on screen — treat hex as the storage format and HSL as the editing format.
Try the colour picker when you want the outcome decided a different way.
Building a scale
Fix hue and saturation, then step lightness from about 95% down to 10% and you have a full palette ramp from tint to shade with one consistent hue. The tint and shade generator does exactly that automatically if you would rather start from a hex code.
Because hue and saturation stay fixed, the whole ramp reads as one colour family; check the darkest steps against white for the 4.5:1 AA threshold, or 7:1 if you need AAA.
Frequently asked questions
- What hex is hsl(11, 100%, 60%)?
- Roughly #FF5833, which is rgb(255, 88, 51) — a warm coral orange.
- Why does the hex differ by one from another tool?
- Different tools round the final channel value slightly differently. A one step difference is imperceptible.
- What if saturation is 0%?
- You get a neutral grey whose brightness depends only on lightness — hue is irrelevant.
- Can hue be over 360?
- Yes. Hue wraps around the wheel, so 380 is treated the same as 20.
- Is anything I enter sent to a server?
- No — the conversion runs entirely in your browser with JavaScript, so the values you type are never uploaded, logged or stored. Nothing is remembered between visits either, so copy the hex code before you close the tab.