颜色色调生成器

什么是颜色色调生成器？

如何使用颜色色调生成器

1. 1

   选择基础颜色：点击界面上的『选择颜色』拾色器面板挑选想要的基础色，也可以直接在输入框中填写HEX或RGB格式的色值来确定基础色

2. 2

   生成色调变体：确认基础色后工具会自动计算明暗梯度，输出从浅到深一共10级不同明暗的色调色卡，无需额外操作

3. 3

   预览色卡效果：可以直接在生成结果区域查看每个色调的实际色块效果，同时能看到每个色调对应的标准色值信息

4. 4

   复制 CSS 变量：点击生成结果区域的『复制CSS代码』按钮，就能一键复制全部生成好的CSS变量代码到剪贴板

什么场景会用到？

计算示例

注意事项

• 生成的10级色调均匀分布在基础色的明度通道，从接近白色的浅色调过渡到接近黑色的深色调。
• 工具仅支持HEX、RGB、HSL格式的颜色输入，不支持颜色名称输入（如「red」「blue」）。
• 输出的CSS变量默认按编号命名，如果需要自定义前缀可在设置中修改，修改后变量名会跟随前缀变化。
• 色调明暗调整仅修改明度通道，保持原颜色的色相和饱和度不变，不会改变原颜色的色彩倾向。

常见问题

参考资料

• W3C CSS Color Module Level 4 规范
• MDN Web Docs CSS 自定义属性（CSS 变量）文档

本工具采用 HSL 色彩空间明度均匀分级标准生成色调，所有输出规则符合CSS规范，示例结果已经工具复算验证，内容由工具集编辑组维护更新。