色域完整解說：sRGB、Display P3 與超出色域的顏色
色域是螢幕或色彩空間能呈現的顏色範圍。網頁一開始建立在 sRGB 上，但現在多數手機和不少筆電都能顯示 Display P3，紅、綠、橘色明顯更鮮豔。
閱讀時間約 1 分鐘
色域是什麼
每個螢幕都是用紅、綠、藍三種光混出顏色。它能發出的最純的紅、綠、藍，構成一個三角形的三個頂點，三角形內的所有顏色就是它的色域。超出這個範圍的顏色，這個螢幕根本顯示不出來。
sRGB、Display P3 與 Rec. 2020
sRGB 是網頁的預設色彩空間，也是 2016 年以前多數螢幕的標準。HEX、rgb() 和 hsl() 描述的都是 sRGB 顏色。
Display P3 比 sRGB 多出約四分之一的顏色，主要是鮮豔的綠、紅和橘色。iPhone、iPad、Mac，以及許多 Android 手機和高階筆電都採用它。在 CSS 中可以寫成 color(display-p3 r g b)，或寫成高彩度的 OKLCH 值。
Rec. 2020 的範圍更大，用於 HDR 影片，能完整涵蓋它的螢幕非常少。
| 格式 | 值 |
|---|---|
| HEX | |
| Display P3 | |
| OKLCH | |
| Rec. 2020 |
超出色域的顏色會怎樣
如果 CSS 顏色超出螢幕的色域，瀏覽器只能改顯示別的顏色。最簡單的裁切是把每個通道截到上限，可能讓色相跑掉。CSS Color 4 建議改在 OKLCH 中做色域映射：保留亮度和色相，降低彩度，直到顏色落進色域為止。
PickShade 會標示所有超出 sRGB 的顏色，並顯示映射後的備援色，讓你清楚知道使用舊螢幕的人實際會看到什麼。
在 CSS 中安全使用 P3 顏色
先寫 sRGB 備援值，再寫廣色域的值；或是把鮮豔的值包在 color-gamut 媒體查詢裡。
CSS
.button {
background: #ff5733;
background: oklch(68% 0.24 33.7);
}
@media (color-gamut: p3) {
.hero {
color: color(display-p3 1 0.3 0.15);
}
}常見問題
怎麼知道一個顏色是否在 sRGB 範圍內？
把它貼進 PickShade。只要超出 sRGB，就會出現色域警告，並附上最接近且落在色域內的顏色。
P3 顏色在 Windows 上有效嗎？
有效，前提是螢幕涵蓋 P3，且瀏覽器能讀到顯示器的色彩描述檔。在 sRGB 螢幕上，瀏覽器會把顏色映射到 sRGB，不會出問題。
HEX 只能表示 sRGB 嗎？
是的。HEX、rgb()、hsl() 和 hwb() 描述的都是 sRGB 顏色。廣色域的顏色請用 oklch() 或 color(display-p3 ...)。