Tailwind v4 主题色生成器
输入一个主色，自动生成 Tailwind CSS 标准的 11 级色阶 (50-950)，支持导出为 @theme 配置代码。
基础颜色
H
217°
S
91%
L
60%
预设颜色
导出代码
@import "tailwindcss";
@theme {
--color-brand-50: #f3f6fc;
--color-brand-100: #e5edfb;
--color-brand-200: #c3d8f9;
--color-brand-300: #8db6f6;
--color-brand-400: #468af6;
--color-brand-500: #0b64f4;
--color-brand-600: #0453d2;
--color-brand-700: #0143ad;
--color-brand-800: #013384;
--color-brand-900: #002766;
--color-brand-950: #00173d;
}色阶预览
brand50#f3f6fc
hsl(217, 61%, 97%)
100#e5edfb
hsl(217, 71%, 94%)
200#c3d8f9
hsl(217, 81%, 87%)
300#8db6f6
hsl(217, 86%, 76%)
400#468af6
hsl(217, 91%, 62%)
500#0b64f4
hsl(217, 91%, 50%)
600#0453d2
hsl(217, 96%, 42%)
700#0143ad
hsl(217, 99%, 34%)
800#013384
hsl(217, 99%, 26%)
900#002766
hsl(217, 100%, 20%)
950#00173d
hsl(217, 100%, 12%)
色阶条
50
100
200
300
400
500
600
700
800
900
950
文字对比预览
色阶 50
#f3f6fc
The quick brown fox jumps over the lazy dog.
色阶 100
#e5edfb
The quick brown fox jumps over the lazy dog.
色阶 200
#c3d8f9
The quick brown fox jumps over the lazy dog.
色阶 300
#8db6f6
The quick brown fox jumps over the lazy dog.
色阶 400
#468af6
The quick brown fox jumps over the lazy dog.
色阶 500
#0b64f4
The quick brown fox jumps over the lazy dog.
色阶 600
#0453d2
The quick brown fox jumps over the lazy dog.
色阶 700
#0143ad
The quick brown fox jumps over the lazy dog.
色阶 800
#013384
The quick brown fox jumps over the lazy dog.
色阶 900
#002766
The quick brown fox jumps over the lazy dog.
色阶 950
#00173d
The quick brown fox jumps over the lazy dog.
说明
功能说明
- Tailwind CSS v4 默认使用 50-950 的色阶系统，并使用
@theme块配置 - 基于 HSL 色彩空间，从基础颜色生成 50-950 共 11 级色阶
- 色阶体系与 Tailwind CSS 默认色阶一致，可直接用于项目
- 支持导出为 Tailwind v4
@theme配置代码 - 内置 17 种预设颜色，一键应用常用品牌色
- 实时预览文字在各级色阶上的对比效果
使用技巧
- 点击左侧色块可打开系统颜色选择器
- 输入 HEX 值（如 #3b82f6）可精确指定颜色
- 填写主题名称后，导出代码中的变量名会自动替换
- 导出 Tailwind v4 格式时，使用
@theme指令配置自定义颜色 - 色阶条悬停可查看对应色阶编号，点击复制 HEX 值
- 文字对比预览可帮助你选择合适的文字颜色搭配