使用说明
Generated by AI
TailwindCSS 颜色生成器
输入任意颜色自动生成完整的 TailwindCSS 调色板配置,快速应用到项目中。
功能特点
- 输入十六进制颜色值自动生成 TailwindCSS 颜色调色板
- 生成从 50 到 950 的完整色阶系统
- 智能识别颜色名称,匹配最接近的标准色系
- 实时预览每个色阶效果和对应颜色值
- 自动生成可直接使用的 TailwindCSS 配置代码
使用方法
- 在颜色输入框中输入或选择十六进制颜色值(例如 #cb0101)
- 系统自动生成该颜色的完整调色板
- 查看左侧色阶预览,了解每个级别的视觉效果
- 右侧显示生成的 TailwindCSS 配置代码
- 点击代码面板的复制按钮,将配置复制到剪贴板
- 粘贴代码到项目的
tailwind.config.js文件中
色阶说明
生成的调色板包含以下色阶:
- 50:最浅色调,适用于背景或高亮
- 100-400:浅色系列,适用于次要元素
- 500:主色调,通常与输入颜色最接近
- 600-900:深色系列,适用于文字或强调元素
- 950:最深色调,适用于深色背景或边框
每个色阶经过精心计算,确保在设计中具有良好的视觉层次和对比度。
配置代码示例
生成的代码可直接添加到 TailwindCSS 配置文件:
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
primary: {
50: '#fef2f2',
100: '#fee2e2',
500: '#ef4444',
900: '#7f1d1d',
950: '#450a0a'
}
}
}
}
}
使用场景
- 为新项目快速建立主题色系统
- 扩展现有项目的配色方案
- 探索不同颜色的调色板效果
- 保持设计系统的颜色一致性
注意事项
- 输入的颜色格式必须为有效的十六进制值(如 #ff0000)
- 生成的色阶会自动适配明暗变化,确保可用性
- 工具会智能匹配最接近的标准颜色名称,便于识别



