Fit an out-of-gamut color into sRGB the right way: hold lightness and hue in OKLCH and reduce only chroma until it fits — the CSS-style approach — and compare that against naive channel clipping, which visibly shifts hue. Outputs CSS with a widest-gamut-first fallback chain.
Settings
Generated locally in your browser — your settings and results never leave this page.
Two ways to force a fit
When a color exceeds sRGB, something must yield — the only question is what. Channel clipping lets everything yield at once: truncating RGB values shifts hue and lightness unpredictably (the vivid green that returns yellowish, the electric blue that returns darker and dimmer). Perceptual mapping chooses the casualty deliberately: hold lightness, hold hue, reduce only chroma until the boundary admits the color — same character, lower volume. This tool computes both so the difference is a comparison, not a claim.
The CSS-aligned algorithm
The mapping follows the CSS Color 4 approach: binary-search the largest chroma at the color’s OKLCH lightness and hue that fits inside sRGB. Invariants are tested, not assumed — mapped results hold hue within ~1.5° and lightness within 0.01 of the request. The printed requested-versus-achieved chroma turns the cost into a number: some colors lose 3% of their chroma, vivid P3 greens can lose a third. Knowing which is happening is the difference between an informed fallback and a shrug.
The fallback chain, generated
The CSS output encodes the standard progressive-enhancement pattern: the mapped hex first (every browser renders it), the original wide value second (capable browsers override). No feature queries needed — the cascade is the detection. Tokens that store both values future-proof a design system for the wide-gamut transition currently underway.
Choosing a target intentionally
sRGB is this tool’s target because the open web is its context; apps targeting known-P3 fleets (iOS, modern Macs) may prefer mapping to P3’s larger boundary with platform tooling. The decision is the same shape at any boundary: map deliberately, disclose the cost, ship the chain. For auditing many colors at once, the sRGB Gamut Checker batches this tool’s judgment across whole palettes.
A concrete mapping, traced
Take oklch(0.7 0.35 150) — a green far beyond sRGB. Naive clipping returns roughly #00c95d having silently dropped lightness and bent hue toward yellow-green. The mapper instead holds L 0.7 and hue 150° fixed and binary-searches chroma: 0.35 fails, 0.175 fits, 0.26 fails… converging near C 0.21 — #00c883-territory, visibly the same green in a quieter voice. Requested 0.35, achieved 0.21: the cost printed as a number, the identity preserved as promised. Every mapping this page performs is that same trace with your values.
How to use the Color Gamut Mapper
- Enter the color – typically a lab()/lch()/oklch() value that exceeds sRGB.
- Compare the proper chroma-mapped fit against the naive channel clip.
- Copy the CSS with a widest-gamut-first fallback chain.
Frequently asked questions
What does gamut mapping do that clipping does not?
Mapping keeps the color's identity: hold lightness and hue in OKLCH, reduce only chroma until sRGB accepts it – the color stays "the same, calmer". Clipping truncates RGB channels independently, shifting hue and lightness unpredictably (vivid greens go yellow-ish, blues darken). The tool shows both so the difference stops being theoretical.
Is this the same method browsers use?
It is the CSS Color 4 recommended approach (constant-L/H chroma reduction, binary-searched), which is what engines converged toward for CSS colors. Historically browsers clipped, and some canvas paths still do – one more reason to pre-map important colors yourself.
What does the CSS fallback output look like?
Two declarations: the mapped sRGB hex first (every browser), then your original wide value (capable browsers override). Cascade order does the feature-detection – no @supports needed for colors.
How much chroma do typical out-of-gamut colors lose?
Depends on hue and lightness: a P3-vivid green at mid lightness may drop 20-30% of its chroma; a slightly-out blue only a few percent. The tool prints requested versus achieved chroma so the cost is a number, not a vibe.
Does mapping ever change lightness or hue at all?
By construction, no – within floating-point tolerance (the tests assert hue within ~1.5° and L within 0.01 through the map). That invariance is the entire point of doing it in OKLCH rather than any RGB-ish space.
When should I NOT map to sRGB?
When targeting known-P3 contexts (iOS apps, P3 canvas) where the wider color is deliverable – then map to P3 instead (tooling for that lives in your platform). For the open web, sRGB mapping with the fallback chain is the safe default this tool automates.
Can I batch-map a whole palette?
The sRGB Gamut Checker verdicts lists and shows each nearest fit – effectively batch mapping with this tool's math. Use this page when you want the full detail (clip comparison, CSS chain) for individual colors.
