HSL to HEX

Turn hue, saturation and lightness into a hex code — useful when a colour was picked by feel and now has to go into a stylesheet or a design file.

HEX#6467f2
HEX
#6467f2
RGB
rgb(100 103 242)
HSL
hsl(238.73 84.52% 67.06%)
OKLCH
oklch(0.5886 0.2039 277.18)

This is the direction you need after picking a colour by adjusting sliders: the result has to be written down somewhere that only understands hex. The conversion is exact in the sense that it round trips, but the hex code is quantised to whole channels, so very small changes in saturation may not move it at all.

How it is calculated

f(n) = L − a · max(−1, min(k − 3, 9 − k, 1)) where k = (n + H/30) mod 12, a = S · min(L, 1 − L)

The specification defines the conversion as one function evaluated three times, at offsets 0, 8 and 4, which yields red, green and blue in turn. Each result is then scaled to 0..255 and written in hex.

Source: W3C CSS Color Module Level 4 §7.1 — converting HSL colors to sRGB, with saturation and lightness given in reference range [0,100]

Questions people ask

Why does the hex code not change when I nudge saturation by one percent?
Because hex has 256 steps per channel and HSL is continuous. Several nearby HSL values round to the same byte, so small moves can land on the same code.
What happens to hue above 360?
It wraps. Hue is an angle, so 400 degrees is the same as 40 — the conversion takes it modulo 12 in the spec algorithm, which has the same effect.
Do I need the percent signs?
For CSS itself yes, saturation and lightness are percentages. This tool reads the numbers either way, but copy the output with the signs intact if it is going into a stylesheet.

Found a problem, or want more?

A number that disagrees with its source is a defect, not a rounding preference.

What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.

Write to us

Opens your mail app with the page and tool already filled in.

Related tools