视觉偏差源于浏览器对同一颜色值在不同色彩空间的解析差异，如safari 16+默认将未声明空间的rgb()和十六进制色按display p3处理，而chrome/firefox多用srgb，导致渐变插值路径不同；需显式锚定srgb、统一颜色格式、慎用transparent及opacity，并依赖@property实现真hsl插值。
视觉偏差不是转换出错，而是浏览器在不同色彩空间里对同一组数字做了不同解释。
rgb() 和十六进制在 Safari 里可能被当 Display P3 解析
iOS/macOS Safari 16+ 默认把未声明色彩空间的 rgb() 和 #ff6b6b 当作 Display P3 处理，而 Chrome/Firefox 多数仍走 sRGB。结果就是：同一段 linear-gradient(to right, #ff6b6b, #4ecdc4)，Safari 插值路径起点是 P3(0.98, 0.42, 0.42)，Chrome 是 sRGB(1, 0.42, 0.42)，中间色自然不一致。
- 显式锚定 sRGB：改用
rgb(255 107 107 / 1)（空格分隔 +/ 1），它强制走标准 sRGB 渲染管线 - 禁用混写：不要在同一渐变里穿插
#ff6b6b和rgb(255, 107, 107)，旧 Safari 可能对两者解析策略不同 - alpha 必须用
/语法：rgb(255, 107, 107, 1)在部分 Safari 版本中会被截断或忽略
HSL 值本身不触发 HSL 插值
写 color: hsl(210, 100%, 50%) 看起来没问题，但浏览器内部仍按 RGB 空间做线性插值。人眼对色相变化敏感，而 RGB 插值路径可能绕远——比如从深蓝 hsl(240, 100%, 20%) 到亮红 hsl(0, 100%, 80%)，RGB 插值会先经过紫、橙等意外中间色。
- 真·HSL 插值需配合
@property：@property --bg-hue { syntax: "<angle>"; initial-value: 240deg; }</angle>，再绑定到background-color: hsl(var(--bg-hue), 100%, 50%) -
@property目前仅支持 Safari 16.4+ 和 Chrome 107+，旧版本得降级为 JS 控制或接受 RGB 偏差 - 别用
hsl()替代rgb()来“修复”过渡跳变——它不能解决插值模型不匹配的根本问题
rgba() 和 transparent 不可插值
transparent 在 CSS 里本质是 rgba(0, 0, 0, 0)，但浏览器不把它和 rgba(255, 0, 0, 0.5) 视为同一插值序列。结果就是：从 transparent → rgba(255, 0, 0, 0.5) 的 transition 会直接跳到终点，没有中间帧。
- 统一用
rgba()起止：初始色写成rgba(255, 0, 0, 0)，目标色rgba(255, 0, 0, 0.5) - 十六进制不支持 alpha，所以带透明度过渡必须用
rgba()或rgb()新语法 - 避免用
opacity模拟半透背景色——它会让整个元素进合成层，丢失子像素渲染，文字边缘出彩边
最常被忽略的是：颜色格式只是表象，真正决定视觉一致性的是色彩空间声明、插值路径选择、以及设备端是否尊重该声明。不加 @supports 检测就用 color(display-p3)，或在未校准的屏幕上调试 hsl() 微调，都会让偏差放大而非收敛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
