先確認顏色在目標裝置上如何呈現
同一個顏色，需要保留兩份交付事實。
廣色域來源值代表設計時指定的顏色；映射後的 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 彩度，讓顏色進入目標色域。工具會保留來源座標，另列映射後的 sRGB 相容色碼；極端明度與實際顯示結果仍受演算法、瀏覽器與裝置影響。
Gamut mapping path
- 1P3 來源色
位於 sRGB 色域之外
- 2明度與色相
作為外觀錨點
- 3降低彩度
逐步靠近色域邊界
- 4映射至 sRGB
提供窄色域環境的相容色碼
納入 Alpha 的對比檢查
對比屬於最後合成出的像素。
背景
#111210
前景
P3 珊瑚色 / 85%
合成結果
#cb574d
WCAG 2.x
4.62 : 1
帶透明度的前景色會先映射至 sRGB，再與指定的不透明背景做線性光 Alpha 合成，最後計算 WCAG 2.x 文字對比。漸層、圖片背景、互動狀態與非文字元件仍需分別檢查。
在不同環境正確交付
把 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);
}