色阶生成器
编程开发
基于基础颜色一键生成深浅渐变序列，向深色和浅色两个方向生成均匀色阶，适用于 Tailwind CSS 调色板、设计系统配色
快速选择基础颜色
红色
橙色
黄色
绿色
青色
蓝色
紫色
粉色
颜色设置
#3B82F6
选择颜色并点击「生成色阶」查看结果
使用场景
| 场景 | 说明 | 建议 |
|---|---|---|
| Tailwind CSS 调色板 | 为 Tailwind CSS 扩展自定义颜色的 50~950 完整色阶 | 使用 Tailwind 模式一键生成 11 级标准色阶 |
| 设计系统色阶 | 定义品牌色的深浅变体，建立统一的设计系统色彩规范 | 暗/亮各 5 步，生成 11 级色阶覆盖常用场景 |
| CSS 变量配色 | 生成 CSS 自定义属性色阶，方便在项目中统一管理颜色 | 复制全部 hex 后批量转为 CSS 变量 |
| 图表配色方案 | 为数据可视化图表生成同一色系的深浅配色 | 亮色用于高值，暗色用于低值，形成视觉层级 |
| UI 状态色 | 为按钮 hover/active/disabled 等状态生成对应深浅色 | 基础色用于默认态，浅色用于 hover，深色用于 active |
| 背景与文字搭配 | 从品牌色生成浅色背景与深色文字的搭配方案 | 浅色阶（1~3步）做背景，深色阶（4~5步）做文字 |
常见问题
色阶生成的原理是什么？
色阶生成器使用 RGB 线性插值算法：变暗时将基础颜色与黑色按比例混合，变亮时与白色按比例混合。步数越多，过渡越细腻。例如变暗 5 步，则每步混合 1/6 比例的黑色。
与颜色混合器有什么区别？
颜色混合器是在两种颜色之间生成中间过渡色；色阶生成器则是从单一基础颜色出发，分别向深色和浅色两个方向生成渐变序列。前者适合双色渐变，后者适合单色色阶扩展。
Tailwind 模式是什么？
Tailwind 模式会生成与 Tailwind CSS 标准一致的 11 级色阶（50/100/200/300/400/500/600/700/800/900/950），其中 500 级最接近基础颜色，50 最浅，950 最深。
如何复制色值？
点击任意色块即可复制该色块的 HEX 值到剪贴板。也可以点击"复制全部"按钮一键复制所有色阶的 hex 值列表。
最多支持多少步？
变暗和变亮方向各支持最多 20 步，总共可生成 41 个色块（含基础色）。一般 5~9 步即可满足大部分设计和开发需求。
生成的色阶可以直接用在代码中吗？
可以。生成的 HEX 值可直接用于 CSS、Tailwind 配置、CSS 变量、JavaScript 常量等。Tailwind 模式下还可直接粘贴到 tailwind.config.js 的 colors 配置中。
关于色阶生成器
色阶生成器基于 RGB 线性插值算法，从选定的基础颜色出发，分别向深色方向（混合黑色）和浅色方向（混合白色）生成均匀的渐变序列。
两种模式：
- 自定义模式：分别设置变暗和变亮的步数（0~20），灵活控制色阶数量和分布
- Tailwind 模式：一键生成与 Tailwind CSS 标准一致的 11 级色阶（50~950），其中 500 级最接近基础颜色
应用场景：Tailwind CSS 调色板扩展、设计系统色阶定义、CSS 变量配色、图表配色方案、UI 状态色生成等。点击色块即可复制 HEX 值，支持一键复制全部色值或导出为 CSS 变量代码。