选错色彩空间会导致color-mix()结果违背人眼感知：sRGB非线性插值压缩中段亮度，使混合色发灰或偏色；OKLCH解耦L值，L线性变化即亮度线性变化，灰阶平滑、无塌陷，且@supports检测oklch()比color-mix()更可靠。
选错色彩空间，color-mix()算出来的颜色不是“不够准”，而是“根本不符合人眼感知”——比如想混出中间灰，结果得到发紫的暗灰；想提亮主色，结果饱和度塌陷、色调偏移。
in srgb 混合亮色为什么会发灰？
sRGB 是非线性色彩空间，它的数值和人眼亮度感受不一致。直接在线性数值上插值，会压缩中间亮度区域。
-
color-mix(in srgb, #ff0000 50%, #0000ff 50%)得到的是#7f007f（暗紫），不是视觉居中的品红 - 浅蓝混白后变灰、深蓝混黑后泛紫，都是 sRGB 插值路径导致的亮度塌陷
- 这种“灰”不是 bug，是数学必然结果：sRGB 的 gamma 曲线让中段数值被过度压缩
为什么 in oklch 能解决发灰问题？
OKLCH 把亮度（L）、色度（C）、色相（H）完全解耦，L 值线性变化 = 人眼感知亮度线性变化。
-
oklch(100% 0 0)是纯白，oklch(0% 0 0)是纯黑，中间任意 L 值都是中性灰 - 混合
oklch(53.2% 0.295 270.1)和oklch(100% 0 0)，L 从 53.2% → 100% 线性提升，灰阶过渡平滑无塌陷 - Chrome DevTools 拾色器里看 LCH 数值是否等距变化，比肉眼判断可靠得多
浏览器对 in srgb 的解析其实不统一
同一行 color-mix(in srgb, ...) 在不同浏览器里可能产出不同结果。
立即学习“前端免费学习笔记（深入）”；
- Chrome 和 Safari 按标准 sRGB 插值
- Firefox 112+ 默认按
srgb-linear解析（即先转线性再插值），结果更亮、更饱和 - 不显式写
in srgb，Firefox 可能用默认行为，Chrome/Safari 却报错或静默忽略 - 显式声明
in srgb是为了强制统一行为，不是可选项
选错空间会导致 fallback 彻底失效
你写了 @supports (color: color-mix(in srgb, red, blue))，但实际想用的是 OKLCH 效果——这个检测只保住了语法可用性，没保住视觉一致性。
- 更稳的检测方式是：
@supports (color: oklch(0% 0 0))，它比color-mix()支持得更早、更统一 - 只要
oklch()可用，color-mix(in oklch, ...)几乎肯定也能用（Chrome 111+/Safari 16.4+/Firefox 117+） - 如果降级到 sRGB，视觉效果差异巨大，不能指望用户看不出区别
最常被忽略的一点：色彩空间不是“选一个就行”，而是决定了整个混合路径的数学基础。OKLCH 的 L 值可预测、可锚定，sRGB 的 R/G/B 插值只是数字游戏——而 UI 需要的是人眼可感知的控制力。
