CIE 1931 · measured, not styled
Colour is bigger than your screen.
The shape below is not a picture of a display. It is every chromaticity a standard human observer can distinguish, plotted from the colour-matching experiments the CIE ran in 1931. Those measurements ship as a 23 KB table, and this page reads it rather than quoting it.
This page is asking your browser what your display can do, and how much of the shape below it can actually mix. The answer replaces this line.
Scroll to cut
reading 471 measurements…
Every colour a human eye can see
—of the diagram
01
The cut
A display has three lights in it. Every colour it emits is a mixture of those three, and every mixture of three points lands inside the triangle they make. That is not an engineering limit waiting to be lifted. It is what mixing means.
Keep scrolling. Everything your display cannot mix drains to flat grey — not darker, not duller, grey, because there is no honest way to show you what is missing using the thing that is missing it.
What is left is the triangle: — of the diagram by area in CIE 1931 xy, and — in the 1976 u′v′ diagram, which stretches the blues and compresses the greens so that equal distances mean something nearer to equal difference.
Both are areas on a chart, and nobody sees area. They are the cheapest defensible way to say most of it, which is the part that is true.
02
The edge is a laser
The outline of the horseshoe is monochromatic light: one wavelength, no mixture. A laser. A sodium street lamp, which is 589 nm and almost nothing else. Drag along it and watch what your screen is asked to do.
- chromaticity x, y
- —
- tristimulus
- —
- linear sRGB
- —
- sent to the panel, 8-bit
- —
the substitute, at the wavelength above
A negative number is not a dark colour. It is an instruction to remove light that was never added, and no channel can do it. The channel clips to zero and you are handed the nearest mixture instead — a different colour, under the same name.
The swatch is that substitute. This page cannot show you the wavelength itself, and neither can any other page you have ever opened.
03
Three triangles
Switch the cut. The triangle moves; the horseshoe does not.
sRGB is what a web page was permitted to say for twenty-five years. Display P3 is the same construction with red and green pushed outward, shipped on every Apple screen since the 2015 iMac and on most OLED phones since. Rec. 2020 puts its three corners on the locus itself — its primaries are monochromatic, 630, 532 and 467 nm, which is why no consumer display emits them and why its triangle is a specification rather than a screen.
The percentages are computed on this page from the same file that draws the horseshoe, not copied from a marketing sheet.
Your machine
What your browser will admit
- reported gamut
- —
- dynamic range
- —
- colour depth
- —
- device pixel ratio
- —
- canvas painting in
- —
- diagram resolution
- 800 × 900 samples
Left: the reddest red in Display P3. Right: the reddest red in sRGB.
If the two squares match, either your display is sRGB or your browser is not addressing anything wider. If the left one is visibly deeper, your screen has been holding that colour back from every page that never asked for it.
None of this is a measurement. The browser repeats what the operating system claims about the panel, and the operating system repeats what the panel claims about itself. Nothing here reads your ICC profile, and no web page can measure a screen: that needs a colorimeter stuck to the glass.
The surround switch in the corner is not a theme. A colour's appearance depends on what surrounds it — the same patch reads lighter against graphite and duller against paper — which is why ISO 3664 specifies the room a print is judged in before it says anything about the print. Choosing a background is a colorimetric decision before it is a stylistic one.
The inputs
Every number this page is built on
Three primaries and a white point per gamut, straight from the specifications. The
matrices are derived from them in color.js, because a pasted matrix
cannot be checked against the figures printed here.
| Gamut | Red x, y | Green x, y | Blue x, y | White | of locus, xy | of locus, u′v′ |
|---|---|---|---|---|---|---|
| sRGB | 0.640, 0.330 | 0.300, 0.600 | 0.150, 0.060 | D65 | — | — |
| Display P3 | 0.680, 0.320 | 0.265, 0.690 | 0.150, 0.060 | D65 | — | — |
| Rec. 2020 | 0.708, 0.292 | 0.170, 0.797 | 0.131, 0.046 | D65 | — | — |
- Observer
- CIE 1931 2° standard observer, x̄ ȳ z̄ at 1 nm, 360–830 nm
— cvrl.org,
retrieved 29 July 2026, shipped unmodified in
data/ - sRGB
- IEC 61966-2-1, primaries of ITU-R BT.709
- Display P3
- SMPTE ST 431-2 primaries, D65 white, sRGB transfer function
- Rec. 2020
- ITU-R BT.2020
- White
- D65 at x 0.3127, y 0.3290
Colophon
What this page is not
The horseshoe is a lie about itself. It is drawn in your display's own colour space, so every chromaticity outside your gamut was already substituted before it reached your eye. A picture of the colours you cannot see, made of the colours you can. That is not a bug to fix; it is the subject.
The standard observer is seventeen people. Wright measured ten and Guild measured seven, in London, in the 1920s, and the average of those two experiments has defined colour for industry ever since. It is a good model. It is not you, and if you are one of the roughly 8% of men with a colour vision deficiency it is further from you still.
No measurement happens here. The panel above reports claims, not readings. A calibrated display and an uncalibrated one make the same claims to a browser.
Built with nothing. No framework, no animation library, no webfont, no image. One HTML file, one stylesheet, three modules, and the 23 KB of 1931 measurements. The colour field is 334,292 chromaticities converted once; scrolling moves a clipping path across it and recomputes nothing.
The page is deliberately grey. Nothing on it is coloured except the thing being measured, so that no border, heading or hover state competes with the only image that carries information.
How this site was built →