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
- 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.
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.
Related tools
HEX to HSL
Convert a hex colour into hue, saturation and lightness — the form that makes a colour easy to lighten, darken or desaturate by hand.
HSL to RGB
Convert hue, saturation and lightness into the red, green and blue channels a screen actually uses.
HEX to RGB
Convert a hex colour to its red, green and blue channels, including the shorthand and alpha forms defined by the CSS specification.
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.
Opens your mail app with the page and tool already filled in.