从基础颜色生成 10-12 个明暗色阶，并导出可用于设计令牌（Design Token）的 CSS 变量。
从基础颜色生成 10 到 12 级明暗色阶，并输出可直接纳入设计令牌的 CSS 变量。
根据输入的 HEX 颜色生成一组由浅到深的色票。
支持在 10 级和 12 级之间切换，方便贴合不同设计系统的刻度。
会输出 `:root` CSS 变量，适合直接复制到设计令牌或样式基础层。
品牌蓝
#2563EB
青绿色样本
#14B8A6
12 级输出
base=#14B8A6, steps=12
色阶预览
50: #EFF6FF ... 500: #3B82F6 ... 900: #1E3A8A
设计令牌 CSS
:root {
--shade-50: #eff6ff;
--shade-100: #dbeafe;
...
}单色复制
点击任意色票即可复制对应的 HEX 值。
把色票直接当成语义命名使用
先建立基础色阶，再映射到 primary、success、warning 等语义设计令牌。
基础颜色本身过亮或过暗
先调整 base color，再重新生成整组色阶。
没有验证文本与背景对比度
色票生成后，仍需逐项检查实际组件里的可读性。
颜色明暗阶生成器适合快速建立基础色票与设计令牌草稿；正式采用前，仍应结合组件对比度和品牌规范复核。
10 级和 12 级该怎么选？
已有既定设计系统时直接遵循现有刻度；仍在整理基础层时，可先比较两组在组件中的表现。
输出变量名可以直接上线吗？
工具输出的是基础色阶变量，正式接入前通常还会再映射成语义化设计令牌。
生成的色阶能保证无障碍吗？
不能，仍需逐一验证文本、图标与背景组合的对比度。