Check whether colors fit inside the sRGB gamut — the baseline every display can show. Paste lab(), lch() or oklch() values alongside ordinary colors and each is verdicted IN or OUT, with the nearest displayable fit shown for anything that exceeds the gamut.
Settings
Generated locally in your browser — your settings and results never leave this page.
The boundary every screen agrees on
sRGB is the web’s common denominator — the gamut a standard monitor reproduces and the space hex codes live in. Modern CSS spaces describe far more: lab(), lch() and oklch() coordinates address colors beyond any screen, and P3 displays render a superset that standard displays cannot. “Is this inside sRGB?” therefore decides whether a color renders as specified for everyone, or gets silently adjusted for most. This checker answers it wholesale: paste a list, read verdicts.
How out-of-gamut values enter codebases
Innocently, always: a designer on a P3 MacBook eyedrops a vivid teal; an equal-chroma OKLCH palette exceeds the ceiling at its blue hues; a print workflow contributes Lab values born outside RGB entirely; a generative script explores coordinates no one checked. The values are legal CSS and preview beautifully on wide-gamut hardware — the divergence surfaces later, on the standard displays most users own, as mysterious dullness QA cannot reproduce.
Verdicts with remedies attached
OUT verdicts arrive with the nearest displayable fit — computed the proper way (chroma reduced in OKLCH, lightness and hue held), not channel-clipped. That fit is simultaneously diagnosis and patch: adopt it as the sRGB fallback and keep the original for capable displays via the cascade pattern (color: fallback; color: original;). The Gamut Mapper renders the same computation for single colors with the full comparison view.
Wide gamut, managed rather than feared
The point is not to retreat from vivid color — P3 displays deserve their teal — but to make the standard-display experience a decision instead of an accident. Check the palette, ship fits as fallbacks, keep originals for hardware that honors them. Design tokens with both values are the emerging convention, and this checker is where the pair gets minted.
Gamuts beyond the pair
The gamut landscape has more than two entries: sRGB (the baseline this page verdicts), Display-P3 (~25% more volume, the common wide-gamut hardware target), Adobe RGB (photography’s wide standard), and Rec.2020 (video’s aspirational envelope, larger than current hardware honors). They nest imperfectly — P3 and Adobe RGB each exceed sRGB in different directions — which is why “wide gamut” without a name is underspecified. For web work the two that matter are the ones this checker speaks to: sRGB because everyone has it, P3 because growing hardware does; the fallback-chain pattern in the mapper handles both audiences from one token.
How to use the sRGB Gamut Checker
- Paste colors in any notation – including lab(), lch() and oklch() values that may exceed sRGB.
- Each gets an IN or OUT verdict, with the nearest displayable fit for OUT ones.
- Copy the report.
Frequently asked questions
What does "in the sRGB gamut" mean?
That the color can be exactly displayed on a standard monitor – its coordinates land inside the volume sRGB's three primaries can mix. Colors from wider spaces (Lab, OKLCH, Display-P3 photography) can specify chromaticities outside that volume: real colors, just not reproducible on baseline screens.
Why do my oklch() design tokens need gamut checking?
Because oklch() lets you write coordinates sRGB cannot show, and browsers will silently map them per their own method on non-P3 displays – meaning your token renders differently across machines. Checking (and pre-mapping) keeps what users see under your control.
What is the "nearest fit" shown for OUT colors?
The CSS-style gamut mapping result: lightness and hue held, chroma reduced until the color enters sRGB – the least-damaging legal version. It is what the Color Gamut Mapper computes per color, batched here for lists.
Can a color be inside sRGB but outside Display-P3?
No – sRGB nests entirely inside P3. The practical direction is the reverse: P3-capable design tools produce colors beyond sRGB, and this checker tells you which of them will not survive the average office monitor.
How do out-of-gamut colors even end up in my palette?
Three common routes: designing on a P3 MacBook and copying "vivid" picks; algorithmic palettes (equal-chroma OKLCH runs) exceeding hue-specific ceilings; and Lab/LCH values from print or measurement workflows. All benign, all worth catching before QA finds them.
Does the checker validate P3 membership too?
It verdicts against sRGB – the compatibility baseline – and notes the concept. For authoring wide-gamut CSS with proper fallbacks, the Gamut Mapper's CSS output (widest-first with hex fallback) is the companion move.
What happens if I just ignore gamut and ship the values?
Nothing crashes – browsers map or clip for you, each per its rules. You inherit inconsistency: duller-than-designed colors for most users, slightly different renderings across engines, and chart palettes losing their calibrated spacing. Checking costs a paste.
