显示器色彩空间不一致导致偏色，macOS默认Display P3而Windows多为sRGB，需统一使用sRGB输出、明确标注色彩空间并避免非标准CSS属性。
显示器色彩空间没设对，sRGB 和 Display P3 混着用就偏色
网页里写的 #FF6B6B 在 MacBook 上看着暖，在 Dell 显示器上发青，大概率不是 CSS 写错了，而是系统/浏览器把颜色当成了不同色彩空间来渲染。macOS 默认用 Display P3（广色域），Windows 多数是 sRGB；如果图片或 CSS 没声明来源空间，浏览器会按当前设备默认空间解释——结果就是同一段代码，颜色数值没变，人眼看到的却不一样。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有带颜色的
<img alt="CSS颜色在不同显示器上的色差排查_理解色彩空间设置" >加decoding="async"没用，但加color-scheme: light dark也不解决色差；真正要管的是图像元数据和 CSS 渲染上下文 - CSS 中避免只写十六进制色值，尤其涉及品牌色时，优先用
color: rgb(255 107 107)（现代语法）或明确标注空间：color: color(display-p3 1 0.42 0.42) - 导出设计稿切图前，在 Sketch/Figma 中确认「导出为 sRGB」已勾选；Photoshop 里存 PNG/JPEG 前检查「转换为 sRGB」是否启用
color-profile 不是标准 CSS 属性，别在样式里硬写
有人查到 ICC 配置文件就想往 CSS 里塞 color-profile: url("srgb.icc")，这行不通——CSS 规范里压根没有这个属性，浏览器不认，写了等于注释。真要绑定色彩配置，得靠 HTML 元数据或图像自身嵌入。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要在
<style></style>或内联里尝试color-profile、icc-color等非标准写法，白费劲 - 若必须强制指定某张图按 sRGB 渲染，用
<img src="a.png" style="max-width:90%" alt="CSS颜色在不同显示器上的色差排查_理解色彩空间设置" > 没用；正确做法是确保 PNG 文件头含 sRGB chunk（可用 <code>pngcheck -v a.png验证） - SVG 中可嵌入色彩配置：
<color-profile name="sRGB" href="sRGB.icc" rendering-intent="auto"></color-profile>，但仅限 SVG 本身，不影响外部 CSS 颜色
Chrome 和 Safari 对 color() 函数的支持差异导致渲染不一致
color(display-p3 0.9 0.2 0.3) 这种写法在 Safari 16+ 能正常显示广色域色块，但在 Chrome 111 之前根本不解析，直接退回到继承色或透明。不是 bug，是规范落地节奏不同——CSS Color Level 4 的新函数，Safari 推得早，Chrome 慢半拍，且默认关闭实验性功能。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (color: color(display-p3 0 0 0))做特性检测，而不是 UA 判断；里面套一层降级：color: #FF6B6B; color: color(display-p3 1 0.42 0.42) - 开发阶段在 Chrome 启用
chrome://flags/#css-color-adjust和#enable-experimental-web-platform-features可临时开启支持，但上线前必须有降级 - 别依赖
color-mix()或color-contrast()做关键视觉判断，这些函数目前兼容性更差，连 Safari 技术预览版都还没完全稳定
用 matchMedia("(prefers-color-scheme: dark)") 解决不了色差问题
有人以为深色模式开关能同步校准色彩空间，其实完全无关。prefers-color-scheme 只告诉页面用户倾向亮/暗主题，不传递任何关于显示器色域、伽马值或 ICC 配置的信息。开了深色模式，#333 还是那个 #333，只是背景从白变黑，对比度变了，但色相饱和度一点没动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要把色彩一致性问题错误归因到暗色模式，那是两个独立维度：一个是“明暗逻辑”，一个是“颜色解释逻辑”
- 真要动态适配设备能力，可用
navigator.mediaCapabilities查colorGamut（返回"sdr"/"p3"/"rec2020"），但支持度有限，目前仅 Chromium 115+ 和 Safari 17.4+ - 最稳妥的路径仍是统一输出 sRGB：设计稿转 sRGB、切图嵌 sRGB、CSS 用 RGB/HSL 代替广色域函数，除非你明确知道目标用户 90% 用 M1/M2 Mac 且接受 Safari-only 体验
色差排查最后卡住的地方，往往不是代码写错，而是你默认“屏幕显示即真实”，而忘了浏览器根本不知道你的显示器出厂时校过没、ICC 文件有没有被系统覆盖、甚至显卡驱动有没有悄悄启用 HDMI RGB Range 转换。
