Why Display-P3 Matters: sRGB vs P3 vs Rec. 2020
For decades, sRGB was the safe assumption for color on the web. It isn't the ceiling anymore — most recent phones, laptops, and monitors show a noticeably wider range. Here's the landscape and how to use it responsibly.
What a gamut is
A gamut is the range of colors a display can actually reproduce. sRGB is the long-standing baseline that virtually every screen covers. Display-P3 is roughly 25% larger and is now common on Apple and many high-end Android and PC displays. Rec. 2020 is wider still — the target for HDR — but very few screens cover much of it yet.
Why you'd reach for P3
The extra room is mostly in vivid greens, cyans, and reds that sRGB simply cannot show — they clip to a duller version. With CSS color(display-p3 …) or oklch() you can specify those colors and let browsers show the real thing on capable screens.
Falling back gracefully
Not every visitor has a P3 screen, so a wide-gamut color needs a sensible fallback. The right fallback reduces the color's chroma while keeping its lightness and hue — landing on the closest displayable color — rather than clipping the raw RGB channels, which skews the hue. Provide an sRGB value first and the wide-gamut value second so each display picks what it can show.
Knowing where a color sits
Whether a specific color needs P3 depends on its lightness and hue, not just its saturation. Seeing the sRGB, P3, and Rec. 2020 boundaries at a given lightness and hue makes it obvious how much chroma you can push before a color leaves each gamut.