Color Explorer

How does light become a number in a pixel – and back into a color sensation? Three interactive stations on color matching, CIE XYZ, gamut and color spaces.

  1. 1 Light (spectrum)→
  2. 2 Eye (three numbers)→
  3. 3 Standard (CIE XYZ)→
  4. 4 Device (RGB, gamut)→
  5. 5 Perception

Color matching: can every color be mixed from three lights?

On the left you choose a target light and three primary lights. Below the sliders you see how strongly each primary would have to shine so that the eye can no longer tell the mix from the target. On the right, the spectra and the chromaticity diagram show what is going on. If a weight is negative, the target lies outside the gamut of the primaries.

Target light

Primary lights

Required weights (luminance, relative)

Spectra

Target light

CIE chromaticity diagram

Triangle = gamut of the primaries ● target   ○ physically possible mix (shown only if it differs from the target)

Things to explore

  1. Start with the default settings: target at 505 nm, CIE primaries. Which weight is negative, and what does that mean?
    Answer

    Red becomes negative: 505 nm lies outside the triangle in the xy diagram. In the historical experiments of the late 1920s, red was therefore added to the target light instead of to the mix. This is where the negative lobe of the r̄ curve comes from.

  2. Make the target light broad (σ ≈ 60 nm). What happens to the point in the diagram and to the weights?
    Answer

    The point moves inward from the edge (less saturated) and ends up inside the triangle. Now all weights are positive: two completely different spectra produce the same color sensation. This is metamerism.

  3. Choose “Display-like”. What happens to the triangle?
    Answer

    The triangle shrinks to about 60 % of its area, for two reasons. The red and blue primaries move closer to the middle of the spectrum (red 700 → 612 nm, blue 436 → 465 nm), so their corners move along the horseshoe toward each other. In addition, all three primaries become much broader, and broad spectra are less saturated, so the corners move further inward. This is why real displays cannot show many saturated colors.

  4. Are there three real primaries that can mix all spectral colors?
    Answer

    No. The edge of the horseshoe is curved, so every triangle with its corners inside it leaves regions out. This is why CIE XYZ uses imaginary primaries outside the horseshoe: with them, all visible colors have positive weights.

Converting color spaces

Enter a color in one color space and see what it looks like in the others. The linear spaces (XYZ, CIE RGB, sRGB) are related by 3×3 matrices; HLS, HSV and CIELAB are nonlinear.

Shown on this screen (sRGB)

Position in the chromaticity diagram

solid: sRGB gamut dashed: CIE RGB gamut

The diagram shows only chromaticity (x, y). Luminance Y is missing, so brown and orange land on almost the same point.

Things to explore

  1. Click “Orange” and then “Brown”, and compare (x, y).
    Answer

    The chromaticity is almost the same; brown is a dark orange. There is no brown in the chromaticity diagram because luminance is projected out.

  2. Click “Gray”. What does HLS show for the hue H?
    Answer

    H is undefined because the saturation is zero. At L = 0 or L = 1, even H and S are arbitrary. Many HLS triples therefore belong to the same RGB color, so the mapping is not bijective.

  3. Click “Spectral color 520 nm”. What happens in CIE RGB and sRGB?
    Answer

    Both yield negative components: the color is visible but lies outside both gamuts. The screen can only show an approximation.

Gradients & lightness: where are equal steps equal?

The same color gradient looks very different depending on the color space used for interpolation. Below each gradient, the perceived lightness L* (CIELAB) is plotted. A good gradient for data has a monotonic L* curve and even color differences ΔE.

Same V in HSV, very different lightness

All six colors have V = 1 and S = 1 in HSV. Below each one is the gray with the same perceived lightness L*.

Things to explore

  1. Which gradient has the most even steps?
    Answer

    Usually CIELAB: the range of ΔE values is smallest there, because Lab is approximately (not perfectly) perceptually uniform.

  2. Blue → Yellow in RGB: what happens in the middle?
    Answer

    The middle is a washed-out, grayish color, because linear interpolation in RGB runs through the inside of the cube, close to the gray axis.