浏览器对#ff6b6b等hex色值的色彩空间解析不一致：safari默认映射到display-p3，chrome v110+严格使用srgb，firefox存在gamma校正差异，导致同一颜色在不同浏览器中呈现粉、橙、灰之别；color(srgb)可强制统一，但需正确写法、fallback顺序及全链路规范。
这不是 CSS 写错了，而是浏览器对 #FF6B6B 这类未声明色彩空间的颜色值各自按默认策略解释：Safari（尤其 macOS/iOS）倾向映射到 display-p3，Chrome 和 Firefox 多走 srgb，结果同一串数字在 Safari 更粉、Chrome 偏橙、Firefox 略灰。
为什么 #RRGGBB 和 rgb() 渲染结果不同
根本问题不在写法本身，而在隐式色彩空间绑定：#FF6B6B 和 rgb(255, 107, 107) 都被解析为 sRGB 数值，但 Safari 会把它们再映射到 display-p3 输出，Chrome v110+ 严格守 sRGB，Firefox 则存在 gamma 校正微差。最终通道值一致，物理色却不同。
-
#FF6B6B在 Safari 中可能被当作 display-p3 基准插值，导致渐变起点“更亮更粉” -
rgb(255, 107, 107)在 Chrome 中保持 sRGB 插值路径，视觉上更偏橙红 - 设计稿导出 PNG 若未勾选「转换为 sRGB」，切图自带 P3 元数据，浏览器直接沿用
如何用 color() 强制统一色彩空间
color() 是目前唯一能显式声明色彩空间的 CSS 函数，它不依赖系统设置或 ICC 文件，只靠浏览器对 CSS Color Level 4 的支持程度生效。
- 写法必须归一化：
color(srgb 1 0.4196 0.4196)（0xFF / 255 = 1，0x6B / 255 ≈ 0.4196） - fallback 必须前置：
background-color: #FF6B6B; background-color: color(srgb 1 0.4196 0.4196); - 禁用
color(display-p3 #FF6B6B)——语法错误，color()不接受 HEX 参数 - 检测要用
@supports (color: color(srgb 0 0 0))，不是 UA 或matchMedia，后者不可靠
渐变中颜色不一致的根源与修复
渐变函数内部做插值时，不是按 RGB 数值线性过渡，而是先将输入颜色映射到某个色彩空间，再在该空间中计算中间色。若起始/终点颜色未锚定空间，各浏览器映射路径不同，插值结果就分道扬镳。
- 别写
linear-gradient(to right, #FF6B6B, #4ECDC4)—— 两个 HEX 在 Safari 可能都被当 P3 解释，在 Chrome 都是 sRGB，插值路径完全不同 - 改用
linear-gradient(to right, rgb(255 107 107), rgb(78 205 196))（空格分隔语法），强制走 sRGB 渲染管线 - 动画中切换渐变时，颜色格式必须全程统一；混用 HEX 和
rgb()可能导致 Safari 跳变 -
@supports (background: linear-gradient())检测没用——所有浏览器都支持语法，但不保证用同一空间渲染
真正麻烦的不是怎么写，而是整个链路里任何一环脱节：设计师导出没转 sRGB、前端用了 HEX、渐变里混了格式、变量里少一位、fallback 顺序反了……这些都会让 color(srgb) 白写。实际项目里，得从 Figma 导出设置开始卡死，而不是等上线后靠眼睛调色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
