关于 Tailwind 调色板生成器
该工具用于根据一个基础色快速生成 Tailwind 风格的 50-950 色阶,并同步输出 Tailwind 配置片段与 CSS 变量。
核心功能
- 基础色输入:支持颜色选择器和 HEX 手动输入。
- 自动色阶生成:生成标准化浅到深的 11 个色阶值。
- 命名规范化:可设置调色板名称并自动转换为安全键名。
- 多格式输出:提供 Tailwind
colors配置、CSS 变量和完整色值列表。 - 快捷复制:支持复制单色、整组色板或指定输出片段。
使用说明
- 选择基础色并输入调色板名称。
- 检查生成的 50-950 色阶是否满足品牌视觉。
- 复制 Tailwind 配置或 CSS 变量到项目。
- 在组件中按统一命名调用颜色。
适用场景
- 设计系统初始化与主题色迭代。
- Tailwind 项目快速扩展品牌色。
- 需要同时维护 Tailwind 与原生 CSS 变量的项目。
常见问题
输入 HEX 后提示无效怎么办?
请确保格式为 3 位或 6 位十六进制颜色(含 #),例如 #3B82F6。
生成结果和设计稿不完全一致?
工具基于算法推导色阶,适合作为起点。最终可按设计规范微调关键档位。