Wide Gamut and HDR Color for Designers: P3, OKLCH, and When It Actually Matters

HDR displays and wide-gamut color spaces are now standard on the devices your users have — but most design workflows still produce only sRGB output. This guide explains when the gap between sRGB and wide gamut is visible and consequential, how to progressively enhance your color palette for P3 displays, and what tools in CSS and Figma make wide-gamut color practical today.

Color ManagementHDRAdvanced Color

Key points

Wide gamut matters most for highly saturated colors — reds, oranges, and vivid greens above 85% HSL saturation. Muted, pastel, and neutral palettes are almost entirely within sRGB and require no wide-gamut treatment.

Use CSS Color Level 4 syntax for progressive enhancement: specify sRGB hex as a fallback, then add `color(display-p3 r g b)` values inside `@supports` for capable displays. Browsers handle the fallback automatically.

OKLCH is the most practical color space for wide-gamut work because it is perceptually uniform across gamuts — a change in OKLCH chroma produces the same perceived saturation increase regardless of hue, making it reliable for building wide-gamut palettes.

Which colors benefit from P3 specification

The Display P3 color space contains approximately 25% more colors than sRGB, with the extra gamut concentrated in highly saturated reds, oranges, greens, and cyans. Colors within the sRGB gamut look identical in both color spaces — P3 is a superset, not a replacement. The practical threshold: colors with HSL saturation below 70% are almost certainly within sRGB and require no P3 specification. Colors with saturation above 85% in warm hues (reds, oranges) or cool hues (vivid greens, cyans) are most likely to benefit. The visible effect on capable displays: a P3-specified vivid orange appears more chromatic and luminous than its sRGB equivalent; the sRGB version appears slightly dull or clipped by comparison. The test: view your brand color on a Display P3-capable Mac or iPhone. If it looks significantly less vivid than intended, the color is being clipped to the sRGB boundary. Specify it in P3 to recover the intended saturation.

CSS Color Level 4 in practice

CSS Color Level 4 is supported in all modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+). The syntax for P3 color: `color(display-p3 0.9 0.3 0.1)` where the three values are P3 red, green, and blue channels in the 0-1 range. The recommended progressive enhancement pattern: define your color as a CSS custom property with an sRGB fallback and a P3 override. In CSS: `--brand-color: #E84A2F; @supports (color: color(display-p3 1 0 0)) { --brand-color: color(display-p3 0.91 0.29 0.18); }`. The P3 value is typically derived by converting your sRGB color to the P3 color space using a tool like oklch.com or the Chrome DevTools color picker, then slightly increasing the chroma to reach the intended vivid target (since the sRGB value is by definition the gamut boundary — the most saturated version of that color that sRGB can represent — the P3 version should go slightly beyond it). OKLCH chroma is the most intuitive way to increase saturation in a gamut-aware way: increase the C value while keeping L and H constant.

Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.

Browse packs More guides

Related guides

Data Visualization

Color in Data Visualization: Sequential, Categorical, and Diverging Palettes Explained

Data visualization color follows a different set of rules from brand or UI color — the palette must encode information accurately, survive colorblindness, and remain legible at small scales and in print. This guide covers the three palette types every data designer needs, how to build each, and the most common mistakes that make charts misleading.

Motion Design

Color in Motion: Designing Transitions, Hover States, and Loading Colors That Work

Motion changes how color is perceived. This guide covers the perceptual phenomena unique to animated color — chromatic flicker, saturation amplification through transition, and why OKLCH is the correct interpolation space for color animation. Practical rules for hover states, skeleton screens, and brand reveal animations.

Tailwind Guide

Tailwind Color Tokens Without Losing the Design System in Handoff

A guide to structuring Tailwind color tokens so the system stays aligned with CSS variables, JSON exports, and design files instead of fragmenting during implementation.