HomeColour Science & Perceptual DesignColor Theory Explained: CIE Chromaticity & Gamut Simulator

Color Theory Explained: CIE Chromaticity & Gamut Simulator

Interactive CIE 1931 chromaticity diagram: plot the visible spectral locus from real color-matching functions, tune an additive RGB mix and see exactly which colors a display can and can't reproduce.

Colour Science & Perceptual Design3DModerate60 FPS
color-theory ↗ Open standalone

Color theory usually starts with the artist's color wheel — hue, saturation, value, and how mixing paint or light changes them — but underneath that intuitive picture is real, measurable physics: the human eye has three types of cone cells, and every color it can distinguish reduces to a single point in a well-defined mathematical space. This simulator builds that space directly from the CIE 1931 standard observer's color-matching functions, tracing the spectral locus of every wavelength of visible light and overlaying the triangular gamut that a real RGB display can reproduce. Slide through the spectrum to see how far pure, saturated light sits outside what any screen can show, then mix red, green and blue light and watch the resulting chromaticity move inside that triangle — the same additive-mixing math that drives every pixel on every display.

⚙ Under the hood

Plot the visible spectral locus from real CIE 1931 color-matching functions, tune an additive RGB mix and see exactly which colors a real display's sRGB gamut can and can't reproduce.

Three.jscolor scienceCIE chromaticitycolor gamutadditive mixingoptics

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)