On this page
The triangle every screen lives inside
Mix three fixed primary lights and you can produce many colors — but not all of them. Plot every color humans can perceive on a chromaticity diagram (the familiar horseshoe-shaped map from color science) and any three primaries define a triangle inside it: the display can reproduce everything inside its triangle and physically nothing outside it. That triangle is the display's gamut.
This follows directly from how RGB works: a screen's "reddest possible red" is whatever its red subpixel emits. Colors more saturated than the primaries themselves — the deeply pure spectral greens and violets along the horseshoe's edge — sit outside every practical triangle. No consumer display shows them, and no amount of software can change that; it's physics, not a driver update.
sRGB: the web's default triangle
sRGB, standardized in the late 1990s, is the gamut the web assumes. Every plain hex code and rgb() value is an sRGB coordinate, and when this site's converter shows you conversions, they're conversions within sRGB. Its triangle is modest — deliberately so, matched to the CRT monitors of its era — which is precisely why it became the universal baseline: essentially every screen made this century can display all of it. "Safe" and "small" were the same choice.
Display P3: the mainstream wide gamut
Display P3, derived from the DCI-P3 standard used in digital cinema, is the wide gamut that actually shipped at scale — iPhones and Macs since the mid-2010s, and most flagship phones, tablets, and better monitors since. Its triangle covers roughly a quarter more area than sRGB, with the biggest gains in saturated greens, oranges, and reds. P3's pure red is visibly more intense than sRGB's; laid side by side the difference is obvious in a way words undersell.
Beyond P3 sits Rec. 2020, the ultra-wide gamut from the HDR television world. It's a common container format in video, but very few displays come close to covering it — treat it as a signal format, not something to design against.
Two honesty notes. First, a wider gamut adds more saturated colors at the edges; it doesn't change the colors inside the sRGB triangle, which is where the overwhelming majority of real design work lives. Second, whether your users see P3 depends on their hardware — a wide-gamut color on an sRGB screen gets squeezed back into the smaller triangle.
Using wide color in CSS, safely
Modern CSS expresses P3 directly:
color(display-p3 1 0 0) — channels as 0–1 fractions in the P3 space. On a P3 display this is a red that no hex code can reach; on an sRGB display the browser gamut-maps it to the nearest reproducible color, which lands at or near plain #ff0000. OKLCH values can also reach outside sRGB, with the same mapping behavior.
The progressive-enhancement pattern is boring and correct:
- Author your baseline in sRGB — it's what you can test everywhere and what screenshots, emails, and most users' screens will show.
- Layer wide color as an upgrade where saturation genuinely matters (brand moments, imagery-adjacent accents), either by simply using
color(display-p3 …)and trusting gamut mapping, or explicitly with the@media (color-gamut: p3)media query and the@supports (color: color(display-p3 0 0 0))feature check. - Never encode meaning in the difference between an sRGB color and its P3 cousin — a large fraction of your audience can't see the difference, by hardware.
The other direction: gamuts smaller than yours
Gamut limits also run downhill. Print's reachable color set — the reason screen colors don't match printed ones — is differently shaped and smaller in the vivid regions, so a design that leans on electric sRGB blues loses exactly what made it electric on paper. And projectors, e-ink, and cheap panels each subtract in their own way. The professional habit isn't memorizing triangles; it's remembering that your screen is not the truth, checking critical colors on representative devices, and keeping meaning attached to things that survive every gamut: lightness differences, labels, and contrast.
What to do with all this
For most projects: nothing, deliberately. sRGB remains the right default, and a design that only works in wide gamut is a design that fails for most of the world. Where wide color earns its complexity is brand-critical saturation on known-good hardware — and even then, as an enhancement with an sRGB floor. The gamut conversation is the rare corner of color where the best practice really is "know exactly what you're missing, then mostly decline it."