任务路径 / 从输入到结果
如何生成颜色色阶
- 01
设置基础颜色
在“基础颜色”下输入十六进制值——#RGB、#RGBA、#RRGGBB 和 #RRGGBBAA 都可以，输入框初始为 #6D5EF8。基础颜色永远位于成品色阶的正中间。
- 02
选择色阶数量
把“色阶数量”设为 3 到 20 的整数——默认是 9。奇数数量能让明暗两侧围绕基础颜色均匀分布；偶数数量同样让基础颜色居中，只是浅色侧会多一个色块。
- 03
生成色阶
点击“生成色阶”。色板从深暗色阶经过基础颜色延伸到浅亮色阶，每张色卡都带编号并标注十六进制值，因此位置 1 永远是最深的一级。
- 04
了解混合行为
基础颜色之下的色阶向黑色混合，之上的亮色阶向白色混合，但混合朝任一极端的推进都不会超过 78%。两端的颜色保持有彩度、可用，而不会塌缩成接近纯黑或纯白。
- 05
加载示例色阶
点击“加载示例”会围绕 #0EA5E9 生成七级色阶——一套完整的参考运行，方便你在输入自己的品牌色之前先查看。“重置”恢复 #6D5EF8 的基础颜色和数量 9。
- 06
复制或下载令牌
点击“复制输出”复制由 --toolars-shade-1 … 自定义属性组成的 :root 代码块，或点击“下载”保存为 toolars-color-shades.css，可以直接粘贴进样式表。每张色卡上也会显示十六进制值，方便单独复制。