Light and the eye
Visible light is the thin slice of electromagnetic radiation between roughly 380 and 750 nanometres. A light source has a spectrum — power at every wavelength — and a surface has a reflectance curve. What reaches your eye is their product.
The retina samples that light with three kinds of cone cell: L, M and S, peaking around 560, 530 and 420 nm. Everything you will ever see as colour is compressed into those three responses — which is why three numbers are enough to describe a colour, and why three primaries are enough to fake one.
Trichromacy and metamerism
Thomas Young proposed three receptors in 1802; Hermann von Helmholtz and James Clerk Maxwell confirmed it with colour-matching experiments in the 1850s. The consequence is metamerism: two physically different spectra that produce the same three cone responses look identical. Your monitor depends on it — its red, green and blue sub-pixels produce a spectrum nothing like a lemon, yet the cones cannot tell.
Metamerism is also why two fabrics can match in the shop and clash in daylight: change the illuminant and the products with each reflectance curve diverge.
CIE 1931 and XYZ
In 1931 the Commission Internationale de l'Éclairage standardised the results of Wright's and Guild's matching experiments as three colour-matching functions x̄(λ), ȳ(λ), z̄(λ). Integrating a spectrum against them gives the tristimulus values X, Y, Z. They were chosen so that all values are positive and Y equals photometric luminance.
Divide out the brightness and you get chromaticity: x = X / (X+Y+Z), y = Y / (X+Y+Z). Plot every pure wavelength and you trace the famous horseshoe — explore it on the Chromaticity page. Any colour made by mixing two lights lies on the straight line between them, which is why each RGB display covers a triangle.
RGB, primaries and gamma
An RGB space is fully defined by three things: the chromaticities of its primaries, a white point, and a transfer function. sRGB (HP & Microsoft, 1996) uses the Rec. 709 primaries, the D65 white point, and a curve of roughly gamma 2.2.
Arithmetic on light — blending, blurring, resizing — must happen on linear values. Averaging encoded values is why naive gradients and downscaled images often look too dark.
HSL, HSV and why they lie
HSV and HSL (both 1978) re-arrange the RGB cube into cylinders so people can think in hue, saturation and lightness. They are geometric conveniences, not models of perception. Both swatches below are hsl(… 100% 50%) — identical “lightness”:
Their CIELAB lightness differs by more than 60 points. Use a perceptual space whenever lightness matters — accessible palettes, data visualisation, gradients.
CIELAB: measuring what we see
In 1942 David MacAdam showed that the colours people cannot tell apart form ellipses on the xy diagram — tiny in the blues, huge in the greens. Equal distances in xy are not equal differences to the eye. CIELAB (1976) warps XYZ to fix this: a cube-root compression mimics the eye's response, and three opponent axes mirror how the visual system encodes colour.
Opponent channels come from Ewald Hering (1878): we never see a reddish green or a yellowish blue, because red–green and blue–yellow are two ends of the same signal. Slice CIELAB on the Lab Matrix page or orbit it in 3D.
ΔE: how different is different?
The colour difference ΔE*76 is simply the straight-line distance in CIELAB; a value of about 2.3 was long quoted as one “just noticeable difference”. But CIELAB is not perfectly uniform — saturated colours were overrated — so the formula was patched: ΔE*94 weights chroma and hue, and CIEDE2000 adds a rotation term for the troublesome blue region, a lightness weighting and a chroma correction for neutrals.
Below 1 the difference is invisible to most observers; 1–2 needs close inspection; above 10 colours read as different. Try it on Contrast & ΔE.
OKLab and the modern web
In 2020 Björn Ottosson published OKLab: a simple space — one matrix, a cube root, another matrix — fitted to modern data so that hue stays constant as colours lighten or darken. CIELAB famously turns saturated blue purple when you reduce its chroma; OKLab does not. CSS Color 4 adopted oklab() and oklch(), and browsers now use OKLab for gamut mapping and gradient interpolation. See the difference on the Gradients page.
Color harmony: a short history
Classical harmonies — complementary, analogous, triadic, split-complementary, tetradic — are geometric rules on a wheel. They work because they control hue relationships, but which wheel you use changes the result: RYB puts violet opposite yellow, RGB puts blue there. Try both on the Harmony wheel.
Simultaneous contrast
Chevreul noticed that a colour shifts away from its surroundings. The two small squares below are exactly the same grey:
This is why a colour picked in isolation never looks the same in a layout — and why legibility metrics like WCAG and APCA compare a pair of colours, not one.
Color vision deficiency
About 8% of men and 0.5% of women of Northern European ancestry have a red–green deficiency: a missing or shifted L cone (protan) or M cone (deutan). Blue–yellow (tritan) defects and complete achromatopsia are rare. Simulations such as Machado, Oliveira & Fernandes (2009) project colours into the reduced space a dichromat can see — run any image through them on the Image Lab.
Practical rule: never let hue be the only difference. Pair colour with lightness contrast, shape, labels or texture.
Glossary
- Hue
- The attribute by which a colour is called red, yellow, green, blue…
- Chroma
- Colourfulness relative to a white of the same brightness. Saturation is colourfulness relative to the colour's own brightness.
- Lightness
- Brightness relative to a white. L* and OKLab L model it.
- Luminance
- Photometric light weighted by the eye's sensitivity (CIE Y). Physical, linear.
- White point
- The chromaticity treated as neutral — D65 (daylight, 6504 K) for screens, D50 for print.
- Gamut
- The set of colours a device or space can produce.
- Chromatic adaptation
- The eye's white balance; modelled by transforms such as Bradford when converting between white points.
- Metamers
- Different spectra that look identical to a given observer under a given light.
- CCT
- Correlated colour temperature: the black-body temperature whose colour is closest to a light source.