Wide gamut: what Display P3 changes for web design

Every phone Apple has sold since 2016, most recent laptops, and a growing share of monitors can display Display P3 — a color space roughly 25% larger than sRGB, with noticeably more reach in reds and greens.

For thirty years the web has assumed sRGB. That assumption is now wrong on most of the devices your site is viewed on.

What you gain#

Not much in blues. A good amount in greens. The most in reds and oranges — P3's red primary is substantially more saturated than sRGB's, which is why "P3 red" looks slightly artificial the first time you see it next to #ff0000.

Concretely: if your brand color is a vivid orange or a saturated red, sRGB has been clipping it and you have been shipping a slightly duller version than the brand book specifies. On a P3 display you can now show the real thing.

How to use it#

Two syntaxes, both widely supported:

/* Explicit color space */
color: color(display-p3 1 0.2 0.1);

/* OKLCH, which is not gamut-bound at all */
color: oklch(63% 0.28 29);

OKLCH is the better choice, because it describes the color rather than the encoding. Ask for a chroma sRGB cannot reach and a P3 display will show it, while an sRGB display clamps to its own boundary. One declaration, correct on both.

The fallback question#

You need one, and the mechanism is @supports:

.brand {
  background: #ff3b30;                       /* sRGB fallback */
}

@supports (color: color(display-p3 1 1 1)) {
  .brand {
    background: color(display-p3 1 0.23 0.19);
  }
}

The plain declaration first, the wide one inside the feature query. Browsers without support never see the second.

Where it goes wrong#

Mismatched pairs. If your button fill is P3 and its hover state is sRGB, the transition between them jumps. Keep both states in the same space.

Screenshots. A P3 screenshot pasted into a design tool that assumes sRGB will look wrong. This causes a surprising amount of confusion in design review.

Contrast maths. WCAG contrast is defined on sRGB relative luminance. A P3 color has to be converted before the ratio means anything, and converting it clamps it — so the number you compute is for the sRGB version, not the one on screen. In practice the difference is small and always in the safe direction, but be aware the number is approximate.

Gradients. A gradient between an sRGB color and a P3 color interpolates in whichever space the browser picks. Specify it.

Should you bother#

For most product interfaces: no, or not yet. The gain is confined to saturated colors, and product UI is mostly neutrals with one accent. Adding a second color path for a marginally more vivid button is not a good trade.

For brand and marketing work: yes, if your palette has anything saturated in it. The difference on a hero section is visible, and "the brand red finally looks like the brand red" is a real result.

For images and video: it is already happening whether you engaged with it or not. Tag your assets with the right profile and let the browser handle it.