color()函数在html/css中直接使用display-p3色域目前仅safari on ios/macos部分支持，chrome、firefox等主流浏览器均忽略该语法并回退为黑色或继承色；需https、p3屏幕、系统广色域开启且无fallback声明才可能生效，跨浏览器推荐用color-mix()做感知一致降级。
color()函数在HTML中直接使用Display P3色域会失败
浏览器目前不支持在普通HTML/CSS中直接用 color(display-p3 ...) 设置颜色——哪怕你写了，Chrome、Safari（桌面）和Firefox都会忽略它，回退到默认黑色或继承色。这不是语法写错，而是规范支持尚未落地：CSS Color Module Level 4 中的 color() 函数虽已进入CR阶段，但 display-p3 色彩空间的渲染依赖底层系统与浏览器对广色域输出管线的支持，目前仅 Safari for iOS/macOS 在部分场景下有限启用（且需配合 <meta name="color-scheme" content="dark light"> 和真机+P3屏幕），其他环境基本不可用。
Safari on macOS/iOS 是唯一可能生效的环境
如果你的目标是 Safari，并且用户设备确实是带P3屏幕的 Mac（macOS 12.3+）或 iPhone/iPad（iOS 15.4+），那么 color(display-p3 ...) 才有实际意义。但必须同时满足以下条件：
- 页面通过 HTTPS 提供（本地
file://协议不触发广色域渲染） - 用户未在系统设置中禁用“广色域显示”（macOS：显示器设置 → “广色域显示”开关；iOS：辅助功能 → 显示与文字大小 → “色彩滤镜”关闭）
- CSS 中不能混用 fallback 颜色（例如
color: color(display-p3 1 0 0) red;会导致整个声明被丢弃） - 只对支持 display-p3 的 CSS 属性生效：如
color、background-color、border-color，但不包括box-shadow或渐变中的 stop color（后者需用color-mix()或预转sRGB）
替代方案：用 color-mix() + sRGB fallback 更稳妥
真正能跨浏览器控制色彩表现的路径，不是硬上 color(display-p3 ...)，而是用 color-mix() 做感知一致的降级映射。例如你想表达一个典型的 P3 红（R=1, G=0, B=0），它比 sRGB 红更饱和，但直接写 color(display-p3 1 0 0) 在 Chrome 里就是黑的。可行做法是：
body {
/* Safari 可识别，其他浏览器跳过 */
color: color(display-p3 1 0 0);
/* 所有浏览器都认的 fallback —— 但不是随便选个sRGB红 */
color: color-mix(in srgb, red 90%, white 10%);
}
这里 color-mix() 不是模拟P3，而是按人眼感知相似度，在 sRGB 范围内找最接近的可显示颜色。注意：color-mix() 目前仅 Safari 16.4+ 和 Chrome 111+ 支持，旧版仍需手动提供 rgb() 值。
开发时最容易被忽略的验证点
你以为开了开发者工具的“颜色拾取器”就能看到 display-p3 值？错。Chrome DevTools 的取色器永远只显示 sRGB 数值，即使你用了 color(display-p3 ...)；Safari 的 Web Inspector 也仅在“Computed”面板里标出 color(display-p3 ...) 字符串，不转换也不预览效果。真实验证必须：
- 在真机（iPhone 12+ 或 M1/M2 Mac）上用系统“颜色同步实用工具”或第三方 app（如 ColorSlurp）捕获渲染像素的 Lab 值，再比对 P3 色域边界
- 禁用所有 CSS 预处理器（PostCSS、Tailwind JIT）——它们大多会直接删掉不认识的
color()函数 - 避免在
@media (prefers-color-scheme: dark)内嵌套 display-p3 色值，Safari 当前对媒体查询内的广色域解析不稳定
display-p3 不是“更亮的RGB”，它是独立坐标系；拿 sRGB 值硬塞进 color(display-p3 ...) 参数里，结果往往远超预期，甚至溢出为不可见色。真要发挥广色域价值，得从图像资源（WebP/PNG with ICC profile）和 Canvas 2D context 的 colorSpace: "display-p3" 选项入手，而不是指望一行CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
