Clipped
Accurate where it can be, but the top of the ramp plateaus - detail
lost.
Gamut Mapping
Every device can only make so many colors. When a vivid screen color meets a smaller gamut - another display, a printer, a phone - the colors that do not fit have to go somewhere. What happens to them is gamut mapping, and the choice between snapping them to the edge or gently squeezing everything in decides whether your image stays faithful or turns flat. This is the interactive guide to mapping color without wrecking it.
Colorimetry · 37
4 Live Demos
~35 min read
Mapping & intents
gamut
The reproducible set of colors
clip vs
compress
compress
Two mapping strategies
4
Rendering intents
hue
Naive clipping shifts it
What a gamut is
A gamut is the complete set of colors a device or color space can actually produce. A wide-gamut monitor reaches vivid greens and reds that sRGB cannot; a printer on uncoated paper reaches far fewer. When you move an image from a larger gamut into a smaller one, some source colors simply have no equivalent on the destination - they are out of gamut. Gamut mapping is the rulebook for what to do with them, and it is unavoidable: the colors cannot just vanish.
The whole problem only exists going from wider to narrower. Map a small gamut into a big one and everything fits with room to spare. It is the squeeze - Display P3 into sRGB, screen into CMYK, Rec.2020 into a phone - where the interesting decisions live.
The core tension: you cannot keep every out-of-gamut color both accurate
and in its place relative to its neighbors. Mapping is always a trade between
colorimetric accuracy (each color as right as possible) and appearance (the
relationships and gradation between colors). Every strategy picks a side.
In gamut vs out of gamut
To map a color you first need to know whether it fits. The plane below is a slice through Lab space at a chosen lightness: the colored region is everything sRGB can reproduce at that lightness, and the dark surround is out of gamut. Dial up the chroma of your test color and watch the marker leave the reproducible island.
Interactive 01 · The gamut boundary
Push a color until it falls off the edge
Set lightness, chroma, and hue. The map shows the sRGB-reproducible colors at that lightness (the bright island) on Lab's a*/b* plane; the marker is your color. Raise the chroma and the marker slides out past the boundary into the dark - that is an out-of-gamut color that will need mapping.
Lab: 60 / -65 / 40
in gamut
Clip vs compress
Two broad strategies handle the colors that do not fit. Clipping leaves every in-gamut color exactly where it is and snaps only the out-of-gamut ones to the nearest point on the boundary. It keeps colors maximally accurate, but a whole range of bright source colors can pile onto the same edge, flattening gradients and losing detail. Compression instead squeezes the entire range inward so the most saturated source colors land just inside the boundary - everything desaturates a little, but the gradation is preserved.
Interactive 02 · Two ways to fit
Snap to the edge, or squeeze it all in
Take an out-of-gamut color (raise the chroma). The left swatch clips it to the sRGB boundary; the right compresses chroma to bring it just inside. The ramps below show the difference on a saturation gradient - clipping plateaus at the top (lost detail), compression keeps every step distinct.
Compressed
A little less saturated overall, but every step stays distinct -
gradation kept.
The four rendering intents
In ICC color management, the strategy is chosen by a rendering intent. There are four, and picking the right one for the content is most of the battle.
Interactive 03 · Rendering intents
Same colors, four philosophies
A row of saturated source colors, mapped into the smaller gamut by each intent (illustrative). Perceptual compresses everything for smooth photos; relative colorimetric keeps in-gamut colors exact and clips the rest; saturation pushes vividness; absolute also reproduces the source white. Switch intents and read what each is for.
Source (wide gamut)
Mapped (this intent)
Perceptual: compresses the whole gamut
so relationships and gradation are preserved. Best for photographs.
The hue-shift trap
The naive way to "fit" a color is to clamp each RGB channel into [0, 1] - and it has a nasty side effect: it shifts the hue. A very saturated blue that overshoots clamps in a way that pushes it toward purple; bright cyans drift green. Proper gamut mapping reduces chroma while holding hue (and usually lightness) constant, so the color stays the same family - just less saturated. The difference is the line between a slightly duller blue and an obviously wrong one.
Interactive 04 · Clamp vs constant-hue
Two ways to clip, two different colors
An out-of-gamut color brought into sRGB two ways. The left clamps RGB channels (fast, naive) and the hue drifts; the right reduces chroma at constant hue and lightness, keeping the color in the right family. The readout shows how far the hue moved.
Naive RGB clamp
hue shifted by 0°
Constant-hue chroma reduction
hue preserved - same family, just less saturated
Where mapping happens
Gamut mapping is not an exotic edge case - it runs constantly, usually invisibly.
Wide gamut → sRGB
Display P3 or Adobe RGB content shown on an sRGB screen, or exported
for the web, is gamut-mapped down.
Screen → print
The big one: a glowing RGB image squeezed into the much smaller CMYK
gamut via the print profile's intent.
HDR → SDR (tone + gamut)
HDR/Rec.2020 mapped to an SDR/sRGB device combines tone mapping with
gamut compression.
Soft proofing
Previewing the mapped result on screen before committing - showing
out-of-gamut warnings and the chosen intent's outcome.
"Out-of-gamut colors do not get an error message. They get silently relocated - and the only
question you control is whether they land somewhere sensible or somewhere ugly."
Editorial summary · fitting color into a smaller box
Choosing an approach
| Content | Use | Why |
|---|---|---|
| Photographs | Perceptual | Smooth gradation and natural relationships matter more than exact values. |
| Logos, spot colors, most graphics | Relative colorimetric (+ BPC) | Keep in-gamut brand colors exact; only clip what truly does not fit. |
| Charts, business graphics | Saturation | Punchy, distinguishable colors beat colorimetric accuracy. |
| Proofing another device | Absolute colorimetric | Simulate the target exactly, including its paper white. |
| UI colors in code | Constant-hue chroma reduction | Bring an OKLCH color into sRGB without a hue shift (CSS gamut mapping). |
The modern default: CSS Color 4 specifies a constant-lightness, constant-hue
chroma-reduction algorithm in OKLCH for bringing colors into a display's gamut - exactly the
"reduce chroma, keep hue" approach from demo 4. When in doubt for UI, that is the safe move.
Pitfalls and gotchas
Naive RGB clamping
Clamping channels shifts hue - blues go purple. Reduce chroma at
constant hue instead.
Wrong intent for photos
Relative-colorimetric on a photo clips saturated skies and flowers to
a flat edge. Use perceptual.
Perceptual on exact brand color
Perceptual desaturates everything, so an in-gamut logo color drifts.
Use relative colorimetric to keep it exact.
Mapping twice
Round-tripping through gamuts compounds losses. Map once, late, to the
final destination.
No black point compensation
Without BPC, shadows can crush or wash out when mapping to a smaller
dynamic range. Enable it for most work.
Designing out of gamut blind
Authoring vivid colors with no soft proof guarantees surprises. Check
the destination gamut early.
Test your understanding
Six questions on gamuts, clipping, compression, and intents. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.
Quick check
Loading…
Question 1 of 6
Continue your journey
Gamut mapping is the bridge between working spaces, profiles, and output. The numbers reflect each article's position in the editorial roadmap.
Print · 51
Color Proofing: Soft Proofing and Hard Proofs
Choosing the right intent to soft-proof and sign off a print.
Digital · 16ICC Profiles and How Color Management Works
Where rendering intents live and how the CMM applies them.
Digital · 18RGB, sRGB, Adobe RGB, ProPhoto, Display P3, Rec.2020
The gamuts whose size differences make mapping necessary.
Colorimetry · 10Chromaticity Diagrams Without the Intimidation
The gamut triangles this article maps colors into.
Print · 23CMYK and the Four-Color Printing Process
The classic, dramatic gamut squeeze: screen into ink.
Digital · 19HDR, Wide Gamut, PQ, HLG, and Modern Displays
Where gamut mapping meets tone mapping, HDR to SDR.
Colorimetry · 22Oklab and Oklch: Modern Perceptual Color Spaces
The space CSS uses for constant-hue gamut mapping.