How close a colour is to white or black.
In the HSL colour model, lightness is the average of the maximum and minimum RGB channel values, expressed as a percentage from 0% (black) to 100% (white).
Lightness and value (HSV) are calculated differently and can diverge for highly saturated colours.
A pastel pink has high lightness; a deep burgundy has low lightness — both can share the same hue.
Lightness contrast between two colours is one of the main levers behind whether a pairing reads as subtle or bold.
The CIE defines lightness as the brightness of an area judged relative to a similarly lit area that appears white. CIELAB turns that into a number, L*, from 0 to 100, computed from the cube root of the luminance factor Y so that equal steps look roughly equal. OKLCH's L does the same job on a 0 to 1 scale. HSL lightness is a different thing: the average of the largest and smallest RGB channel, with no model of vision behind it.
| Colour | HSL lightness | CIELAB L* | OKLCH lightness | Light returned (Y) |
|---|---|---|---|---|
| Graphite #383838 | 22% | 23.5 | 0.34 | 4.0% |
| Grey #808080 | 50% | 53.6 | 0.60 | 21.6% |
| L* 50 grey #777777 | 47% | 50.0 | 0.57 | 18.4% |
| Silver #c0c0c0 | 75% | 77.7 | 0.81 | 52.7% |
| White #ffffff | 100% | 100.0 | 1.00 | 100.0% |
Grey #808080 is exactly halfway on the HSL scale and returns 21.6% of the light a white would. The grey that sits at the middle of the CIELAB scale, #777777, returns 18.4%. Perceived lightness is strongly compressed against physical light: the visual midpoint between black and white reflects less than a fifth, not a half.
How this was calculated: The L* 50 grey is built by inverting the CIELAB lightness formula for a neutral and converting to sRGB; Y is WCAG relative luminance as a percentage.
Building a nine-step grey or colour scale with evenly spaced HSL lightness.
The dark steps bunch together and the light steps spread out, and the same lightness number gives a different visual weight in each hue. Spacing the steps in L* or OKLCH L produces a ramp that looks even and holds its contrast ratios across hues.