Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
Tailwind色板生成器 - 在线Tailwind颜色系统工具
生成Tailwind风格的50-950色阶，一键导出Tailwind配置。基于基准颜色自动生成完整的色阶系统，支持自定义亮度调整。
生成的色阶
50
150
250
350
450
550
650
750
850
950
1050
Tailwind配置
colors: {
primary: {
'100': '#00002A',
'200': '#00005D',
'300': '#001C90',
'400': '#084FC3',
'500': '#2269DD',
'600': '#3B82F6',
'700': '#559CFF',
'800': '#6EB5FF',
'900': '#88CFFF',
'1000': '#A1E8FF',
'1100': '#BAFFFF'
}
}CSS变量
:root {
--color-100: #00002A;
--color-200: #00005D;
--color-300: #001C90;
--color-400: #084FC3;
--color-500: #2269DD;
--color-600: #3B82F6;
--color-700: #559CFF;
--color-800: #6EB5FF;
--color-900: #88CFFF;
--color-1000: #A1E8FF;
--color-1100: #BAFFFF;
}# 什么是Tailwind色板？
Tailwind CSS使用50-950的数字系统来表示颜色的不同深浅级别，每个级别代表不同的明度和饱和度。 这个系统基于人眼对颜色感知的非线性特性，使得设计系统更加统一和协调。 通过本工具，您可以基于任意基准颜色快速生成符合Tailwind规范的完整色阶。
# 色阶说明
- 50-100: 极浅色，用于背景、悬停状态
- 200-300: 浅色，用于次要背景、禁用状态
- 400-500: 中等色，500通常是基准颜色，用于常规UI元素
- 600-700: 深色，用于文字、边框
- 800-900: 极深色，用于主要文字、深色背景
- 950: 最深色，用于特殊强调场景
# 如何使用本工具
- 选择或输入您想要作为基准的颜色（建议使用500级别的颜色）
- 系统会自动生成从50到950的完整色阶
- 点击任意色块可复制该颜色的十六进制值
- 点击"复制配置"获取Tailwind配置代码
- 将配置粘贴到tailwind.config.js中即可使用
# 常见问题 (FAQ)
如何选择合适的基准颜色？
建议选择中等明度的颜色作为基准（相当于Tailwind的500级别）。 如果您的颜色太浅或太深，生成的色阶可能不够理想。理想情况下，基准颜色的HSL亮度应该在40-60之间。
生成的色阶与官方Tailwind颜色完全一致吗？
本工具使用简化算法生成色阶，结果与Tailwind官方颜色类似但不完全相同。 如果需要完全匹配官方颜色，建议直接使用Tailwind提供的默认色板。 本工具更适合为自定义品牌色生成符合Tailwind风格的色阶。
可以在CSS变量中使用吗？
完全可以。我们提供了CSS变量格式的输出，您可以直接将生成的变量添加到CSS文件中， 然后使用var(--color-500)等方式引用。这种方式与Tailwind配置互不冲突。