# 色域详解：sRGB、Display P3 与超出色域的颜色

色域是屏幕或色彩空间能显示的颜色范围。Web 最初建立在 sRGB 之上，但如今大多数手机和不少笔记本都支持 Display P3，它的红色、绿色和橙色明显更鲜艳。

来源: https://pickshade.com/zh/gamut
更新于: 2026-09-28

## 什么是色域

每块屏幕都是用红、绿、蓝三种光混合出颜色的。它能发出的最纯的红、绿、蓝构成一个三角形的三个顶点，三角形内的所有颜色都在它的色域内。三角形外的颜色，这块屏幕根本显示不出来。

## 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 | #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/convert/hex-to-p3)
- [带色域警告的 OKLCH 取色器](https://pickshade.com/zh)
- [OKLCH 详解](https://pickshade.com/zh/oklch)

## 相关指南

- [OKLCH 详解：终于和人眼感知一致的颜色格式](https://pickshade.com/zh/oklch)
- [CSS color-mix() 与相对颜色语法：浅色变体、悬停色和透明度](https://pickshade.com/zh/css-color-mix)
- [颜色格式详解：HEX、RGB、HSL、OKLCH 等](https://pickshade.com/zh/color-formats)