color() 函数不支持避免色彩溢出的主动控制，无溢出检测、裁剪或映射机制，仅按色空间坐标尝试渲染，超色域颜色由底层图形栈静默降级，CSS 层无法干预。
color() 函数根本不支持“避免色彩溢出”的主动控制
直接说结论：color() 函数没有溢出检测、裁剪或映射机制。它只是按给定色空间和坐标尝试渲染——超出目标设备色域的颜色，浏览器会静默降级（clamped 或 gamut-mapped），但具体策略完全由底层图形栈决定，CSS 层面无法干预。
display-p3 声明后颜色变灰/变暗，大概率是系统或浏览器未启用广色域管线
写了 color(display-p3 1 0 0) 却没看到更饱和的红色？不是语法错，而是以下任一条件未满足：
- 页面必须通过 HTTPS 提供（
file://协议下 Safari 也禁用 P3 渲染） - macOS 用户需在「系统设置 → 显示器 → 广色域显示」中开启；iOS/iPadOS 需关闭「辅助功能 → 色彩滤镜」
- 设备屏幕本身必须是 P3 硬件（如 MacBook Pro、iPhone X 及之后机型），普通 sRGB 屏即使解析了语法也会 fallback
- 不能写成
color: color(display-p3 1 0 0) red;—— fallback 会导致整条声明被丢弃，而非优雅退化
@supports 检测必须带完整函数调用，不能只测色空间名
错误写法：@supports (color-gamut: p3) 或 @supports color(display-p3 0 0 0)（缺括号和参数）。正确检测必须模拟实际使用场景：
/* ✅ 正确：检测整个 color() 函数是否被识别 */
@supports (color: color(display-p3 0 0 0)) {
.p3-button {
color: color(display-p3 1 0 0);
}
}注意：这个检测只说明浏览器“认识该语法”，不代表最终能渲染出 P3 效果——它仍受硬件、系统设置、HTTPS 等运行时条件制约。
立即学习“前端免费学习笔记（深入）”；
真要控制溢出行为，得绕开 color()，用 image-set() + ICC 嵌入 PNG
如果你的目标是“确保设计稿中的 P3 红在用户设备上尽可能准确呈现”，color() 不是可靠路径。更可控的做法是资源级兜底：
- 导出两张图：一张 sRGB 的
red-srgb.png，一张嵌入 Display P3 ICC 配置文件的red-p3.png（用 macOS Preview 或 Affinity Photo 导出时勾选「保留色彩配置」） - 用
image-set()让浏览器按设备能力自动选择：background-image: image-set( "red-srgb.png" 1x, "red-p3.png" 2x );
- 这样既规避了
color()的碎片化支持，又把色彩映射逻辑交给操作系统级色彩管理引擎，溢出处理更一致
最后提醒一句：P3 不是“更亮”，而是“更宽”——它的绿色和红色坐标超出了 sRGB 三角形。直接拿 sRGB 值套进 color(display-p3) 会严重偏色，必须用专业工具（如 Apple ColorSync）做色域转换，不能手动换算。
