Colour Science & Perception
what the eye settles, and what it cannot
How this site is made

The figure library

Every picture here is generated from code at build time. This page lists the generators, each rendered at its defaults.

No figure on this site is a drawing that was made once and saved. Each one is a function: it takes parameters and returns SVG, so the same generator produces the p4 plate and the p6m plate without either being redrawn.

That is the reason the collection can keep growing without the illustrations drifting apart. A generator is written once, checked once, and every essay that calls it inherits the same line weights, the same colour roles, and the same behaviour in dark mode. There are 31 of them so far.

blackbody

Blackbody spectra from Planck's law, 2000 to 10000 KEach curve is computed from Planck's law and normalised to its own peak. The peak moves toward shorter wavelengths as temperature rises. Only two of these radiators peak inside the visible band at all — a 2000 K source peaks at 1449 nm, far into the infrared, and merely rises toward the red across everything shown here.400450500550600650700wavelength / nm2000 K3000 K4000 K6500 K10000 Keach normalised to its own peakCIE 1931 2° observer

blend-space

The same gradient blended two waysAbove, the code values are interpolated, which is what most tools do. Below, the luminances are. The midpoint of the top ramp carries 23 per cent of white's luminance where it should carry 51, so the top ramp is visibly too dark through its middle.interpolating code valuesinterpolating luminancemidpoint 23%midpoint 51%same endpoints, different middlessRGB

checker-shadow

A checkerboard under a shadow, with two squares markedThe two marked squares are both #797979. One is a dark square in full light; the other is a light square inside the shadow. Nothing about the drawing enforces the illusion — the two values are set equal in code and asserted before drawing.ABA and B are both #797979asserted equal

collapse

A spectrum, weighted three ways, and the three numbers left overThe illuminant D65 above; below, the same spectrum multiplied by each matching function. The area under each product is one coordinate of XYZ. Everything else about the spectrum — its shape, its structure, all its remaining degrees of freedom — is discarded here.D65 spectrum400450500550600650700wavelength / nmx̄ → 95.04ȳ → 100.00z̄ → 108.90the area under each product is one coordinateCIE 1931 2° observer

cones

The three cone fundamentalsLong, medium and short wavelength cones, derived from the colour-matching functions. The L and M peaks are only 25 nm apart — the eye spends two of its three receptors on nearly the same part of the spectrum, which is why red-green deficiency is by far the commonest kind and why the names "red" and "green" cones are misleading.25 nm400450500550600650700wavelength / nmSMLnot red, green and blueCIE 1931 2° observer

cornsweet

The Cornsweet edge, with its luminance profileThe two plateaux are both #898989 and are flat to exactly — the profile below shows that everything which differs lies within a narrow band at the boundary. Cover the centre line and the two halves become obviously identical.one value on the left, the same value on the rightluminance profileboth plateaux are #898989asserted equal

cvd-compare

One palette under normal vision and three dichromaciesThe same 7 colours simulated by the Brettel–Viénot–Mollon construction at full severity. Rows two and three collapse the red-green distinctions; row four leaves them and collapses blue against yellow instead. This shows which discriminations survive, not what anybody sees.normal trichromatprotanopiadeuteranopiatritanopiaBrettel–Viénot–Mollon 1997, severity 1.0a simulation is not an experiencesRGB, D65

delta-e

Three colour-difference formulae, disagreeingΔE76, ΔE94 and ΔE2000 for the same nine pairs of colours. The largest disagreement between ΔE76 and ΔE2000 here is 26.6 units — larger than the threshold usually quoted for a just-noticeable difference, so the choice of formula can decide whether two colours count as matching.ΔE76ΔE94ΔE2000same pairs, three answersCIELAB, D65

encoding-choice

Which colour pairs survive a dichromacy, and which do notThree two-colour encodings under normal vision and three dichromacies. The red-green pair collapses under protanopia and deuteranopia — its chromatic separation falls from 119 to 17 and 12. Blue against orange survives all three, which is why it is the safe default.normalprotandeutantritanred / greenblue / orangeblue / yellowblue/orange is the safe defaultBrettel 1997, severity 1.0

gamma-probe

A gamma probe: which grey matches a half-white dither?The striped block on the left is half white and half black, so it carries half the luminance of white. Stand back until the stripes blur and find the patch that matches it. On an sRGB display the answer is code 188, not 128 — code 128 has only 22 per cent of white's luminance.half white, half black128160176188← this one200220blur the stripes by standing backsRGB transfer function

gamut-compare

