色彩空间:沿什么路径混合颜色
两种颜色之间做插值,得到的不是一个点而是一条路径。同样的起点 from 与终点 to,在不同色彩空间里 走的路径不同:sRGB 直接对编码通道取平均,中点常发灰发暗;线性光 (linear-light) 先把 gamma 解码到光强再混合, 中点更亮、更接近真实的「半亮」;HSL 沿色相环插值,可顺时针 / 逆时针,默认走最短弧,会途经中间的色相; OKLCH 在感知均匀的空间里走,过渡平滑、不发灰也不过饱和。选一对端点颜色,对比四条渐变带,再让一个色块沿选中的路径滑动。
→
四种空间的插值路径 (各取 11 个 stop 采样拼成渐变带)
sRGB通道平均
线性光linear-light
HSL沿色相环
OKLCH感知均匀
色块沿选中路径滑动,刻度为当前进度 p
sRGB
线性光
HSL
OKLCH
p = 0.50当前路径色 —
srgb→linear 解码到光强、
在线性光里平均、再 linear→srgb 编码回来。色相环插值则要先决定方向:0° 到 240° 顺时针经黄绿青走 240°,
逆时针经品红走 120°,「最短弧」即取这两者中较短的一段。OKLab / OKLCH 的坐标按人眼感知校准,等距的数值差对应等距的视觉差,
因此沿直线 (OKLab) 或沿弧 (OKLCH) 走,明度与饱和度都更均匀,不会在中段塌陷成灰。
页内换算 + 用 Animation 驱动色块沿路径滑动
本页的换算 (sRGB↔linear、sRGB↔OKLab/OKLCH、RGB↔HSL) 都是标准公式;为什么 from / to 间能逐点求中间色,见
插值:中间值怎么求 (引擎 mixColor 即采用线性光近似)。把 p 随时间推进的快慢塑形,
交给 缓动:把时间重新塑形。