TailwindCSS 调色板生成

输入任意颜色自动生成完整的 TailwindCSS 调色板配置，快速应用到项目中。

功能特点

• 输入十六进制颜色值自动生成 TailwindCSS 颜色调色板
• 生成从 50 到 950 的完整色阶系统
• 智能识别颜色名称，匹配最接近的标准色系
• 实时预览每个色阶效果和对应颜色值
• 自动生成可直接使用的 TailwindCSS 配置代码

使用方法

1. 在颜色输入框中输入或选择十六进制颜色值（例如 #cb0101)
2. 系统自动生成该颜色的完整调色板
3. 查看左侧色阶预览，了解每个级别的视觉效果
4. 右侧显示生成的 TailwindCSS 配置代码
5. 点击代码面板的复制按钮，将配置复制到剪贴板
6. 粘贴代码到项目的 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)
• 生成的色阶会自动适配明暗变化，确保可用性
• 工具会智能匹配最接近的标准颜色名称，便于识别