Color reality check
One color, two shipping truths.
A wide-gamut source is what you authored. An sRGB fallback is what a narrower display can render. Keep both values visible so conversion never disguises gamut loss.
Display-P3 · preserved source
color(display-p3 1 0.4235 0.3608)OKLCH 62.32% · 0.179 · 28.59°
sRGB · mapped fallback
#ed6356OKLCH 62.32% · 0.131 · 29.01°
Conversion constellation
One selected source, many labeled representations
HEX · sRGB
#ed6356RGB · sRGB
rgb(237 99 86)HSL · sRGB
hsl(5.2 79.8% 63.3%)Lab · D50
lab(62.3% 57.8 40.2)LCH · D50
lch(62.3% 70.4 34.8)OKLab
oklab(62.32% .157 .087)Display-P3
color(display-p3 1 .4235 .3608)Gamut atlas
Mapping is a path, not a clamp label.
CSS gamut mapping aims to keep lightness and hue stable while reducing chroma into the destination gamut. The source remains available; the fallback is a separate shipping value.
Gamut mapping path
- 1P3 source
Outside sRGB
- 2Hue + lightness lock
Appearance anchors
- 3Chroma reduction
Move toward the boundary
- 4Mapped sRGB
Target-display fallback
Alpha-aware contrast bench
Contrast belongs to the composited pixels.
Background
#111210
Foreground
P3 coral / 85%
Composite
#cb574d
WCAG 2.x
4.62 : 1
A translucent foreground must be blended over the actual background before relative luminance and contrast are compared. Recheck every state and surface.
Use it right, everywhere
Keep fallback and source tokens together
Progressive CSS
.chip {
background: #ed6356;
background: color(display-p3 1 .4235 .3608);
}Feature detection
@supports (color: color(display-p3 1 0 0)) {
.chip { background: var(--brand-p3); }
}Tailwind v4 tokens
@theme {
--color-brand-srgb: #ed6356;
--color-brand-p3: color(display-p3 1 .4235 .3608);
}