HEX to HSL Converter
HSL describes a color as a hue angle plus saturation and lightness percentages. The conversion starts by reading HEX as RGB, then normalizing each RGB channel to the 0–1 range.
Worked example
- Input
- #336699
- Output
- hsl(210, 50%, 40%)
- Calculation
- max = 0.6; min = 0.2; L = 40%; S = 50%; H = 210°
How the conversion works
Find the largest and smallest normalized RGB channels. Their midpoint gives lightness, their difference determines saturation, and the channel containing the maximum determines the hue sector.
Important note
HSL is convenient for authoring variations, but equal HSL lightness values do not guarantee equal perceived brightness or accessible contrast.