The P3 color space — used in Apple's Display P3 standard (Mac, iPhone, iPad) — encompasses approximately 25% more colors than sRGB. The colors that exist in P3 but not sRGB are concentrated in highly saturated greens, reds, and oranges — the chromatic extremes. For most color work (neutrals, pastels, muted palettes), sRGB and P3 produce identical results because the colors fall within both gamuts. The difference appears only in highly saturated values. The practical test: if your brand color or accent color is a highly saturated red, orange, or green, it may appear clipped and duller on wide-gamut displays when specified in sRGB, because the display is rendering a richer version of that hue in P3. Check the current CSS Color Level 4 specification for `color(display-p3 ...)` syntax for specifying P3 colors in CSS.
Tone mapping is the process by which HDR content is rendered on SDR (standard dynamic range) displays, and it creates unexpected color shifts. If you design assets intended for HDR display (product photography with HDR-grade rendering, video thumbnails, high-end editorial imagery), those assets will be tone-mapped when viewed on SDR screens — and the tone mapping process shifts colors, particularly in highlights and saturated areas, in ways that are difficult to predict without testing. The design implication: always test HDR assets on SDR displays as part of your review process, and do not make final color judgments from HDR-only viewing environments. The most common failure mode: highlights that look detailed and rich in HDR appear blown out and flat on SDR.
CSS has a growing toolkit for wide-gamut color: `color(display-p3 r g b)` for P3 colors, `oklch()` for perceptual uniformity across gamuts, and `color-mix()` for mixing colors in a specified color space. Browser support for these is now mainstream (Chrome 111+, Safari 15+, Firefox 113+). The progressive enhancement strategy: specify your core brand colors in sRGB hex for broad compatibility; add `@supports (color: color(display-p3 1 0 0))` declarations with P3-enhanced versions for capable displays. The P3 version of a brand color is typically a slightly more saturated version — the sRGB value maps to the edge of the P3 gamut, while the P3 value targets the actual intended saturation. For most design work, the difference is subtle; for hero imagery and high-saturation brand colors, it is visible.
