Lumea
Sign in

Color Gamuts

sRGB, Display P3, and Rec.2020 — what your screen can actually show.

A gamut is the set of colors a device or color space can actually reproduce. Human vision covers a large, horseshoe-shaped territory; every display carves out a triangle inside it. Knowing which triangle you are designing for - and what happens to colors that fall outside - is what keeps palettes consistent across screens.

What is a gamut?#

A display mixes three primaries, so the chromaticities it can show are bounded by the triangle those primaries form on the CIE chromaticity diagram. Anything outside the triangle simply cannot be emitted by that panel, no matter what values you send it.

D65 white520 nm700 nm380 nmRec.2020Display P3sRGB
The CIE 1931 chromaticity horseshoe (all visible chromaticities) with the sRGB, Display P3 and Rec.2020 triangles. Lumea's CIE Chromaticity card draws your palette on this same map.

Note how much of the horseshoe - especially saturated greens and cyans - lies outside even the largest triangle. Spectral colors along the curved edge are purer than any three-primary display can reproduce.

The gamuts that matter#

GamutCoverage*Where you meet it
sRGB~35%The web's default since 1996; budget monitors; the safe baseline every design must survive.
Display P3~45% (≈25% more than sRGB)Apple devices since ~2016, most flagship phones and laptops. Noticeably richer reds and greens.
Adobe RGB~52%Photography and print workflows; extends into cyan-green.
Rec.2020~75%UHD/HDR television standard. No consumer panel fully covers it yet - it's the future-proof target.

*Approximate share of visible chromaticities (CIE 1931 xy area) - useful for intuition, not a precise perceptual measure.

When a color doesn't fit#

Ask for oklch(0.8 0.29 145) - a brilliant green - on an sRGB screen and something has to give. There are two families of strategies:

  • Clipping - snap each RGB channel into range. Fast, but it shifts hue and flattens detail: several different out-of-gamut colors can clip to the same displayed color.
  • Gamut mapping - walk the color back toward the gamut along a perceptually sensible path. CSS Color 4 specifies reducing OKLCH chroma while holding lightness and hue, until the color fits. You lose vibrancy but keep identity.

Lumea's Gamut Coverage card flags every palette color that exceeds a target gamut and previews the chroma-reduced replacement, so the fallback is a decision rather than an accident.

Designing across gamuts#

The robust workflow is progressive enhancement: design within sRGB so the baseline is solid everywhere, then let wide-gamut displays earn richer accents:

progressive-enhancement.css
:root {
  /* Safe everywhere */
  --brand: oklch(0.65 0.19 250);
}

/* Only displays that can show it get the more vivid version */
@media (color-gamut: p3) {
  :root {
    --brand: oklch(0.65 0.24 250);
  }
}
  • Keep text and UI chromecomfortably inside sRGB - readability shouldn't depend on the viewer's hardware.
  • Spend the extra P3 chroma on imagery, charts, and accents, where vibrancy is a bonus rather than a requirement.
  • Test the sRGB fallback deliberately: if the design only works in P3, it doesn't work.

Further reading#