sRGB, Display P3 and Rec. 2020 compared on the chromaticity diagramThree nested triangles inside the horseshoe. sRGB covers 74 per cent of the area P3 covers. Rec. 2020's red and green primaries sit on the spectral locus itself, within 0.000 and 0.002 of it, meaning they are monochromatic.0.00.20.40.60.80.00.20.40.60.8xysRGBP3Rec. 2020areas are diagram areas, not perceptualCIE 1931 2° observer

gamut-sweep

A constant-lightness hue circle at chroma 0.13, with the unreachable arcs hatchedThirty-six hues at one lightness and one chroma. 33 of 36 are inside the sRGB gamut; the rest are hatched. The gaps are not evenly spaced, because the gamut is a triangle in a space where a constant-chroma circle is a circle.chroma 0.13, lightness 0.7233 of 36 reachablehatched arcs cannot be shownsRGB

gradient-strip

A single grey bar lying on a gradientThe horizontal bar is #959595 from end to end. Against the dark end of the ramp it looks light; against the light end it looks dark. This is the easiest figure here to verify — one bar, one value, and an eyedropper will confirm it anywhere along its length.the bar is one valuethe bar is #959595 throughoutasserted equal

horseshoe

The CIE 1931 chromaticity diagram with its unreachable region markedThe spectral locus encloses every chromaticity a human eye can see. Cells inside the sRGB triangle are drawn in their own colour; the 85 per cent outside it are hatched, because no value this display accepts is the colour belonging there.0.00.20.40.60.80.00.20.40.60.8xyD65460480500520540560580600620hatched: outside sRGB15% of the visible area is reachableat luminance Y = 0.55CIE 1931 2° observer

illuminant

Illuminant D65 and the white it producesThe spectral power distribution of D65 across the visible range, and the colour a perfect white reflector takes under it: chromaticity (0.3127, 0.3290).400450500550600650700wavelength / nmD65x 0.3127y 0.3290CIE D65 — average daylight, and the white point sRGB assumesCIE 1931 2° observer

illuminant-metamerism

A metameric pair under D65 and under AThe same two reflectances under two lights. Under D65 they match to ΔE00 = 6.2e-14. Under A they are ΔE00 = 13.8 apart, which is a plainly visible difference. Neither surface changed; the illuminant did.400450500550600650700wavelength / nmunder D65ΔE00 6.2e-14under AΔE00 13.8same surfaces, different lightCIE 1931 2° observer

illuminant-set

Four standard illuminants, and how little they have in commonSpectral power distributions for A, D50, D65, E, on one scale. Illuminant A rises steeply toward the red; the daylight illuminants carry the atmosphere's absorption structure; E is flat by definition. All four are ordinarily called white.400450500550600650700wavelength / nmA0.448, 0.407D500.346, 0.358D650.313, 0.329E0.333, 0.333normalised to 100 at 560 nmCIE 1931 2° observer

macadam

MacAdam's discrimination ellipses, drawn 10 times actual sizeTwenty-five ellipses of colours indistinguishable from their centres. They are drawn at 10× because at true scale most are thinner than a line. Their areas vary by a factor of 74, which is the whole result: a step of the same size in xy means very different things in different places.0.00.20.40.60.80.00.20.40.60.8xyellipses at 10× scaleCIE 1931 2° observer

matching-functions

The CIE 1931 colour-matching functionsThe three functions that turn a spectrum into three numbers. They are all positive, which is why XYZ exists — the RGB functions they were derived from are not. ȳ is by construction the luminous efficiency function, which is why luminance comes out of Y.400450500550600650700wavelength / nmx̄ȳz̄ȳ is the luminous efficiency functionCIE 1931 2° observer

metamer-family

5 spectra, one colourOne base reflectance in the heavy line and 4 constructed partners, every one of which produces the same XYZ under D65. The metameric black space is infinite-dimensional, so this is a sample of the family rather than the family.400450500550600650700wavelength / nmall of themthis colour5 spectra drawnCIE 1931 2° observer

metamer-pair

Two different spectra that are the same colourTwo reflectance curves differing by 92 per cent RMS, and the two patches they produce under D65: identical to ΔE00 = 6.2e-14, which is arithmetic noise rather than a small number. Both patches are inside the sRGB gamut, so neither has been clipped into agreement.400450500550600650700wavelength / nmthe two coloursΔE00 = 6.2e-14spectra differ by 92%reflectances, under D65CIE 1931 2° observer

metameric-black

