Short answer
It has to be replaced with one the screen can show. The crude way, clipping, pushes each out-of-range RGB channel back to 0 or 1, which can shift hue and lightness. Gamut mapping instead looks for a nearby in-gamut colour in a perceptual space; CSS Color 4 specifies reducing chroma in OKLCH while holding lightness and hue, accepting a clipped result once it is within one just-noticeable difference.
An out-of-gamut colour converted into a smaller RGB space has at least one channel below 0 or above 1. Clipping each channel independently fixes the numbers but changes the ratios between channels, and those ratios are the hue. A cyan that needs a negative red, for example, gets its red raised to zero, which also brightens it and turns it towards green or blue depending on the other channels. The table on this page shows the effect: for a saturated cyan outside sRGB, clipping moves the hue by several degrees and raises lightness noticeably; for a vivid red, clipping darkens it slightly. Clipping is cheap and is what many system compositors do, including Windows automatic colour management.
CSS Color 4 defines gamut mapping for individually specified colours on RGB displays. The colour is converted to OKLCH; if lightness is at or above 1 it becomes white, at or below 0 black; otherwise chroma is reduced step by step with lightness and hue held constant. At each step the candidate is compared with its own clipped version using the OKLab difference, and once they are less than 0.02 apart — the value the specification treats as one just-noticeable difference — the clipped colour is returned. The spec now allows three algorithms (binary search with local MINDE, EdgeSeeker and ray trace) that all aim at this constant-lightness, constant-hue result, so browsers may differ slightly in the exact answer.
The local-clip step exists because pure chroma reduction can overshoot, draining too much colour from very light yellows and cyans where the gamut boundary is concave.
These choices correspond to the rendering intents used in ICC colour management. The CSS algorithms implement a relative colorimetric intent: colours that fit are left exactly as they are, and only the ones outside are moved. That is right for a brand colour or a UI swatch. For photographs, CSS notes that a perceptual intent is more appropriate: it compresses the whole image's colours slightly so that gradations near the gamut edge survive, at the cost of changing colours that were already displayable. A sky gradient mapped colorimetrically can band where many distinct out-of-gamut blues land on the same boundary colour; perceptual mapping keeps them distinct.
Gamut mapping is a safety net, not a design tool. If a palette relies on colours outside sRGB, choose the sRGB fallbacks by hand, because automatic mapping preserves lightness and hue but not relationships: two colours that differ only in chroma beyond the sRGB edge become identical. Check contrast with the mapped colours rather than the wide-gamut originals — chroma reduction preserves OKLCH lightness, so contrast usually survives, but not always exactly. And be wary of values beyond Rec. 2020 or outside visible colour, which OKLCH happily accepts; they will always be mapped, and different browsers may map them differently.
| Requested colour | Smallest space that contains it | Per-channel clip to sRGB | Chroma reduction to sRGB |
|---|---|---|---|
| P3 green: oklch(0.7 0.25 145) | Display P3 | #00c30b — L +0.008, hue shift 2.3° | #00bf34 — chroma 0.25 → 0.220, L and hue held |
| P3 red: oklch(0.65 0.26 30) | Display P3 | #ff1802 — L -0.017, hue shift 0.0° | #ff3624 — chroma 0.26 → 0.236, L and hue held |
| Rec. 2020 cyan: oklch(0.6 0.2 200) | Rec. 2020 | #009faf — L +0.042, hue shift 7.4° | #009298 — chroma 0.2 → 0.102, L and hue held |
| Beyond Rec. 2020 magenta: oklch(0.5 0.3 330) | none of these | #b400b0 — L +0.038, hue shift 0.4° | #a4009f — chroma 0.3 → 0.228, L and hue held |
Why: The colour was outside the screen's gamut and the software clipped channels instead of mapping.
Fix: Provide an explicit sRGB fallback chosen by eye.
Why: Colorimetric mapping sent a run of different out-of-gamut colours to the same boundary colour.
Fix: Keep gradient end-points inside sRGB, or accept the band only on screens that will map it.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
StandardStrong evidence
CSS Color 4's gamut-mapping algorithms aim at constant-lightness, constant-hue chroma reduction in OKLCH, return white for lightness ≥ 1 and black for lightness ≤ 0, and treat an OKLab difference of 0.02 as one just-noticeable difference.
Caveat: CSS Color 4 is a Candidate Recommendation Draft; the September 2026 draft permits three algorithms, so implementations may differ in detail.
Source: CSS Color Module Level 4
StandardStrong evidence
The CSS gamut-mapping algorithms implement a relative colorimetric intent, and the specification notes that a perceptual intent is more appropriate for photographic images.
Source: CSS Color Module Level 4
FactStrong evidence
Windows automatic colour management converts content with a matrix and 1D lookup table and numerically clips colours that exceed the display's target gamut.
Source: Use DirectX with Advanced Color on high/standard dynamic range displays
Colourwise analysisStrong evidence
For a saturated cyan outside sRGB, per-channel clipping shifts OKLCH hue by several degrees and raises lightness, whereas constant-hue chroma reduction changes neither.
Based on: Computed by Colourwise for the sample colours in the table on this page.
Caveat: Computed for four sample colours; the size of the clipping error varies widely with hue and lightness.
Source: CSS Color Module Level 4; A perceptual color space for image processing (Oklab); International Electrotechnical Commission (IEC) webstore and catalogue
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.