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.
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.
