明暗色阶
明暗色阶
输入基准色，生成从浅到深均匀过渡的色阶，可直接用于设计系统的状态色。
色阶预览
什么时候用
状态层次
同一色相的不同明度天然和谐，最适合做按钮的默认 / 悬停 / 按下 / 禁用状态。
背景层次
浅色阶做卡片背景、深色阶做边框或分割线，比纯灰更有设计感。
工具介绍与使用说明
📘明暗色阶把任意颜色按明度均分为浅到深的梯度，输出可直接用于 UI 层次。
- 输入一个颜色，工具按明度均分出浅到深的色阶并列出 HEX。
- 点任意色块复制；可导出为 CSS 变量一次性套用。
- 适合做按钮、边框、背景的层次过渡，保证同色系明暗协调。
使用提示
💡- 阶梯数量建议 5–9 档，太多反而难管理；首尾留给最浅背景与最深的文字。
- 复制为 CSS 变量后，按钮的 hover / active / disabled 直接引用不同档位即可。
- 深色模式下最深的几档要再压暗，否则和背景拉不开。