首页Tailwind色板生成器

Tailwind色板生成器

输入基准颜色生成50-950色阶,一键导出Tailwind配置与CSS变量,适用于品牌色与主题开发

生成设置

支持 #RGB / #RRGGBB,色块可点击复制

仅保留字母/数字/_/-,用于配置 key 与 CSS 变量前缀

生成的色阶

点击任意色块复制 HEX

50
100
200
300
400
500
600
700
800
900
950

导出内容

Tailwind 配置
colors: {
  primary: {
    50: '#D4FFFF',
    100: '#AEF5FF',
    200: '#88CFFF',
    300: '#6EB5FF',
    400: '#559CFF',
    500: '#3B82F6',
    600: '#2269DD',
    700: '#084FC3',
    800: '#00299D',
    900: '#000377',
    950: '#000050',
  }
}
CSS 变量
:root {
  --primary-50: #D4FFFF;
  --primary-100: #AEF5FF;
  --primary-200: #88CFFF;
  --primary-300: #6EB5FF;
  --primary-400: #559CFF;
  --primary-500: #3B82F6;
  --primary-600: #2269DD;
  --primary-700: #084FC3;
  --primary-800: #00299D;
  --primary-900: #000377;
  --primary-950: #000050;
}
全部颜色
50: #D4FFFF
100: #AEF5FF
200: #88CFFF
300: #6EB5FF
400: #559CFF
500: #3B82F6
600: #2269DD
700: #084FC3
800: #00299D
900: #000377
950: #000050


说明文档

关于 Tailwind 调色板生成器

该工具用于根据一个基础色快速生成 Tailwind 风格的 50-950 色阶,并同步输出 Tailwind 配置片段与 CSS 变量。

核心功能

  • 基础色输入:支持颜色选择器和 HEX 手动输入。
  • 自动色阶生成:生成标准化浅到深的 11 个色阶值。
  • 命名规范化:可设置调色板名称并自动转换为安全键名。
  • 多格式输出:提供 Tailwind colors 配置、CSS 变量和完整色值列表。
  • 快捷复制:支持复制单色、整组色板或指定输出片段。

使用说明

  1. 选择基础色并输入调色板名称。
  2. 检查生成的 50-950 色阶是否满足品牌视觉。
  3. 复制 Tailwind 配置或 CSS 变量到项目。
  4. 在组件中按统一命名调用颜色。

适用场景

  • 设计系统初始化与主题色迭代。
  • Tailwind 项目快速扩展品牌色。
  • 需要同时维护 Tailwind 与原生 CSS 变量的项目。

常见问题

输入 HEX 后提示无效怎么办?

请确保格式为 3 位或 6 位十六进制颜色(含 #),例如 #3B82F6

生成结果和设计稿不完全一致?

工具基于算法推导色阶,适合作为起点。最终可按设计规范微调关键档位。