Systems and standards
HSL and HSV
Two ways of rearranging RGB into hue, saturation and lightness or value, so that people can pick and adjust colours by eye.
Presented by ClearTrust Free for designers, students and the curious.
HSL and HSV describe the same screen colours as RGB in terms that are easier for people to use. HSL stands for hue, saturation and lightness. HSV stands for hue, saturation and value. Both give hue as an angle around a circle and the other two as percentages. They sit behind most colour pickers. They are convenient, though not accurate models of how colours look.
#BAD9F7hsl(210 80% 60%)#4799EBhsl(210 80% 40%)#1466B8hsl(210 80% 20%)#0A335Chsl(30 80% 50%)#E6801AHow they work
Hue is an angle from 0 to 360 degrees: red at 0, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300. Saturation runs from 0 per cent, a grey, to 100 per cent, the strongest version. In HSL, lightness runs from black at 0 through the pure colour at 50 to white at 100. In HSV, value runs from black at 0 to the brightest version at 100, and white is reached by lowering saturation instead. Both were devised in the 1970s for computer graphics.
Why designers like them
The numbers mean something. To make a lighter version of a colour in HSL, raise the last number. For a set of related colours, keep the hue and change the other two. For a matching accent, add 180 to the hue. Web designers write these directly in style sheets, for example hsl(210 80% 40%) for a strong blue. A whole colour scheme can be built from one hue value, and switched to a different hue by changing a single number. That is hard to do with hex codes.
Where they mislead
HSL lightness is arithmetic, not perception. Pure yellow and pure blue both have a lightness of 50 per cent, yet yellow looks far lighter. So two colours with equal HSL lightness can have very different contrast against white text. Steps of equal size do not look equal either. Newer systems fix this by building on measurements of human vision. CIE Lab and its cylindrical form LCH are the standard ones, and a recent variant called OKLCH is now supported in web browsers. They keep the handy hue, strength and lightness controls.
Sources and further reading
Original text by the Rang desk, written with AI assistance and checked against the sources above. Meanings of colour vary from place to place and person to person. If we have something wrong, tell us.