chrome和safari显示同一颜色#ff6b6b偏粉或偏橙，是因为safari默认启用display p3色彩空间而chrome坚持srgb，导致未声明色彩空间的颜色值被不同解析；应统一使用rgb(255 107 107 / 1)并显式指定in srgb，图片导出需转srgb，用color-mix()和@supports确保跨浏览器一致性。
为什么 Chrome 和 Safari 显示同一个 #FF6B6B 会偏粉或偏橙
不是颜色值写错了，而是浏览器默认使用不同的色彩空间解析 sRGB。Safari（尤其是 macos 上）默认启用 Display P3 支持，如果 css 中没显式声明色彩空间，rgb() 或十六进制会被当作 sRGB 解析，但渲染时可能被系统级色彩管理“悄悄转换”。Chrome 当前仍以纯 sRGB 为主，firefox 则取决于系统设置和 layout.css.color-mix.enabled 开关。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有颜色值统一用
rgb()函数并显式指定色彩空间：color: rgb(255 107 107 / 1)（注意空格分隔、无逗号、支持 alpha） - 避免混用：
#FF6B6B和rgb(255, 107, 107)在旧版 Safari 中可能触发不同解析路径 - 如需兼容 IE11 或 android 4.x，仍可用
#FF6B6B，但必须配合color-scheme: light和禁用自动深色适配
用 color-mix() 做跨浏览器一致的渐变中点色
直接写 background: linear-gradient(to right, #000, #fff) 时，各浏览器对中间 50% 灰的计算逻辑不同——Safari 可能按 P3 插值，Chrome 按 sRGB。用 color-mix() 能强制统一空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写成：
color-mix(in srgb, black 50%, white 50%)，明确限定在 sRGB 空间混合 - 不要省略
in srgb—— 默认行为未标准化，Firefox 98+ 才支持该语法，旧版本需回退到预计算的#808080 - 搭配
@supports (color: color-mix(in srgb, red, blue))做特性检测，避免全站失效
图片和 CSS 颜色不匹配？检查 image-rendering 和色彩配置文件
一张带内嵌 sRGB Profile 的 PNG，在 Safari 里显示比 CSS 背景色更饱和，往往不是 CSS 问题，而是图片被系统按 Display P3 渲染，而 CSS 还卡在 sRGB。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出图片时勾选「Convert to sRGB」（Sketch/figma/photoshop 均有此选项），或用
pngcrush -q -reduce -brgb剥离 ICC Profile - 给 img 加
image-rendering: crisp-edges可抑制部分浏览器的色彩插值增强 - 不用
background-image: url(...)叠加纯色时，改用mask-image+background-color，绕过图片色彩空间干扰
开发阶段怎么快速验证颜色一致性
不能只靠人眼比对，尤其在高分屏上。DevTools 的拾色器本身也受当前页面色彩空间影响。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 chrome devtools 的 Styles 面板中右键颜色值 → “copy color as sRGB hex”，再粘贴到 Safari 的 Web Inspector 对比是否一致
- 用
window.getComputedStyle(el).color在控制台读取实际计算值，看是否返回rgb(255, 107, 107)还是color(display-p3 1.0 0.42 0.42) - 真机测试不可跳过：ios Safari 和 macOS Safari 对色彩空间处理差异明显，模拟器无法复现
真实项目里最常被忽略的是：CSS 自定义属性（--main-color: #FF6B6B）一旦被用于 color-mix() 或 color-contrast()，就会触发色彩空间升级，此时原始值是否带空间声明，直接决定下游计算结果。别假设“我写了十六进制就一定是 sRGB”。