应直接查看devtools中渲染出的rgb()值，而非设计稿hex或css声明值；因浏览器对#ff6b6b等未声明色彩空间颜色解释不同：safari倾向display-p3、chrome守srgb、firefox含gamma补偿，导致同一数值映射为不同物理色坐标。
直接看 DevTools 里渲染出来的 rgb() 值，不是你写的 #FF6B6B，也不是设计稿给的 HEX——那是根源所在。
用 DevTools 拾色器确认真实通道值
浏览器对未声明色彩空间的颜色各自解释，#FF6B6B 在 Safari 可能被映射到 display-p3，在 Chrome 保持 srgb，Firefox 还带 gamma 补偿。你看到的“颜色不一样”，其实是同一串数字被转成了不同物理色坐标。
- 打开 Safari / Chrome / Firefox 的开发者工具，用拾色器点一下目标元素，看它显示的
rgb(255, 107, 107)还是别的数值——这才是当前浏览器实际渲染的通道值 - 别信设计稿导出的 HEX：Figma 导出 PNG 若没勾选「转换为 sRGB」，图片自带 P3 元数据，会和 CSS 颜色打架
- 如果三个浏览器拾色结果不一致（比如 Safari 显示
rgb(255, 112, 115)，Chrome 显示rgb(255, 107, 107)），说明色彩空间已漂移，必须锚定
检查是否用了未声明空间的 HEX 或 hsl()
#RRGGBB 和 hsl() 是隐式绑定色彩空间的“高危写法”：它们不报错，但行为不可控。Safari 对 hsl(359.9, 100%, 50%) 可能截断成红色，Chrome 插值路径又和 Firefox 不同。
- 禁用
#FF6B6B用于品牌色、按钮主色、渐变关键节点等需要视觉一致的场景 - 改用
rgb(255 107 107)（空格语法）或rgb(255, 107, 107)（兼容旧版），强制走 sRGB 渲染管线 - 避免在
box-shadow、linear-gradient、border-color中直接写hsl()—— 旧版 Safari 解析不稳定，且不保证色域锚定 -
rgba()的 alpha 本身不会变色，但叠加软硬程度受抗锯齿策略影响，深色背景慎用rgba(255,255,255,0.1)，可试hsla(0,0%,100%,0.08)
验证 color() 函数是否生效且降级合理
color() 是目前唯一能显式声明色彩空间的 CSS 函数，但它不是万能开关——写错或漏 fallback 就等于没写。
- 必须归一化：把
#FF6B6B换算成color(srgb 1 0.4196 0.4196)（0xFF / 255 = 1，0x6B / 255 ≈ 0.4196），不能写color(display-p3 #FF6B6B)（语法错误） - 必须前置 fallback：
background-color: #FF6B6B; background-color: color(srgb 1 0.4196 0.4196);—— 旧浏览器忽略第二行，新版优先采用显式声明 - 用
@supports (color: color(srgb 0 0 0))检测，别用navigator.userAgent或matchMedia('(color-gamut: p3)')，后者在同台 Mac 上都可能动态失效 - 渐变里别写
linear-gradient(to right, #FF6B6B, #4ECDC4)，改用linear-gradient(to right, rgb(255 107 107), rgb(78 205 196))，否则插值路径完全分道扬镳
真正难的不是写对 color(srgb)，而是让设计师、切图、构建流程全链路锁定 sRGB：Figma 导出要勾「转换为 sRGB」，Photoshop 文档配置选 sRGB IEC61966-2.1，PNG 要含 sRGB chunk。前端写的再准，源头切图带 P3 元数据，照样白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
