输入主色生成 Tailwind 风格完整色阶,输出 CSS 变量配置代码
它是给前端和设计师用的主题色生成工具。输入一个品牌主色,就能自动生成从浅到深的完整色阶,不用手动逐个调颜色。
它遵循 Tailwind CSS 的色阶分级逻辑,生成 50 到 950 共 11 个明度档位,同时输出对应 HSL 值,直接适配前端项目的主题系统。
一共生成 11 个档位,编号从 50 到 950,和 Tailwind CSS 默认色阶的档位划分完全一致,可直接替换使用。
支持 HEX、RGB、HSL 三种常用格式,直接粘贴色值文本即可自动识别,不需要额外转换格式。
可以自定义调整。工具提供全局饱和度偏移滑块,你可以根据自己的需求,整体调亮或调低所有色阶的饱和度。
可以直接复制使用。生成的 CSS 变量、Tailwind 配置都是可直接粘贴运行的合法代码,不需要再手动修改格式。