颜色插值 / 渐变步进
颜色
生成两个端点之间 N 个均匀间隔的颜色。CSS 渐变是一条平滑的带，而这给你可作为图表系列、状态徽章或热图图例发布的离散色卡。选择插值发生的颜色空间：普通 sRGB 最快但不均；OKLab 在感知上均匀（Tailwind v4、Radix Colors 使用）；linear RGB 与 3D 引擎所做的匹配；HSL 沿较短弧让色相移动。如果你想更多步进聚集在一端附近，缓动曲线会弯曲间距。
—
预设
步进
- #3B82F61/7
- #6A7FE72/7
- #8B79D83/7
- #A672C84/7
- #BF68B95/7
- #D65BA96/7
- #EC48997/7
OKLab 是推荐默认 —— Tailwind v4、Radix 和现代 CSS 渐变都在那里插值。
使用方法
- 设置起始和结束 hex（或用预设）。按 ⇄ 反转。
- 选择步进数和颜色空间 —— OKLab 是设计令牌最安全的默认。
- 把整个列表复制为 hex 或 HSL，或一次抓一个色卡。
常见问题
- 为什么 OKLab 比 sRGB 看起来好那么多？
- 普通 sRGB 插值产生浑浊的中间色调，因为通道不跟踪感知明度 —— 红+绿在中间是深橄榄而非干净的黄色。OKLab 构建为让相等步进大小看起来同等不同，所以过渡保持明亮。
- 缓动曲线做什么？
- 它控制步进如何沿渐变间隔。`Ease-out` 把更多步进聚在起点附近（对低端更重要的热图有用）；`Ease-in-out` 在两端放更多细节。