Display P3

Display P3 is a wide-gamut RGB colour space introduced by Apple in 2015. It uses the same red and blue primaries as DCI-P3 (the cinema-projection standard from 2007) but Apple’s own white point and gamma. Compared to sRGB, P3 covers ~25% more colour volume — most of the extra is in saturated reds and greens.

Apple ships every Mac and iPhone display from 2017+ with P3-class panels. Other vendors have followed; most premium Android phones, mid-range and high-end monitors, and all OLED TVs reach P3 or beyond.

CSS Color Module Level 4 supports P3 via the color() function: color(display-p3 1 0.4 0.2). The same colour expressed in sRGB would clip — the bright saturated orange doesn’t exist in sRGB. Browsers that support both will render the P3 version on P3-capable displays and fall back gracefully on others.

Convertitive’s color converters currently work in sRGB only. P3 support is on the roadmap.

The DCI-P3, Display P3, and P3-D65 distinction that trips designers up: three different specifications carry “P3” in the name. DCI-P3 is the original SMPTE cinema standard with a green-shifted white point (around 6300 K) and a pure 2.6 power gamma — used by film projectors, not consumer displays. Display P3 is Apple’s adaptation with the consumer-standard D65 white point (6504 K) and the sRGB piecewise gamma curve. P3-D65 is the same as Display P3 by another name. CSS’s color(display-p3 …) means Display P3 specifically; assets exported from cinema pipelines as DCI-P3 will look slightly green if treated as Display P3 without conversion.

Detecting P3 support in code, properly: use the CSS media query @media (color-gamut: p3) to gate wide-gamut styles, paired with @supports (color: color(display-p3 0 0 0)) for the property. Browsers without wide-gamut rendering or running on sRGB displays will fall back to the sRGB declaration provided alongside. Avoid the common mistake of only declaring P3 colours — sRGB-only browsers will ignore the rule and your CSS reverts to inherited defaults. Convertitive’s colour methodology covers the dual-declaration pattern. Related: sRGB, gamut, chromaticity. Reference: ICC — Display P3 characterisation.

Worked example: a brand red beyond sRGB

A brand wants the most saturated red their iPhone customers can render. In sRGB the maximum-red is rgb(255, 0, 0) with CIE-1931 chromaticity coordinates roughly (0.640, 0.330). The equivalent Display P3 primary sits at (0.680, 0.320) — outside the sRGB triangle entirely. Declared as color(display-p3 1 0 0), the colour is roughly 25% more saturated to the eye on a wide-gamut panel. On an sRGB-only display the CSS dual-declaration background: red; background: color(display-p3 1 0 0); gracefully falls back. Photographing the two side-by-side on a P3 phone, the difference is visible at arm’s length — particularly on Coca-Cola red, Ferrari red, and other brand colours that historically were clipped on the web.

When P3 matters and when it doesn’t

For brand identity, marketing imagery, and photography portfolios, P3 is a meaningful upgrade — saturated reds, greens, and skin tones gain visible depth. For most UI work (text, neutrals, muted accents), the difference is imperceptible because the colours never approach the sRGB gamut boundary anyway. For print workflows, P3 is largely irrelevant; printer gamuts are smaller than sRGB in saturated regions and conversion happens through CMYK profiles regardless. The W3C CSS Color 4 spec is the authoritative source for the syntax and rendering rules: CSS Color Module Level 4 — Display P3.