Gamut Mapping: fitting wide colors into smaller spaces

1. What is a gamut?

A gamut is the set of colors a system can actually represent. Every RGB color space is defined by three primaries — the reddest red, greenest green, and bluest blue it can make — and every color it can encode is some mix of those three. Plot the primaries in a device-independent space like CIE XYZ and they form a triangle (in 2D) or a cube-shaped solid (in 3D): everything inside is reachable, everything outside is not.

Wide-gamut spaces like ProPhoto RGB, ACES, and DaVinci Wide Gamut have primaries pushed far out — some even outside the spectrum of real light — so they can hold extremely saturated colors. Display spaces like Rec.709 / sRGB are much smaller. So the central question of color management: when a color lives in a big space but has to be shown in a small one, what do you do with the colors that don’t fit?

2. The two strategies

The widget below generates a grid of input colors — rows are hues, columns sweep HSL saturation from 0 to 1 — in a color space and transfer function you choose, then maps them into a destination gamut two different ways:

• Clip — the naive approach: each channel is simply clamped into range. Fast, but it crushes detail and shifts hue, because clamping one channel changes the ratio between them.
• CSS 4 (perceptual) — the algorithm browsers use: it holds lightness and hue fixed in OKLCh and reduces chroma until the color just fits. Smoother gradients, far less hue drift.

Watch the out-of-gamut count and the swatches as you switch a wide input space (say ProPhoto) into sRGB: the input swatches that can’t be shown are clip-flagged with a dot, and the output grid shows how each method resolves them.

3. How clipping works, channel by channel

Clipping is the bluntest mapping there is, and seeing it per-channel makes its flaws obvious. Pick a wide source space and a smaller destination space. The input sliders are channels in the source — every value from 0 to 1 is a real source color — but the destination gamut is smaller, so its edge falls inside that range. The dashed line on each slider marks that edge in source-space values: below it the color fits, above it it doesn’t.

Once a channel is in destination coordinates, clipping clamps it independently to [0, 1]. The catch is that a color’s hue and lightness come from the ratio between its channels — clamping one but not the others changes those ratios, so the result drifts in hue and flattens in saturation. Push a source channel past its dashed limit and watch the destination channels snap, and how very different source colors collapse onto the same clipped output — information that perceptual mapping would have preserved.

4. Reading the 3D view

The 3D panel plots the same colors inside the RGB-cube wireframes of the input and output spaces. Because primaries and transfer function are decoupled, the geometry is the colorimetry — not the encoding. Switch the view between:

• RGB / HSL — relative to the output space’s cube, so input colors that fall outside it visibly poke through the walls.
• OKLab / CIE Lab — device-independent perceptual coordinates, the honest way to compare gamut volumes: a ProPhoto or ACES cube dwarfs the sRGB one.

Turn on Arrows to see each input color’s displacement to its mapped output — clip pulls colors straight to the nearest wall, while the perceptual method slides them along constant hue and lightness.

5. A note on what you’re seeing

Your screen is itself an sRGB (or P3) device, so the input swatches for wide-gamut spaces are already clipped just to draw them here — the widget can only hint at colors it cannot truly show. The mapping math, however, runs on the full-precision wide-gamut values before any display clipping, which is exactly why gamut mapping matters in a real pipeline.