Color conversion
How to convert HSL to HEX
HSL describes a color by hue angle, saturation, and lightness. To produce HEX, convert HSL to RGB, round each channel to an 8-bit value, then convert those values to hexadecimal pairs.
Open the HSL to HEX converterNormalize the HSL input
Wrap hue into the range 0 to less than 360 degrees. A hue of 360 is the same as 0; negative angles wrap around the color wheel. Divide saturation and lightness percentages by 100.
If saturation is 0, the color is achromatic. Red, green, and blue are all equal to lightness × 255, regardless of the hue value.
Calculate chroma and the RGB sector
Chroma = (1 − |2L − 1|) × S
H′ = hue ÷ 60
The hue sector determines which temporary RGB channels receive chroma, an intermediate value, or zero. Add the lightness adjustment to all three channels, multiply by 255, and round each to the nearest integer.
Worked example
For hsl(210 50% 40%), saturation is 0.5 and lightness is 0.4. Chroma is 0.4, and hue 210° sits halfway through the blue-to-cyan sector. After the lightness adjustment, the RGB channels are 51, 102, and 153.
rgb(51, 102, 153) → #336699
Convert each RGB channel to a two-digit hexadecimal pair and join them in red, green, blue order.
Add optional opacity
Multiply opacity by 255, round to the nearest byte, and append its HEX pair. An opacity of 0.5 becomes byte 128, or 80, so the example becomes #33669980.
HSL is convenient for human adjustments, but it is not perceptually uniform. Equal changes in lightness do not always look equally large across different hues.
Convert with ToolPixels
The free HSL to HEX tool accepts wrapping hue angles, saturation and lightness percentages, and optional opacity. It returns a six or eight-digit HEX color.