color(rec2020)在CSS中基本无效，因Chrome、Firefox、Safari均未实现其解析，遇到该语法会静默丢弃整条声明，不报错、不降级、不触发fallback，且@supports检测恒返回false。
不能直接在浏览器中可靠渲染 Rec.2020 颜色——当前没有主流浏览器支持 color(rec2020 ...) 语法，它会被完全忽略或静默降级为 sRGB。
为什么 color(rec2020) 在 CSS 中基本无效
Rec.2020 是超高清电视和激光投影用的理论色域，覆盖 CIE 1931 图中接近人类视觉极限的三角形区域。但它的实现依赖于：硬件（真 Rec.2020 显示器极罕见）、系统色彩管理（macOS/iOS 不暴露 Rec.2020 渲染管线）、浏览器引擎（Blink/WebKit/Gecko 均未实现 rec2020 色彩空间解析）。Chrome、Firefox、Safari 解析到 color(rec2020 1 0 0) 时，会直接跳过整条声明，不报错也不 fallback。
你看到的“生效”，大概率是误判：比如用了 display-p3 却以为是 Rec.2020；或数值被浏览器当作非法值丢弃后，继承了父级 sRGB 颜色。
哪些地方明确不支持 rec2020
-
@supports (color: color(rec2020 0 0 0))永远返回false—— 浏览器根本不识别该函数 -
window.matchMedia("(color-gamut: rec2020)")在所有已知设备上都返回false（包括 Apple Vision Pro、HDR PC 显示器） - 任何使用
color(rec2020 ...)的 CSS 规则，在 DevTools 的 Styles 面板中不会显示为有效声明（灰色禁用状态） - Figma、Sketch、Photoshop 导出的 “Rec.2020” 十六进制值，本质仍是 sRGB 编码，不是真正 Rec.2020 坐标
实际能用的广色域方案只有 display-p3
如果你的目标是“让现代设备尽可能展现更鲜艳的红/绿”，display-p3 是唯一可行路径。但它仍需满足三重条件：
立即学习“前端免费学习笔记（深入）”；
- 设备支持：iPhone 12+、iPad Pro 2021+、MacBook Pro 2016+（Retina XDR）、部分高端安卓旗舰（如三星 S24 Ultra）
- 系统开启广色域：iOS/macOS 默认开启，但企业 MDM 策略可能关闭；Windows/Linux 基本无支持
- HTML 必须带
<meta name="color-scheme" content="light dark">，且放在<head>最顶部 - CSS 必须用
@supports包裹，例如：@supports (color: color(display-p3 0 0 0)) { .hero { color: color(display-p3 1 0 0); } } - 避免触发 sRGB 合成：不用
transform、opacity、filter等会让整个层叠上下文回退的属性
background-color: color(display-p3 ...) 为什么最常失效
这是最容易踩坑的点：iOS Safari 和 Android WebView 对 background-color 的色彩管理最弱。即使 @supports 通过、设备支持，它也常被强制映射到 sRGB 输出空间，导致颜色发灰或偏暗。
绕过方法很具体：
- 改用
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0))—— 单色无角度渐变更可能保留原始色域 - 不要用
background:简写覆盖前面定义的background-image，否则会清掉 P3 渲染上下文 - 别指望
rgba()自动 fallback：它和color(display-p3)不共存，整条规则可能被跳过 - P3 值必须来自专业工具转换：Photoshop 中启用 “Display P3” Proof Setup 并勾选 “Preserve Color Numbers”，再用吸管取色复制小数三元组；Figma 必须用插件导出，不能直接抄十六进制
Rec.2020 目前只存在于视频制作链路（Final Cut Pro 设为 “广色域 HDR”）、激光影院和科研场景，Web 前端无需考虑它。把精力集中在 display-p3 的条件判断、渐变 hack 和设计稿精准取值上，才是真实有效的路径。
