色域详解：sRGB、Display P3 与超出色域的颜色
色域是屏幕或色彩空间能显示的颜色范围。Web 最初建立在 sRGB 之上，但如今大多数手机和不少笔记本都支持 Display P3，它的红色、绿色和橙色明显更鲜艳。
阅读约 1 分钟
什么是色域
每块屏幕都是用红、绿、蓝三种光混合出颜色的。它能发出的最纯的红、绿、蓝构成一个三角形的三个顶点，三角形内的所有颜色都在它的色域内。三角形外的颜色，这块屏幕根本显示不出来。
sRGB、Display P3 和 Rec. 2020
sRGB 是 Web 的默认色彩空间，也是 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 ...)。