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 CSS 常用 50-950 的数字系统表达同一颜色的不同深浅级别，便于统一设计语言与组件状态（背景、文字、边框、悬停、强调等）。本工具可基于任意基准颜色快速生成一组接近 Tailwind 风格的色阶。
50-950 色阶说明
- 50-100：极浅色，常用于背景与 hover 背景
- 200-300：浅色，适合次要背景与弱化元素
- 400-500：中等色，500 通常可作为基准主色
- 600-700：深色，用于按钮/边框/强调文字
- 800-900：更深色，适合主文字或深色背景
- 950：最深色，用于特殊强调与对比
如何使用本工具
- 选择或输入基准颜色（建议接近 500 的视觉强度）
- 点击色块复制单个 HEX；或使用按钮复制全部颜色
- 复制 Tailwind 配置，粘贴到 tailwind.config.js 的 theme.extend.colors
- 复制 CSS 变量，粘贴到全局样式并用 var(--primary-500) 等引用
常见问题（FAQ）
基准颜色应该怎么选？
建议选择中等明度的颜色作为基准（接近 500 的观感）。过浅或过深的基准颜色会导致色阶跨度不理想。
生成结果会与 Tailwind 官方色板完全一致吗？
不会完全一致。本工具使用轻量算法快速生成近似的色阶，适合自定义品牌色与主题色；如需官方一致的色板请使用 Tailwind 默认颜色。
可以同时用于 Tailwind 配置和 CSS 变量吗？
可以。Tailwind 配置适合类名使用，CSS 变量适合运行时主题切换；两者可并存。