sRGB vs Display-P3: What Designers Need to Know

A familiar handoff mystery: a designer picks a vivid red in a design tool on a recent MacBook, the developer implements the hex value faithfully, and on the very same laptop the shipped button looks slightly duller than the mockup sitting next to it. Nobody mistyped anything. The design tool was showing a Display-P3 red; the hex code could only carry sRGB.

The explanation is the gamut — the set of colors a display or color space can reproduce. sRGB is the web’s decades-old baseline; Display-P3 is a wider gamut, roughly 25% larger, whose extra colors are concentrated in saturated midtones — vivid reds, greens, oranges, teals. Hex values can’t express them; newer CSS syntax can. This article covers where the difference actually shows, what it means for CSS, and when it’s worth the effort — part of our OKLCH guide, because wide gamut is half the reason modern color models matter.

Where do P3’s extra colors actually live?

Not spread evenly. Near white, near black, and near gray, the two gamuts are practically identical — a light pastel or a dark navy gains nothing from P3. The gap opens in the colorful middle: the most saturated red, green, or teal that P3 can show sits visibly beyond sRGB’s ceiling. In OKLCH terms, the lightness axis doesn’t move; what P3 raises is the chroma ceiling, and it raises it most in the midtones where the ceiling was already highest.

That geography explains both the promise and the anticlimax of wide gamut: brand accents, illustration, and imagery can genuinely pop harder — while body text, borders, backgrounds, and everything else that makes up most of an interface looks exactly the same.

Do users actually have P3 screens?

Mostly yes, by now. iPhones have shipped P3 displays since 2016, Macs nearly as long, and flagship Android devices and better external monitors followed; a large share of today’s traffic — especially mobile — views your work through a P3-capable panel. The capability question has quietly flipped: the common case is a screen that can show more than sRGB, being sent sRGB.

The audience that can’t see P3 still matters, which is why the practical posture is enhancement: design so the sRGB rendering stands on its own, and let P3 screens get the extra vividness on top.

Why can’t hex carry these colors?

A hex value is three 8-bit numbers defined against sRGB — #ff0000 means “sRGB’s maximum red,” not “the reddest red.” There is no code point past the gamut edge. Reaching P3 requires syntax that names a color space explicitly:

.accent {
  color: #e0263f;                             /* sRGB fallback           */
  color: color(display-p3 0.9 0.12 0.22);     /* wider red where shown   */
}

color(display-p3 …) addresses the P3 gamut directly, and wide-gamut-capable spaces like OKLCH can express these colors as a matter of course — the same three L/C/H values simply extend to higher chroma. WebKit’s write-up on wide-gamut color walks through the CSS mechanics in detail. For styling, the cascade pattern above is usually enough: sRGB first, P3 second, each screen takes the best it can render.

What does the difference look like on a real ramp?

Open a saturated red ramp generated against the sRGB ceiling — notice how the midtone steps sit right at the gamut edge, where the generator caps chroma just below the boundary to keep the progression smooth.

A saturated red color ramp generated within the sRGB gamut, its midtone steps close to the gamut ceiling

Keep that image in mind for the comparison at the end of the article: same seed, same lightness curve — only the ceiling moves.

When is P3 worth the effort?

Worth it:

Brand accents and CTAs — the one place a UI spends real chroma; the P3 version of a vivid brand color is the one the design tool showed.
Illustration and imagery — photos and artwork tagged with wide-gamut profiles carry visibly more punch.
Data visualization — extra chroma headroom means more distinguishable saturated series colors.

Not worth it:

Text and UI chrome — contrast requirements bind long before gamut does, and the sRGB version must pass on its own regardless.
Neutrals and backgrounds — the gamuts barely differ there.
Anything you can’t verify — if the team reviews on sRGB monitors, the P3 layer ships unseen; add it where someone will actually check it.

See the ceiling lift

The cleanest way to understand the two gamuts is to watch one become the other: flip the same red ramp into P3. The midtone steps gain chroma — the numbers say so and the swatches show it — while lightness and hue hold perfectly still, and the near-white and near-black ends barely move. That, in one interaction, is the entire sRGB-vs-P3 story: not different colors, the same colors with a higher ceiling exactly where color lives.