根本原因是设计稿用Display P3色域而浏览器默认sRGB，同一RGB值在不同色域下映射出的色彩不同；#FF6B6B在P3中为鲜亮珊瑚红，在sRGB中被压缩变灰。
为什么设计稿里的 #FF6B6B 在浏览器里看起来更灰？
根本原因不是 CSS 写错了，也不是设计师给错值，而是设计稿（通常在 macOS / Figma / Sketch）和浏览器渲染默认使用了不同的颜色空间：设计软件多用 Display P3，而多数浏览器（尤其 Windows）默认走 sRGB。同一组 RGB 数值，在不同色域下映射出的实际光谱不同——#FF6B6B 在 P3 下是鲜亮的珊瑚红，在 sRGB 下就被“压缩”成偏暗、偏灰的版本。
color-scheme: light dark 不影响颜色值，但会影响系统级色彩管理
这个 CSS 属性只告诉浏览器该适配哪套系统 UI 主题（比如让表单控件自动切深色），它不会触发颜色空间转换，也不会重解释 rgb() 或十六进制值。即使你写了：
body {
color-scheme: dark;
background: #FF6B6B;
}——#FF6B6B 依然按当前设备默认色彩空间（通常是 sRGB）解析和输出。真正起作用的是：
- 操作系统是否启用广色域支持（macOS 默认开，Windows 需手动开启“HDR”或“Windows HD Color”）
- 显示器是否为 P3 / Adobe RGB 硬件，并被系统识别
- 浏览器是否启用
color-gamut媒体查询 +color()函数（仅 Chromium 117+ / Safari 16.4+ 支持）
如何让网页真正复现设计稿的 P3 色彩？
必须显式声明色彩空间，不能依赖默认行为。目前最可靠的方式是用 CSS color() 函数配合 display-p3：
立即学习“前端免费学习笔记（深入）”；
.btn {
/* 设计稿中对应的 P3 坐标（需从设计工具导出或转换） */
background-color: color(display-p3 1.0 0.4196 0.4196);
}注意：不能直接把 sRGB 的 #FF6B6B 拿来套用 color(display-p3 ...)——那只是把 sRGB 值强行塞进 P3 坐标系，结果更不准。正确做法是：
- 在 Figma / Sketch 中导出 P3 的线性 RGB 值（非 sRGB 转换）
- 或用在线工具（如 Björn’s Color Picker）输入设计稿颜色，切换到 “Display P3” 模式获取对应三元组
- 对关键品牌色做媒体查询降级：
@media (color-gamut: p3) { .brand-red { background: color(display-p3 1.0 0.4196 0.4196); } } @else { .brand-red { background: #FF6B6B; } }
开发时最容易忽略的三个硬限制
很多团队试过 color(display-p3) 却发现没生效，大概率卡在这三点：
- Chrome 必须开启
chrome://flags/#force-color-profile并设为display-p3（仅开发调试用，线上无效） - macOS Safari 需要显示器本身支持 P3 且系统设置中启用“广色域显示”（设置 > 显示器 > 颜色 > 选 P3）
-
color()中的数值是线性光值（0–1），不是 gamma 校正后的 sRGB 值；直接填color(display-p3 255 107 107)是错的，会全黑
真实项目里，P3 色彩目前仍属于“增强体验”，不是基础可用性保障。优先确保 sRGB 下可读、合规，再用媒体查询渐进增强。
