Color Spaces

Model vs space

A color model is a mathematical framework — RGB, CMYK, Lab. A color space is a specific instance of a model with concrete parameters: primaries, white point, gamma curve. The distinction matters because two implementations of the "same" model can describe different colors.

The major RGB spaces

RGB is one model, but several color spaces use it with different primaries and gamma. The result is that the same RGB numbers describe different colors depending on which space they are in.

Device-independent spaces

Some spaces do not depend on any device. They describe absolute color, defined by the CIE's standard observer model.

CIE XYZ

The master device-independent space. All other color spaces are defined relative to XYZ. XYZ describes color as three tristimulus values (X, Y, Z) that are linear combinations of the eye's three cone responses. Y is proportional to luminance. XYZ is not perceptually uniform but is the reference for everything else.

CIE Lab

A perceptual transformation of XYZ. L* is lightness, a* is the green-red axis, b* is the blue-yellow axis. Lab is designed so equal numeric differences correspond to roughly equal perceptual differences. Standard in color science and print.

CIE LCH

The polar form of Lab. L is lightness, C is chroma (saturation), h is hue angle. More intuitive than Lab for hue-based work.

OKLab / OKLCH

A modern (2020) perceptual space designed by Björn Ottosson. It is simpler to compute than CIE Lab and handles the blue region more evenly. Increasingly the standard for design systems and CSS.

How spaces convert to each other

Conversion between color spaces happens through a small number of hubs. In practice, most conversions pass through either linear RGB or XYZ:

sRGB  ──▶ linear sRGB  ──▶ XYZ  ──▶ Lab  ──▶ LCH
                       │
                       └──▶ OKLab ──▶ OKLCH

Display-P3 ──▶ linear P3 ──▶ XYZ  (same hub)
Adobe RGB  ──▶ linear Adobe RGB ──▶ XYZ  (same hub)

XYZ is the universal hub for device-independent conversion.

This is why a well-designed color library never converts directly from one RGB space to another. It always goes through the shared hub, applying the correct transformation for each side.

Practical consequences

• Same numbers, different colors. rgb(255, 0, 0) in sRGB and in Display-P3 are different colors. CSS treats unspecified RGB as sRGB.
• Gamut matters. Colors outside a space's gamut cannot be displayed in it — they must be clipped or mapped to the nearest reproducible color.
• Color accuracy requires profiles. Real print and screen workflows embed ICC profiles to describe exactly which space a color value is in.
• Perception is not the same as gamut. Lab, OKLab and OKLCH are perceptual — they describe how colors look. sRGB, P3 and Adobe RGB are device spaces — they describe what a screen or printer can output.

Which space should I use?

Continue reading

Frequently asked questions