A spectrum the eye integrates to exactly nothingA metameric black: a function of wavelength with substantial structure whose integral against all three colour-matching functions is zero to 9.4e-17 relative. Adding it to any spectrum changes the spectrum and not the colour.400450500550600650700wavelength / nmX = Y = Z = 0to 9.4e-17 relativenot small — cancellingCIE 1931 2° observer

p3-probe

A probe for a wide-gamut displayBoth halves of this block carry the same sRGB red. Where the browser and the panel both support Display P3, the right half is drawn in a red that sRGB cannot reach, and a seam appears down the middle. No seam means an sRGB display — or a browser not managing colour, which this cannot distinguish and does not pretend to.one rectangle, or two?a visible seam means the display reaches past sRGBevaluated by the browser, not the buildCSS color(display-p3 …)

palette-proof

This site's own palette, measured against three dichromaciesThe closest pair in the Okabe–Ito palette under each condition. It holds at ΔE 13.3 under protanopia and 11.1 under deuteranopia, but falls to 8.2 under tritanopia, where orange and reddish purple converge. The palette is safe for the common deficiencies and weaker for the rare one, which is a real property of it and is usually left unsaid.normalΔE 21.7orange / yellowprotanopiaΔE 13.3sky blue / reddish purpledeuteranopiaΔE 11.1orange / yellowtritanopiaΔE 8.2orange / reddish purplethe closest pair, under each conditionmeasured, not claimedΔE2000, Brettel 1997

reflectance

One reflectance, two illuminants, two coloursA reflectance peaking near 550 nm, and the colours it produces under D65 and A. The object has not changed. The light has, and colour is a property of the pair.400450500550600650700wavelength / nmunder D650.339, 0.501under A0.419, 0.515reflectance is a fraction, 0 to 1CIE 1931 2° observer

simultaneous-contrast

Two identical grey patches on different surroundsBoth inner squares are #818181. The one on the dark field looks lighter. The values are asserted equal in code before the figure is drawn, so the claim is a fact about the drawing rather than a promise.on a dark fieldon a light fieldboth patches are #818181asserted equal

space-ranking

Four colour spaces ranked by how uniform they actually areThe spread — largest ellipse over smallest, after transformation — for each space. Raw chromaticity is worst at 10.4. The three perceptual spaces are all far better and close to one another, with CIELUV at 2.21 and Oklab at 2.57 — a smaller gap than the usual advocacy suggests.CIE 1931 xy10.42aniso 2.95CIELAB3.24aniso 3.42CIELUV2.21aniso 2.37Oklab2.57aniso 2.27spread: largest JND ellipse ÷ smallest (1 is perfect)measured, not quotedat Y = 0.4

spectral-strip

Every pure wavelength, and the fact that none of them can be displayedMonochromatic stimuli from 420 to 660 nm. All 13 are outside the sRGB gamut, so all are hatched; the number under each is how far outside, as a percentage of the channel range. A swatch captioned with a wavelength is never that wavelength.420−8513440−3946460−1374480−201500−95520−65540−28560−8580−7600−96620−187640−238660−261all hatched — none is reachablenumber is the gamut miss, %CIE 1931 2° observer

transfer-function

The sRGB transfer function, and the gamma 2.2 curve it is notCode value against relative luminance. The sRGB function is piecewise — a short linear segment near black, then a 2.4 power law with an offset — and it is close to but not the same as a plain 2.2 power law. Half-way along the code axis sits at 21 per cent luminance, and half the luminance of white is at code 188.code 128 → 21% luminance50% luminance → code 188code valuerelative luminancegamma 2.2sRGBthe diagonal would be a linear displayIEC 61966-2-1

uniformity

How uniform CIELAB is, measured against MacAdam's ellipsesFor each of the 25 ellipses, the ratio of its longest to its shortest radius after transforming into CIELAB (a circle would give 1), and its mean radius. Mean anisotropy is 3.42 and the largest ellipse is 3.2 times the smallest. A perfectly uniform space would give 1 and 1.1CIELAB: anisotropy 3.42, spread 3.2the 25 ellipses, in table ordergold: max/min radius per ellipse · grey: relative size1 would be a circleat Y = 0.4

whites-illusion

White's illusion: identical bars on a square-wave gratingBoth grey bars are #909090. The bar sitting in a dark stripe looks darker, not lighter — the opposite of what contrast with the immediate surround predicts, which is why this figure is the standard objection to explaining brightness by lateral inhibition alone.in a dark stripein a light stripeboth bars are #909090asserted equal