颜色插值 / 渐变步进
生成两个端点之间 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` 在两端放更多细节。
相关工具
CSS color-mix() 预览 (插值空间对比)
对比现代 CSS color-mix() 函数在不同插值空间 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) 下如何混合两种颜色 — 实时色卡、计算 hex、每个空间的完整渐变条以及可复制的 CSS。
颜色 0 0
OKLCH 颜色选择器
在感知均匀的 OKLCH 空间（明度 · 色度 · 色相）中选色 —— 并查看每个选择是否落在 sRGB 显示色域内。
颜色 0 0
颜色名称查找
为任意 hex/RGB 颜色查找最接近的 CSS、Tailwind 或 XKCD 调查色名 — 按 OKLab 空间感知距离排序。
颜色 0 0
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色 0 0
颜色混合器
在 RGB、HSL 或 CIELAB 空间中插值两种颜色。查看中间过渡的 11 步渐变条。
颜色 0 0
Conic Gradient 生成器
CSS `conic-gradient()` 的可视化构建器 — 旋转角度、中心位置、颜色停止、形状预览。适用于饼图、环形图、棋盘格图案、色轮。
颜色 0 0