Color Theory Explained: CIE Chromaticity & Gamut Simulator

Spectral locus

Wavelength 550 nm

Additive RGB mix

Red 1.00

Green 0.55

Blue 0.20

Wavelength color

RGB mix color

Wavelength xy

–

In sRGB gamut?

–

RGB mix xy

–

Luminance Y

–

How it works

Every color the eye can perceive is a point in a 2D chromaticity space derived from the CIE 1931 standard observer. Each visible wavelength has its own tristimulus response x̄(λ), ȳ(λ), z̄(λ) — three bell-shaped "color-matching functions" fitted here with multi-lobe Gaussians. Plotting X=x̄, Y=ȳ, Z=z̄ for every wavelength from 380–700 nm and normalizing to x=X/(X+Y+Z), y=Y/(X+Y+Z) traces the horseshoe-shaped spectral locus — the boundary of all colors that exist in nature. No physical display can reach that whole boundary: a screen mixes only three fixed primaries (red, green, blue), so it can only reproduce the triangle those three points span, the sRGB gamut.

x̄,ȳ,z̄ = Σ Gaussian lobes fitted to CIE 1931 CMFs
x = X/(X+Y+Z),  y = Y/(X+Y+Z)
[X Y Z]ᵀ = M_sRGB→XYZ · [R G B]ᵀ  (D65, linear light)

Wavelength — slides a marker along the spectral locus; almost every monochromatic wavelength sits outside the sRGB triangle, which is why a screen can only ever show a desaturated approximation of a pure spectral color like a laser or a rainbow.
Red / Green / Blue — linear intensities of the three additive primaries; their weighted sum is converted through the sRGB→XYZ matrix to get the mix's real chromaticity, which always lands inside (or on the edge of) the primaries' triangle by construction.

Real-world relevance: this is exactly why "how saturated can my monitor go" is a hardware question, not a software one — wider-gamut displays (DCI-P3, Rec.2020) simply move the triangle's corners closer to the horseshoe's edge.

Spectral locus (visible colors) sRGB gamut triangle Wavelength marker RGB mix marker

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.