Hue, saturation and lightness

In HSL, yellow and blue both have a lightness of 50%, yet yellow reflects almost 13 times as much light as blue by the WCAG luminance formula.

Turning the cube into a cylinder

RGB numbers are easy for a screen and hard for a person. If you want "the same blue, a bit lighter", you have to change all three channels at once by different amounts. HSL rearranges the same sRGB colours so that the controls match how people talk about colour. CSS Color 4 describes it as a cylindrical model: a hue angle around the outside, a central axis for lightness from black to white, and a radius for saturation, which is how far a colour is from a neutral grey.

Picture the RGB cube standing on its black corner with white straight above. The grey axis is now vertical. Look down from above and the six vivid corners, red, yellow, green, cyan, blue and magenta, form a ring around the axis. HSL takes that ring, makes it round, and stretches the whole solid into a cylinder. The model above shows the result: a horizontal disk at the chosen lightness and an upright slice at the chosen hue and its opposite. Click anywhere on either surface to pick that colour.

Hue

Hue is an angle in degrees. CSS Color 4 fixes the starting point: 0deg is sRGB red, 120deg is green and 240deg is blue, and 360deg comes back to red. Halfway between the primaries are the secondaries: 60deg yellow, 180deg cyan and 300deg magenta. Because hue is an angle, it wraps around. A hue of 390deg is the same as 30deg, and adding 180deg to any hue lands on the colour directly across the circle.

Saturation and lightness

Saturation is a percentage. At 100% the colour sits on the outside of the cylinder and is as vivid as sRGB allows at that lightness. At 0% it sits on the central axis and is a grey; CSS Color 4 says the hue then has no effect at all, so hsl(0deg 0% 50%) and hsl(180deg 0% 50%) are the same grey. Lightness is also a percentage. 0% is black for every hue, 100% is white for every hue, and 50% gives the most vivid version of a hue. So hsl(0deg 100% 50%) is the same red as #ff0000, while hsl(120deg 100% 25%) is a dark green, rgb(0 128 0).

Where HSL misleads

HSL is convenient, and the CSS specification is frank about its limits. Its lightness is not the lightness your eye sees. Yellow, hsl(60deg 100% 50%), and blue, hsl(240deg 100% 50%), have the same L of 50%, but yellow looks far lighter. The WCAG luminance formula gives 0.9278 for that yellow and 0.0722 for that blue, a ratio of almost 13. The hue angle is not even either: the specification notes that a 30 degree step among blues looks small, while the same step between yellow and green looks large. Newer CSS spaces such as oklch() were designed to fix this. For checking whether text can be read, never trust HSL lightness. Use the contrast ratio, which you will compute in unit 6.