rgb()和#RRGGBB视觉差异源于浏览器对色彩空间的隐式处理：Safari将未声明空间的HEX默认映射到display-p3（更粉更亮），而rgb()强制锚定sRGB；Chrome/Firefox则统一按sRGB解析。
rgb() 和 #RRGGBB 在绝大多数情况下视觉上完全一致——如果你看到差异，问题不在写法本身，而在浏览器对色彩空间的隐式处理路径不同。
为什么 Safari 里 #FF6B6B 比 rgb(255, 107, 107) 更亮更粉？
- Safari（尤其 macOS/iOS 15+）会把未标注色彩空间的
#RRGGBB默认当作display-p3基准解释（尤其在广色域屏幕下），而rgb()函数名本身暗示 sRGB 输入，因此被强制锚定到 sRGB 渲染管线。 - 结果：同一组数值，在 Safari 中可能走两条不同插值路径，导致渐变、阴影、叠加时出现肉眼可辨的色偏。
- Chrome 和 Firefox 则更倾向统一用 sRGB 处理两者，所以看起来“没区别”。
你不是看错了，是浏览器悄悄换了底层色彩空间。
渐变和 box-shadow 中颜色不一致的根源
- 浏览器对
linear-gradient()或box-shadow做颜色插值时，先映射到某个色彩空间，再线性过渡。 - 如果起止色没显式声明空间，各浏览器自行决定映射方式：
-
linear-gradient(to right, #FF6B6B, #4ECDC4)→ Safari 可能全按 P3 插值，Chrome 全按 sRGB -
linear-gradient(to right, rgb(255 107 107), rgb(78 205 196))→ 强制走 sRGB，跨浏览器一致
-
空格分隔语法 rgb(255 107 107) 是 CSS Color Level 4 标准，比逗号写法更明确绑定 sRGB。
怎么让颜色真正跨浏览器一致？
- 显式声明色彩空间：用
color(srgb 1 0.4196 0.4196)替代 HEX 或旧式rgb() - 必须带 fallback：
background-color: #FF6B6B; background-color: color(srgb 1 0.4196 0.4196); - 检测支持用：
@supports (color: color(srgb 0 0 0))，别信matchMedia或 UA 字符串 - 禁用
color(display-p3 #FF6B6B)—— 这是非法语法，color()不接受 HEX 参数
真正的麻烦不在写法，而在你是否意识到：颜色不是数字，而是数字 + 空间上下文。漏掉后者，就等于没写完。
立即学习“前端免费学习笔记（深入）”；
