同一色值#FF6B6B在Chrome和Safari中显示差异，是因为Chrome默认使用sRGB色彩空间，而Safari（macOS/iOS）默认启用Display P3；CSS中需用color(srgb 1 0.4196 0.4196)显式声明sRGB并配fallback才能提升跨浏览器一致性。
Chrome 和 Safari 显示同一 #FF6B6B 为啥看起来一个偏橙一个偏粉
这不是 CSS 写错了，是浏览器默认使用不同色彩空间渲染：Chrome（Windows/macOS）通常走 sRGB，Safari（macOS/iOS）默认启用 Display P3（尤其在新 Mac 和 iPhone 上），而 #FF6B6B 这种十六进制色值本身不携带色彩空间信息，浏览器按各自默认策略解释——结果就是同一串数字，渲染出不同视觉效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
color: #FF6B6B;时，它始终被当作 sRGB 值解析，但最终是否“按 sRGB 显示”，取决于浏览器+系统是否强制转到显示设备原生色域 - macOS 12+ + Safari 15.4+ 默认对未声明色彩空间的 CSS 颜色做 Display P3 映射，Chrome 则仍倾向保持 sRGB 输出（即使屏幕支持 P3）
- 别指望靠改
meta或 CSS 全局开关统一行为——没有这种开关
CSS 里怎么明确指定颜色在 sRGB 里渲染
唯一可靠方式是显式声明色彩空间：用 color() 函数或 lab()/lch() 等新语法，并带上 srgb 标识。老式 rgb()、hex、hsl() 全部隐式绑定 sRGB，但如上所述，实际渲染可能被系统“优化”掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写
color: color(srgb 1 0.4196 0.4196);比color: #FF6B6B;更可能跨浏览器一致（注意：sRGB 数值需归一化到 0–1） - 目前 Chrome 111+、Safari 16.4+、Firefox 117+ 支持
color(srgb ...)，旧版本会直接忽略该声明，需配合 fallback - 不要用
color(display-p3 ...)去“适配”P3 屏幕——这会让 sRGB 屏幕显示过饱和，且无法 fallback
用 ICC 配置文件校准 CSS 颜色？别试了
CSS 规范里根本没有接口加载或绑定 ICC 配置文件。HTML 页面不是 Photoshop，浏览器不会读取你放网页根目录下的 DisplayP3.icc 或系统配置。所谓“颜色校准”，在 Web 场景下只能靠开发者控制输入（色彩空间声明）和约束输出（目标设备假设），没法让浏览器去调用系统级色彩管理模块。
常见错误现象：
- 把显示器校准软件生成的 ICC 文件扔进项目，幻想加个
<link rel="color-profile">就生效 → 实际无任何浏览器支持该标签 - 用
canvas+ctx.fillStyle = 'color(display-p3 ...)'测出“准确色块”，再截图对比 CSS 渲染 → 忽略了 canvas 的像素输出同样受浏览器色彩空间策略影响，不是权威参考 - 在 CSS 中写
color-profile: url(...)→ 该属性从未进入标准，所有浏览器无视
真正能落地的兼容方案就两条
不是所有项目都需要 P3 色域，也不是所有用户都开着色彩管理。务实做法是分层控制：保底用 sRGB，增强用新语法，关键色人工校验。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主品牌色、按钮色、图表色等高敏感颜色，同时写两行：
button {<br> background-color: #FF6B6B;<br> background-color: color(srgb 1 0.4196 0.4196);<br>}现代浏览器用第二行，老浏览器退回到第一行 - 设计交付时，要求设计师提供 sRGB 和 Display P3 两套色值（例如 Figma 插件可导出），前端按需选用，而不是只给一个 hex
- 在真机（特别是 M1/M2 Mac + iOS 17 Safari）上用系统“数字颜色计”工具采样页面元素 RGB 值，比人眼判断更可靠；你会发现同一
color(srgb ...)在 Safari 和 Chrome 下采样值几乎一致，但#...不一定
最易被忽略的一点：字体抗锯齿、子像素渲染、甚至 GPU 驱动版本都会轻微影响颜色感知。所谓“校准”，本质是接受 Web 的不可控性，然后在关键路径上收窄变量。
