html/css 不支持自动 srgb 到 display p3 转换，所有传统颜色值（如 #ff0000、rgb(255,0,0)）均强制按 srgb 解释；需显式使用 color(display-p3 1 0 0) 且仅在 safari 16.4+、chrome 117+ 等支持环境中生效，必须手动提供 srgb 回退。
HTML 本身不支持直接做 sRGB 到 Display P3 的颜色空间转换——浏览器渲染层默认只理解 sRGB，color 属性、background-color、rgb()、hsl() 等所有 CSS 颜色值都按 sRGB 解释。Display P3 是广色域，必须靠 color(display-p3 ...) 函数显式声明，且仅在支持的系统（macOS Safari、iOS Safari、部分新版 Chrome）上生效。
为什么直接写 color: #FF0000 永远是 sRGB
CSS 中所有传统颜色表示法（十六进制、命名色、rgb()、hsl()）均隐式绑定到 sRGB 色彩空间。即使你在 macOS 上用 P3 显示器打开页面，#FF0000 仍被当作 sRGB 红渲染，不会自动映射到 P3 红的坐标。这是规范强制行为，不是 bug。
-
rgb(255, 0, 0)和#FF0000在任何浏览器里都等价于 sRGB 坐标 (1, 0, 0) - Display P3 红的坐标是
color(display-p3 1 0 0)，它比 sRGB 红更饱和，但两者数值相同、语义不同 - 没有自动转换函数：CSS 不提供
convert-color(...)或类似语法
color(display-p3 ...) 的实际写法和兼容性陷阱
要启用 P3，必须用 CSS 新增的 color() 函数，并指定色彩空间名。参数是线性化的归一化浮点值（0–1），不是 0–255 整数。
- 正确写法：
color: color(display-p3 1 0 0);（P3 红），background-color: color(display-p3 0.2 0.8 0.4); - 错误写法：
color: color(display-p3 255 0 0);（会解析失败）、color: display-p3(1,0,0);（语法非法） - 透明度需额外加第四个参数：
color: color(display-p3 1 0 0 / 0.8); - 兼容性：Safari 16.4+ 完整支持；Chrome 117+ 仅支持
color(display-p3 ...)但不支持color(srgb ...)显式声明；Firefox 当前完全不支持
如何安全降级：sRGB fallback 必须手动写
浏览器遇到不认识的 color(display-p3 ...) 时会直接丢弃整条声明，不会回退到前一条。所以 fallback 必须用层叠顺序 + 重复属性实现：
button {
background-color: rgb(255, 0, 0); /* sRGB fallback —— 先写 */
background-color: color(display-p3 1 0 0); /* P3 override —— 后写，覆盖前面 */
}
- 不能依赖
@supports (color: color(display-p3 0 0 0))包裹，因为旧浏览器不识别该语法会导致整个块失效 - 也不能用
background-color: rgb(255, 0, 0), color(display-p3 1 0 0);—— 多值语法不合法 - 渐变中使用 P3 更危险：
background: linear-gradient(to right, rgb(255,0,0), color(display-p3 0 1 0));任一色值失效，整条 gradient 解析失败
JavaScript 里做 P3 坐标换算？别试了
没有标准 API 能把 sRGB 的 rgb(255, 0, 0) “转成” P3 坐标。所谓“转换”其实是两个不同色域下的独立定义，不存在数学单射。你只能：
- 查厂商公开的 P3 原色矩阵（如 Apple 提供的 D65 白点下 P3 RGB → XYZ 矩阵），自己实现 XYZ 中转，再映射回 P3 归一化值 —— 但结果只是近似，且无法保证与浏览器渲染一致
- 用设计工具（Figma、Sketch）导出 P3 值后硬编码，而不是动态计算
- 真正需要精确控制时，应由设计师在 P3 环境下选色，输出
color(display-p3 ...)字符串，前端只负责插入
最易被忽略的一点：P3 不是“更亮的颜色”，而是“更宽的色域”。同一组数值在不同空间下视觉差异可能极小，尤其在非广色域屏幕上根本看不出区别。上线前务必在真机（iPhone、MacBook Pro）上实测，别信模拟器或开发者工具里的“P3 预览”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
