We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesNotesGuidesFree ResourcesConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
Color Management
Search intent: wide gamut color design P3 HDR display designer guide

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.

Featured collection
Candy Pop

Coral, lemon, mint, lavender, and sky — saturated accents for social, D2C, and campaign work.

Open collectionAll collections
Open next
OKLCH guideComplete ArchiveColor guides
Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.

Upgrade to ProMore guides
Related guides
Pastel Branding Guide
Pastel Color Palette for Branding That Feels Modern, Not Childish
How to use pastel colors in brand work without drifting into baby-shower territory — including how to anchor soft hues with structure, contrast, and intentional pairings.
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.
Environmental Design
Color in Wayfinding Systems: Building Legible, Accessible Environmental Color Codes
Wayfinding color — used in transit maps, hospital signage, campus directories, and navigation apps — operates under functional constraints that override aesthetic preference. The palette must work at distance, under variable lighting, for people with color vision deficiencies, and under the cognitive load of navigation. This guide covers how to build a wayfinding color system that actually works.