Charts · 02

Why HSL lies

Ask HSL for twenty-four hues at fifty percent lightness and you get a yellow you can barely look at next to a blue that is nearly navy. The number is the same; the light reaching your eye is not. CIELCH and OKLCH define lightness by how bright a colour looks, so the same request gives an even row. Every luminance here is computed from the swatch you are looking at.

Hue 60°

Hover, tap or arrow through any chip to inspect that hue in all three models.

ModelValueShown asRelative luminanceOn whiteOn black
HSLhsl(60 90% 50%)#f2f20d0.8261.2:117.5:1
CIELCHlch(53% 38 60)#ad72470.2144.0:15.3:1
OKLCHoklch(0.60 0.10 60)#ab703e0.2074.1:15.1:1

HSL

L = (max + min) / 2 of the RGB channels. Blue and yellow at the same L differ by a factor of nine in luminance.

hsl(hue 90% 50%)

Brightest swatch is 12.2× the luminance of the darkest.

  1. 19
  2. 23
  3. 34
  4. 54
  5. 83
  6. 74
  7. 68
  8. 65
  9. 64
  10. 64
  11. 65
  12. 67
  13. 70
  14. 41
  15. 22
  16. 11
  17. 7
  18. 8
  19. 11
  20. 17
  21. 26
  22. 23
  23. 21
  24. 20

CIELCH

L* from CIELAB, a cube root of luminance. Even, but hues drift as chroma changes and some swatches leave sRGB (hatched).

lch(53% 38 hue)

Brightest swatch is 1.0× the luminance of the darkest.

  1. 21
  2. 21
  3. 21
  4. 21
  5. 21
  6. 21
  7. 21
  8. 21
  9. 21
  10. 21
  11. 21
  12. 21
  13. 22
  14. 22
  15. 22
  16. 22
  17. 22
  18. 21
  19. 21
  20. 21
  21. 21
  22. 21
  23. 21
  24. 21

OKLCH

L from Oklab: cone responses, cube root, a fitted matrix. Even lightness and hues that stay put. Gamut is built on it.

oklch(0.60 0.10 hue)

Brightest swatch is 1.1× the luminance of the darkest.

  1. 20
  2. 20
  3. 20
  4. 20
  5. 21
  6. 21
  7. 21
  8. 22
  9. 22
  10. 22
  11. 23
  12. 23
  13. 23
  14. 23
  15. 22
  16. 22
  17. 22
  18. 21
  19. 21
  20. 21
  21. 20
  22. 20
  23. 20
  24. 20

Chips are the colours; the bars beneath are their measured relative luminance (WCAG formula), on one scale across all three rows. Hatched chips fall outside sRGB and are shown clipped.

Notes

HSL lightness is the mean of the largest and smallest RGB channels, so a saturated yellow (two channels high) and a saturated blue (one channel high) get the same L while differing by about nine to one in luminance. CIELAB and Oklab both take a cube root of a luminance-like quantity, which is why their rows are flat. The LCH and OKLCH rows are matched to the HSL row through the luminance of the same grey, so the three are comparing like with like.

Relative luminance is the WCAG 2 definition (0.2126 R + 0.7152 G + 0.0722 B on linear sRGB). Conversions are implemented from first principles in the page, no library: sRGB companding, Oklab (Ottosson 2020), CIELAB with the D65 white point. Swatches outside sRGB are clipped and hatched rather than gamut-mapped, so what you see is honest about what the screen can do.