color()函数显示异常的根本原因是参数错误或缺乏fallback，而非函数本身缺陷：漏写/拼错color-space、误用不支持的色彩空间（如rec2020）、未归一化数值或缺失fallback均导致声明被整条丢弃。
color() 函数在普通显示器上显示异常，根本原因不是函数本身出错，而是你没写对、没配好 fallback、或误用了不支持的空间。
color(display-p3) 在非 P3 屏上不会“降级”，而是整条声明被丢弃
浏览器解析 color() 时，color-space 参数是强制项：漏写、拼错（比如 displayp3、p3、display-p3-2022），整条 CSS 声明直接失效，连 fallback 都不走——它不是“渲染不准”，是压根没生效。
-
color(1 0 0)、color(p3 1 0 0)、color(display-p3 1 0 0)中只有最后一个合法；前两者全被忽略 - 普通 sRGB 显示器（绝大多数 Windows 笔记本、旧款 Mac、Android 手机）根本不支持
display-p3渲染，但浏览器仍会尝试解析——失败即丢弃 - 写了
color(display-p3 1 0 0)却没配background-color: #FF0000这类 fallback，结果就是继承色、透明或默认背景色
rec2020 和 a98-rgb 纯属“纸上规范”，当前所有浏览器都不认
别被 CSS Color Level 4 规范迷惑：rec2020、a98-rgb 虽然写进标准，但截至 2026 年 6 月，Chrome、Firefox、Safari 全部不解析。写了等于白写，还会导致同一条声明里后续属性也被跳过。
-
color(rec2020 0 0.5 1)在任何已发布浏览器中都不会渲染出 rec2020 蓝 - 试图用
@supports (color: color(rec2020 0 0 0))检测？永远返回 false，检测无效 - 唯一可用的广色域选项仍是
display-p3，且仅限 Safari 16+、Chrome 111+（需未禁用css-color-adjust）、Firefox 117+（需手动开启layout.css.color-functional-notation.enabled）
把 sRGB 十六进制值硬套进 display-p3，颜色反而更不准
这不是精度问题，是坐标系错位：#FF6B6B 是 sRGB 空间里的一个点，强行放进 display-p3 坐标系解释，得到的是完全不同的物理颜色——通常更艳、偏粉，在普通屏上尤其突兀。
- 正确做法：从 Figma/Sketch 导出设计稿时选“Display P3 RGB”模式，获取原生 P3 三元组（如
1.0 0.4196 0.4196），而非把 sRGB 值复制粘贴过去 - 在线工具推荐 Björn’s Color Picker，输入品牌色后切换到 “Display P3” 模式取值
- 若无 P3 设计源，就别用
display-p3——老老实实用color(srgb 1 0.4196 0.4196)+ fallback，这是跨设备最稳的路径
浏览器对未声明空间的颜色，各自按策略解释
Safari 默认倾向映射到 Display P3，Chrome 坚持 sRGB，Firefox 看系统设置——所以同一行 #FF6B6B 在不同浏览器里渲染不同。这不是 bug，是默认行为差异。
- 唯一打破默认的方式：显式声明空间，例如
color: color(srgb 1 0.4196 0.4196) - 必须配 fallback：
color: #FF6B6B; color: color(srgb 1 0.4196 0.4196);—— 后者不支持时自动回退前者 - 检测用
@supports (color: color(srgb 0 0 0))，别信color-gamut媒体查询，它只提示能力，不控制渲染
真正容易被忽略的点：color() 的数值必须归一化（0–1），不能传十六进制；color(display-p3 #FF6B6B) 是语法错误；Lab、OKLCH 等函数目前全不可用——别试，写了也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
