ff6b6b在不同浏览器渲染差异源于隐式色彩空间绑定：safari映射到display-p3，chrome严格srgb，firefox存在gamma校正微差；应统一使用rgb()空格语法或color(srgb)显式声明。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
#FF6B6B 在 Safari 里偏粉、Chrome 里偏橙、Firefox 里略灰——这不是 CSS 写错了，也不是显示器坏了，而是浏览器对未声明色彩空间的十六进制颜色各自按默认策略解释：Safari（尤其 macOS/iOS）倾向映射到 display-p3，Chrome v110+ 严格走 srgb，Firefox 则存在 gamma 校正微差。
为什么 #RRGGBB 和 rgb() 渲染结果不同
根本问题不在写法本身，而在隐式色彩空间绑定：#FF6B6B 和 rgb(255, 107, 107) 都被解析为 sRGB 数值，但 Safari 会把它们再映射到 display-p3 输出，Chrome 保持 sRGB 插值路径，Firefox 混合时做 gamma 补偿。最终通道值一致，物理色却不同。
-
#FF6B6B在 Safari 中可能被当作display-p3基准插值，导致渐变起点“更亮更粉” -
rgb(255, 107, 107)在 Chrome 中保持 sRGB 插值路径，视觉上更偏橙红 - 设计稿导出 PNG 若未勾选「转换为 sRGB」，切图自带 P3 元数据，浏览器直接沿用，和 CSS 颜色打架
怎样用 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，后者不可靠
渐变和 box-shadow 中颜色不一致的根源与修复
渐变函数内部做插值时，不是按 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 渲染管线 -
box-shadow: 0 2px 4px #FF6B6B改成box-shadow: 0 2px 4px rgb(255 107 107)，Safari 颜色立刻“变冷”更接近 Chrome - 动画中切换渐变时，颜色格式必须全程统一；混用 HEX 和
rgb()可能导致 Safari 跳变
display-p3 映射就可能激活——而它不会报错，只会悄悄改变颜色物理坐标。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
