HSL to HEX

Why designers use HSL

HSL describes a colour the way people think about it: a hue around the colour wheel (0° red, 120° green, 240° blue), a saturation from grey (0%) to vivid (100%), and a lightness from black (0%) through the pure colour (50%) to white (100%). That makes it easy to build palettes: keep the hue, vary lightness for tints and shades. Design systems and CSS variables often store colours in HSL for that reason, while handoff and many tools still want hex.

Worked example

hsl(32 100% 50%) is a fully saturated orange at half lightness. The CSS algorithm gives red 255, green 136, blue 0, so the hex code is #FF8800. Lower the lightness to 40% and you get a darker orange, #cc6d00, without the hue drifting.

Round trips

Hex has 16.7 million colours; HSL with decimal places has many more. Converting HSL to hex rounds each channel to a whole number, so converting back may show slightly different HSL figures for the same colour.

The page reads hue in degrees and saturation and lightness as percentages, then applies the reference conversion from CSS Color Module Level 4: for each channel it computes k = (n + hue/30) mod 12 with n = 0, 8 and 4, and sets the channel to lightness − a × max(−1, min(k − 3, 9 − k, 1)), where a = saturation × min(lightness, 1 − lightness). The channels are scaled to 0–255, rounded and written as hex. The table also lists RGB, HSV, CMYK and contrast ratios. Everything runs in this tab.