Rec2020 在 Web 中基本不可用，浏览器会静默降级为 sRGB；当前唯一可靠广色域方案是 display-p3 + @media (color-gamut: p3)，覆盖约53.6%可视色域，显著提升红绿饱和度。
Rec2020 在当前 Web 实际环境中基本不可用，直接写 color(rec2020 ...) 会降级为 sRGB，且无视觉差异。 浏览器支持、系统色彩管理、显示硬件三者缺一不可，目前仅极少数 HDR 场景（如 macOS + Safari + DisplayHDR 1000 + Rec2020 视频容器）能链路贯通，纯 CSS 渲染不在此列。
为什么 color(rec2020) 几乎总被忽略或静默降级
浏览器解析 color(rec2020 0.7 0.9 0.2) 时，若系统未声明支持 Rec2020 输出上下文（例如非 HDR 全屏、未启用色彩配置文件、GPU 驱动未通告色域能力），Chrome/Firefox/Safari 均会回退到 sRGB 并丢弃原始坐标值——不是报错，而是“假装没看见”。你写的值不会触发警告，也不会渲染出更广的红/绿，只会按 sRGB 的最大边界映射过去。
常见错误现象：
- 开发者工具中颜色预览始终显示为 sRGB 十六进制值（如
#ff0000），即使源码写了color(rec2020 1 0 0) - 在支持 Display P3 的 MacBook Pro 上截图对比，
color(display-p3 ...)有可见提升，但color(rec2020 ...)与 sRGB 完全一致 - Windows 上 Edge 或 Chrome 无论开启与否 HDR 模式，
rec2020均无响应
@media (color-gamut: rec2020) 几乎永远不会匹配
这个媒体查询依赖操作系统向浏览器暴露的色域能力信号。截至 2026 年，没有主流桌面或移动操作系统将 Rec2020 列为“可用显示色域”——Display P3 是当前实际交付上限。macOS 和 iOS 将广色域设备报告为 display-p3；Windows 报告为 srgb 或空；Android 多数不支持该媒体查询。
立即学习“前端免费学习笔记（深入）”；
所以以下代码：
/* 这段样式永远不会生效 */
@media (color-gamut: rec2020) {
.hero { background-color: color(rec2020 0.3 1 0.1); }
}等价于写了一段注释。它不报错，也不执行，浏览器连尝试解析 color() 的机会都没有。
真正能用的广色域方案：聚焦 display-p3 + @media (color-gamut: p3)
如果你的目标是“在现代设备上呈现比 sRGB 更极致的绿色与红色”，display-p3 是唯一具备广泛软硬协同支持的路径。它覆盖人类可视色域约 53.6%，相比 sRGB（35.9%）提升显著，尤其在红-橙-绿区域。
实操建议：
- 用
@media (color-gamut: p3)替代rec2020查询（注意：规范中值是p3，不是display-p3） - 主色优先选
color(display-p3 ...)，而非rgb()—— 例如color(display-p3 0.9 0.2 0.1)能表达比rgb(255, 51, 26)更饱和的朱红 - 确保设计稿在 Display P3 色彩空间下校准，否则你在 Figma/Sketch 里选的“P3 红”可能已被自动转成 sRGB 值导出
- 避免混用：不要在一个元素上同时写
background: color(display-p3 ...); border-color: rgb(...);，border 会强制降级，破坏一致性
Rec2020 目前仍是视频编码、广播制作和专业调色领域的标准，不是 Web 渲染的可行目标。想让绿色更绿、红色更红，现在就用 display-p3，并接受它已是今天你能可靠落地的极限。
