主题色生成器

什么是主题色生成器？

如何使用主题色生成器

1. 1

   输入主色：点击输入框旁的『拾色器』按钮选择心仪颜色，也可以直接在输入框中手动输入HEX、RGB或者HSL格式的色值

2. 2

   调整参数：拖动滑块修改色阶整体的饱和度偏移，也可以调整全色阶的明度范围，适配不同项目的视觉风格需求

3. 3

   选择输出格式：在输出选项区域，勾选你需要的『CSS变量』『Tailwind配置』等你需要的输出格式

4. 4

   复制代码：点击生成结果区域的『复制全部』按钮，就能把整理好的完整配置代码复制出来，粘贴到项目里使用

什么场景会用到？

计算示例

注意事项

• 生成的色阶遵循 Tailwind CSS 官方的明度渐变逻辑，浅色色阶明度更高，深色色阶明度更低，与原生 Tailwind 色阶用法完全兼容。
• 仅支持十六进制格式的颜色输入，不支持 RGB、HSL 等格式，输入时请确保去掉开头的 # 或保留都可，工具会自动处理格式。
• 生成的 10 个色阶编号为 50、100…900，和 Tailwind 色阶编号规则一致，如果你需要自定义编号，需要手动修改输出代码。
• 如果输入接近纯黑或纯白的主色，生成的浅色色阶差异会很小，建议选择饱和度适中的主色来获得区分度清晰的色阶。

常见问题

参考资料

• Tailwind CSS 官方色阶设计规范
• W3C CSS 变量官方规范

本工具遵循 Tailwind CSS 色阶生成逻辑，所有输出色阶均经过工具集编辑组验证，与官方设计规范对齐，定期更新匹配最新的 Tailwind 风格命名规则。