先确认颜色在目标设备上是否真实可显示
同一个颜色，需要保留两份发布事实。
广色域源值代表你真正设计的颜色，sRGB 回退值代表较窄色域屏幕能够显示的近似结果。两者应该同时可见，不能让一次格式转换掩盖色域损失。
Display P3 · 保留原始颜色
color(display-p3 1 0.4235 0.3608)OKLCH 62.32% · 0.179 · 28.59°
sRGB · 色域映射后的回退值
#ed6356OKLCH 62.32% · 0.131 · 29.01°
颜色表示一览
选定一个源颜色，查看带色彩空间标签的多种表示
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)OKLCH
62.32% 0.179 28.59°
色域映射路径
色域映射是寻找可显示近似色，不只是给通道贴上“已裁剪”标签。
CSS 色域映射会在 OKLCH 中尽量保持明度与色相，同时降低色度，让颜色进入目标色域。原始广色域坐标仍应保留，映射后的回退值则作为单独的发布结果。
Gamut mapping path
- 1P3 源颜色
位于 sRGB 色域之外
- 2锁定色相与明度
保留主要视觉特征
- 3降低色度
逐步靠近目标色域边界
- 4映射到 sRGB
提供给窄色域设备的回退值
考虑 Alpha 的对比度检查
对比度属于最终合成出来的像素。
背景
#111210
前景
P3 珊瑚色 / 85%
合成结果
#cb574d
WCAG 2.x
4.62 : 1
带透明度的前景色必须先与实际背景进行 Alpha 合成，再比较相对亮度并计算对比度。不同背景、交互状态和表面都需要重新检查。
把颜色正确交付到不同环境
将 sRGB 回退值与广色域源值放在一起
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);
}