Skip to main content
BVDART Logo
BVDART
← All guidesColor

Color gamut mapping and clipping

A gamut is the set of colors a system can represent. Gamut mapping chooses a representable replacement for a requested color outside that set.

Push a color through the computed sRGB gamut boundary.

True sRGB gamut boundary at fixed OKLCH lightness, with requested and replacement pointsAMC0L = 0.70 · a/b
C · channel clipping
M · chroma reduction
Outside sRGBRequested linear RGB [1.427, -0.009, -0.046]C 0.300 → 0.194Clipped hue 29.2° · L 0.628

A is the request. M moves inward at fixed hue and lightness. C clamps RGB channels and can move sideways and change L; it is projected onto this a/b slice. The boundary is computed for sRGB. This is a simple chroma search, not the full CSS gamut mapper.

Requested chroma crosses the sRGB boundary at fixed hue and lightness. Clipping and chroma reduction follow different paths. Use any control to take over.

What to try
  1. Increase Requested chroma C until point A crosses the boundary.
  2. Change Hue h and compare chroma reduction M with channel clipping C and its changed hue and lightness.
Open in the Lab ↗

What to look for: Chroma reduction travels toward the neutral center. Channel clipping can shift hue and lightness; its marker is projected onto the displayed a/b slice.

How it works

An OKLCH coordinate can describe a color whose conversion produces an sRGB channel below zero or above one. Simply clamping those channels makes the result displayable, but can shift hue and flatten distinctions between different requested colors.

A different strategy reduces chroma while holding OKLCH lightness and hue fixed. The experiment searches for the largest chroma that fits inside sRGB. This makes the tradeoff explicit: vividness is reduced to keep the other coordinates stable before rounding.

Use it in the Lab

Watch for clipped colors when generating highly saturated harmonies or interpolating in perceptual spaces. Reduce chroma or adjust the endpoints when subtle differences disappear.

Open in the Lab ↗

Limits & distinctions

The example uses a simple constant-lightness, constant-hue chroma search. It is not the complete CSS gamut-mapping algorithm and does not describe a particular printer gamut.

Further reading

Every display, printer, and color space can only reproduce a limited range of colors — its gamut. When a color exists in one gamut but not another (an "out-of-gamut" color), gamut mapping determines how to find the closest acceptable substitute. This is fundamentally a distance problem: which in-gamut color is nearest to the original?

Mapping Strategies

There are several approaches to gamut mapping, each with trade-offs:

  • Clipping — simply cap each channel at the boundary. Fast but can shift hue.
  • Chroma reduction — reduce saturation while preserving hue and lightness. Preferred in OKLCH.
  • Perceptual mapping — compress the entire gamut proportionally so relationships between colors are maintained. Used by ICC profiles.

CSS and Modern Browsers

CSS Color Level 4 introduces the oklch() function and wide-gamut color spaces like Display P3. When a browser encounters an oklch() color that falls outside sRGB on a standard display, it must perform gamut mapping automatically. The CSS specification recommends reducing chroma along the OKLCH lightness axis, preserving the perceived hue.

Real-World Example

A vivid cyan defined in Display P3 may not exist in sRGB. Chroma reduction finds the closest sRGB cyan by walking inward along the chroma axis until the color is representable — keeping the same hue and lightness, just less saturated.

Relevance to Generative Art

When generating artwork palettes in OKLCH, highly chromatic colors may not have sRGB equivalents. Understanding gamut mapping ensures that the colors displayed on screen are the closest possible match to the intended design, and that print reproductions maintain visual harmony.

Related artworks

Related Lab categories

Color Theory Lab ↗Gradient Generator ↗

Sources & references

Guide updated