Gamut Mapper
Paste any color and see whether it fits in sRGB, Display P3, or Rec2020. Get CSS color-mix() fallback suggestions.
Why Gamut Matters More Now Than Ever
For most of the web era, every screen displayed roughly the same range of colors, called sRGB, and designers never had to think about gamut at all. That changed when Apple shipped wide-gamut displays on iPhone in 2016 and Mac in 2017. Today, a majority of premium phones, tablets, and laptops can display the wider Display P3 range, while broadcast and reference displays are starting to ship Rec2020 coverage. A brand color that looks correct on a P3 screen may render as a slightly different shade on an sRGB monitor because the browser has to clip it back into the narrower gamut. The reverse is also true: a color picked on an sRGB monitor may have unused headroom that wider screens could fill if you authored the CSS to take advantage. Gamut Mapper exists to make these decisions explicit instead of accidental, so you ship colors that you actually picked rather than ones the browser silently corrected.
How the Gamut Check Works
Paste a color in any CSS notation: HEX, RGB, HSL, OKLCH, OKLab, LCH, LAB, HWB, or Display P3. The tool checks the color against three reference gamuts. sRGB is the historical baseline supported by every screen ever made. Display P3 is the wider gamut supported by almost every Apple device since 2017 and most flagship Android phones. Rec2020 is the largest of the three, used in HDR content production and reference displays, with limited consumer support today. Each gamut shows a green check if the color fits and a red flag with the clipping delta if it does not. The clipping delta tells you how far the color falls outside the gamut in OKLCH chroma units; a value below 0.02 will be visually imperceptible after browser clipping, while a value above 0.1 will produce a clearly different shade.
Fallback Suggestions Using color-mix
When a color falls outside sRGB, the tool generates two suggested fallbacks. The first is a straight chroma-reduced sRGB-safe version, useful if you want consistency across all displays. The second is a CSS color-mix() recipe that interpolates between two in-gamut colors to approximate the original, useful when the original color is a brand value you do not want to weaken. The recipe is copyable as a one-line CSS declaration and works in every browser that ships OKLCH support, which covers 95 percent of users in 2026. Pair the modern declaration with a HEX fallback for the remaining audience and the result degrades gracefully without hand-coding two separate color tokens. For brand work where exact color fidelity is non-negotiable, the right move is to pick sRGB-safe colors from the start: drag any input through the gamut mapper, note the sRGB clipping delta, and adjust the source value until the delta reaches zero. For brand work where vividness on capable displays is more important than cross-screen identical rendering, accept the Display P3 warning and ship the wide-gamut value with the chroma-reduced fallback paired through @supports.
Frequently Asked Questions
What does it mean when a color is out of gamut?+
A color is out of gamut when it describes a saturation or brightness that a particular display cannot physically reproduce. The browser handles this by clipping the color back into the gamut the display supports, which usually means reducing the saturation slightly. The result is a real color rendered on screen, just not the exact one you wrote. Wide-gamut authoring lets you take advantage of capable displays while accepting graceful fallback on older ones.
How big is the difference between sRGB and Display P3?+
Display P3 covers roughly 25 percent more colors than sRGB, with the gain concentrated in saturated reds, greens, and oranges. Pastels, grays, and most muted brand colors fit in both gamuts. The biggest visual differences appear in saturated reds: a fire-engine red in Display P3 is noticeably more vivid than the closest sRGB equivalent on a wide-gamut screen.
Does Rec2020 matter for web design today?+
Not yet for most projects. Rec2020 is the gamut used by HDR video production and high-end reference monitors, but consumer support outside of HDR video content is still rare. For 2026 web design the practical decision is sRGB versus Display P3; Rec2020 is informational and useful mainly when you are authoring HDR images or video for the browser.
What is color-mix() and how do the fallbacks work?+
CSS color-mix() interpolates between two colors in any color space you specify, returning a new color value. The tool uses it to mix a brand color with a less-saturated companion in OKLCH space, which gives a perceptually smooth transition. The result is in-gamut everywhere and reads as a slightly muted version of the original brand color rather than a clipped one. Browser support matches OKLCH support.
Should I always pick sRGB-safe colors?+
Not necessarily. If your audience is mostly on phones and recent laptops, picking colors in the wider Display P3 gamut means more vivid hero sections and brand accents on those screens. The visual quality difference is real. The trade-off is that sRGB-only displays will show clipped versions, so for elements that need to be pixel-identical across every screen (logos, brand legal compliance), stay in sRGB.
Why does the clipping delta use OKLCH chroma units?+
OKLCH chroma is perceptually uniform, so a delta of 0.02 looks like roughly the same amount of clipping regardless of the hue. RGB-based deltas mislead because the same numerical change looks dramatic on yellow and subtle on blue. Using OKLCH means a 0.02 delta is consistently described as imperceptible and a 0.1 delta as clearly visible.
Can I check a whole palette at once?+
This tool checks one color at a time, which is the right scope for most workflows: you usually need detailed gamut diagnostics on a specific brand color or accent. For batch checks across a full palette, the Palette Contrast Matrix tool covers the contrast question, and the Color Space Converter handles bulk format conversion.
Is the gamut math standard or an approximation?+
Standard. The tool uses the exact gamut boundary definitions from the CSS Color Level 4 specification, implemented through the culori library at version 4.0.2 under the MIT license. The math matches what the browser itself uses to decide whether to clip, so what the tool reports as in-gamut is what the browser will render without clipping.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service