OKLCH Gamut Visualizer
See where a color falls across sRGB, P3 and Rec.2020 — in 2D, in 3D, and after gamut mapping.
Mapping reduces chroma in OKLCH to fit the gamut, preserving hue and lightness — not naive channel clipping. ΔE is the perceptual distance from the original.
Three gamuts, one view
The gamut slice shows the maximum chroma reachable at the current hue for each gamut across lightness — so you can see exactly how much more vivid P3 and Rec.2020 get, and where your color lands. Toggle the 3D view to rotate the whole gamut solid.
Mapping, not clipping
When a color falls outside a gamut, the comparison shows the CSS Color 4 gamut-mapped result and its ΔE from the original. Chroma is reduced in OKLCH while hue and lightness stay fixed, which looks far better than truncating RGB channels.
Frequently asked questions
What is a color gamut?
A gamut is the range of colors a display can show. sRGB is the classic web gamut; Display P3 and Rec.2020 are wider, reaching more vivid colors on modern screens.
What happens when a color is outside sRGB?
It is gamut-mapped: chroma is reduced in OKLCH until it fits, keeping hue and lightness stable (the CSS Color 4 method), rather than clipping RGB channels.
What does ΔE mean here?
ΔE (2000) is the perceptual distance between your original color and its gamut-mapped version — smaller is a closer match.