# 色域完整解說：sRGB、Display P3 與超出色域的顏色

色域是螢幕或色彩空間能呈現的顏色範圍。網頁一開始建立在 sRGB 上，但現在多數手機和不少筆電都能顯示 Display P3，紅、綠、橘色明顯更鮮豔。

來源: https://pickshade.com/zh-tw/gamut
更新於: 2026-09-28

## 色域是什麼

每個螢幕都是用紅、綠、藍三種光混出顏色。它能發出的最純的紅、綠、藍，構成一個三角形的三個頂點，三角形內的所有顏色就是它的色域。超出這個範圍的顏色，這個螢幕根本顯示不出來。

## 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 | #ff5733 |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Rec. 2020 | color(rec2020 0.81266 0.37868 0.19735) |

## 超出色域的顏色會怎樣

如果 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 ...)。

## 工具

- [HEX 轉 Display P3 轉換器](https://pickshade.com/zh-tw/convert/hex-to-p3)
- [附色域警告的 OKLCH 取色器](https://pickshade.com/zh-tw)
- [OKLCH 完整解說](https://pickshade.com/zh-tw/oklch)

## 相關指南

- [OKLCH 完整解說：終於和人眼感受一致的顏色格式](https://pickshade.com/zh-tw/oklch)
- [CSS color-mix() 與相對色彩語法：淺色、hover 與透明度](https://pickshade.com/zh-tw/css-color-mix)
- [顏色格式完整解說：HEX、RGB、HSL、OKLCH 等格式](https://pickshade.com/zh-tw/color-formats)