CSS颜色动画默认在sRGB空间线性插值导致视觉偏暗，LCH/OKLCH空间可改善但需浏览器支持（Chrome 112+/Safari 16.4+），兼容性差时需JS计算或预设多帧降级，且alpha通道始终独立线性插值。
CSS 颜色在动画中过渡不会“失真”，但视觉上可能偏离预期——根源在于浏览器对不同颜色表示法采用的插值策略不同，而非计算错误。
color 插值默认按 sRGB 空间线性计算
CSS 动画（transition 或 @keyframes）对 color、background-color 等颜色属性做插值时，浏览器会先把起始色和结束色转为 sRGB 坐标（R, G, B 各通道 0–255），再对每个通道做线性插值。这种算法简单高效，但人眼对亮度更敏感，而 sRGB 的 gamma 非线性未被补偿，导致中间帧看起来“发灰”或“偏暗”。
- 例如从
#ff0000（纯红）到#0000ff（纯蓝），第 50% 处不是视觉居中的紫，而是rgb(128, 0, 128)—— 这个值在 sRGB 下实际亮度偏低，观感偏暗紫 - 使用
hsl(0, 100%, 50%) → hsl(240, 100%, 50%)也不解决问题：HSL 本身不是感知均匀空间，h插值会跳过大量中间色调（如青、品红区域不自然）
想更平滑？必须显式指定 color-mix() 或 lch()
CSS Color Level 4 引入了感知更均匀的插值方式，但需主动启用：
-
color-mix()可指定色彩空间：color-mix(in lch, red 50%, blue 50%)
—— 在 LCH 空间混合，明度（L）与色度（C）、色相（H）独立变化，过渡更符合人眼直觉 - 直接用
lch()值定义关键帧，浏览器会在 LCH 空间插值（需支持 CSS Color 4 的浏览器，Chrome 112+、Safari 16.4+）：@keyframes fade-hue {
from { background-color: lch(50% 80 30); }
to { background-color: lch(50% 80 270); } - 注意：若起始/结束色写成
rgb()或命名色，浏览器仍回落到 sRGB 插值；必须全程用lch()或oklch()才生效
兼容性差是当前最大瓶颈
除非你只支持最新 Chrome/Safari，否则不能直接依赖 lch() 动画。降级方案需手动处理：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript +
requestAnimationFrame计算 OKLCH 中间值，再转回srgb()设置样式（精度高但开销大） - 预生成一组关键帧（如 10–20 帧），全部用
rgb()写死，在不支持新语法的浏览器里 fallback 到多帧 sRGB 过渡 - 接受 sRGB 插值的“缺陷”，通过调整起始/结束色的亮度（比如把深蓝改成
lch(60% 70 270)）来视觉补偿中间段的灰暗感
真正容易被忽略的是：即使写了 lch()，如果动画涉及透明度（rgba() 或 opacity），alpha 通道永远独立线性插值，它和颜色空间无关——这个组合效果需要单独验证。
