根本原因是浏览器对同一#rrggbb值解释路径不同：safari默认映射display p3致偏粉，chrome多守srgb显偏橙；唯一可控方案是用color(srgb)显式声明并前置fallback，同时全链路锁定srgb设计与导出。
广色域屏幕（如 Display P3）和普通 sRGB 屏幕的颜色偏差，根本不是 CSS 写错了，而是浏览器对同一串 #RRGGBB 值的解释路径不同：Safari 默认映射进 P3 色域，Chrome 多数守在 sRGB，结果同一颜色在 Mac 上更粉、在 Windows 上更橙。唯一可控方式是主动声明色彩空间，并卡死全链路 sRGB。
用 color(srgb) 显式声明并配 fallback
老式写法如 #FF6B6B 或 rgb(255, 107, 107) 全部隐式绑定 sRGB，但实际是否“按 sRGB 渲染”，取决于浏览器是否尊重该默认。而 color(srgb) 是目前唯一能跨浏览器稳定控制解释路径的语法。
- 把十六进制换算成归一化值：
color(srgb 1 0.4196 0.4196)（0xFF / 255 = 1，0x6B / 255 ≈ 0.4196） - 必须前置降级：
color: #FF6B6B; color: color(srgb 1 0.4196 0.4196);——旧版浏览器忽略第二行，新版优先采用显式声明 - 禁用
color(display-p3)做“适配”：它会让 sRGB 屏幕过饱和，且无法优雅降级；真要用，必须套@supports (color: color(display-p3 0 0 0))
设计与导出环节必须强制转为 sRGB
再精准的 CSS 声明也救不了源头就错的切图。设计师导出 PNG/JPEG 时若没勾选“转换为 sRGB”和“嵌入色彩配置文件”，图片自带 P3 元数据，浏览器照单全收，前端写什么都没用。
- Figma 中：Preferences → Color profile 设为
sRGB，导出时勾选Embed color profile - Photoshop 中：确认文档配置为
sRGB IEC61966-2.1（不是 Display P3，也不是 Adobe RGB） - 验证 PNG 是否含 sRGB chunk：
pngcheck -v image.png；不含的话，浏览器可能按默认色域瞎猜
系统与显示器层面要关闭干扰项
即使 CSS 和切图都对了，系统级滤镜仍会实时扭曲所有输出：macOS 的“原彩显示”、Windows 的“夜间模式”、显示器 OSD 里的“Eye Care”或“Low Blue Light”，都会让 DevTools 看到的值 ≠ 人眼看到的值。
- Mac 用户：系统设置 → 显示器 → 关闭“原彩显示”和“夜览”
- Windows 用户：Win + I → 系统 > 显示 → 关闭“夜间模式”，滑块拖到 0%
- 外接显示器：用物理 Menu 键进入 OSD → 找到“图像模式” → 切换为
Standard或sRGB，而非Dynamic或Cinema - 关键一步：重置显示器 OSD 至出厂设置——很多偏色是 RGB 增益锁死或 Gamma 硬编码导致的底层信号偏差
别信 CSS 里加 color-profile 或 icc-color
CSS 规范里根本没有接口加载或绑定 ICC 配置文件。HTML 页面不是 Photoshop，浏览器不会读取你放网页根目录下的 DisplayP3.icc，也不会调用系统级色彩管理模块。所谓“校准”，在 Web 场景下只能靠开发者控制输入（色彩空间声明）和约束输出（目标设备假设）。
真正容易被忽略的是：广色域显示器接入后，OSD 模式没切到 sRGB 就直接校准，或 Windows “颜色管理”里没手动绑定 sRGB IEC61966-2.1.icm，这些操作缺失会让所有 CSS 努力失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
