色阶生成
色阶生成器
给一个基准色，自动生成 11 级色阶与常用变体，直接用于 UI 设计系统与代码。
类 Tailwind 色阶 (50–950)
复制任意一级的色值，或导出整组 CSS 变量。浅色阶（加白）
深色阶（加黑）
灰阶变体（加灰）
什么是色阶
为什么需要色阶
设计系统里一个颜色往往要 11 个明度档位：hover、active、disabled、边框、背景都需要不同明度。手工调容易不统一，工具一键生成更可控。
色阶的明度分布
Tailwind 等框架把 50 设为最浅、950 最深，并让中间档位（500/600）落在视觉重心。本工具沿用这套分布，方便直接替换。
工具介绍与使用说明
📘色阶生成输入一个基准色，按 Tailwind 的 50~950 分布生成 11 档明度，直接替换设计系统的颜色变量。
- 选一个基准色，工具按 Tailwind 分布生成 11 档明度，方便直接替换设计变量。
- 复制 HEX 或导出 CSS 变量；深色模式下建议重新预览最深几档是否够暗。
- 色阶适合做按钮的 hover / active / disabled 与背景层次，避免手工调得不一致。
使用提示
💡- 选一个基准色，工具按 Tailwind 的 50~950 分布生成 11 档明度，方便直接替换设计变量。
- 复制 HEX 或导出 CSS 变量；深色模式下建议重新预览最深几档是否够暗。
- 色阶适合做按钮的 hover/active/disabled 与背景层次，避免手工调得不一致。