生成的色阶和 Tailwind 自带的颜色有多接近？

曲线直接取自 Tailwind v4 的默认色板数据。用 Tailwind 自己的 blue-500、red-500 作为基色锁定在 500 时，生成结果与原色板的平均色差（OKLab ΔE）大约在 0.003～0.015 之间，肉眼几乎看不出区别。实际品牌色往往彩度和亮度不同，生成结果会保留你的色相和彩度特征，同时让深浅分布与 Tailwind 原生色板保持一致。

基色应该放在 500 还是 600？

选“自动”时，工具会把基色放在亮度最接近的那一级，这样整套色阶最自然。如果设计规范要求主按钮用 brand-600，就把基色锁定在 600，该级会严格等于你的原色，其余各级相应调整。很亮的颜色（如浅黄）锁定在深色级别时，上方可用的亮度空间很小，浅色几级会比较接近。

Tailwind v3 和 v4 的配置有什么不同？

v3 在 tailwind.config.js 的 theme.extend.colors 里定义颜色对象，工具导出的是十六进制值；v4 改为在 CSS 中用 @theme 声明 --color-brand-500 这样的变量，官方色板使用 oklch()，所以 v4 导出也使用 oklch() 值。两种方式定义后都可以直接使用 bg-brand-500、text-brand-700 等类名。

对比度标记 AA、AA18、AAA 是什么意思？

这是 WCAG 2.x 的文字对比度要求：AA 表示对比度 ≥ 4.5，可用于正文；AA18 表示 ≥ 3，只适合 18pt（约 24px）以上或 14pt 粗体的大号文字以及图标等界面元素；AAA 表示 ≥ 7。每个色块下方分别显示该颜色与白色、黑色的对比度，例如某一级在白底上达到 AA，就可以作为白色背景上的正文颜色。

🟪

🟪Tailwind 色阶生成器 - 一个颜色生成 50～950 色板（OKLCH）

用 Tailwind 做项目时，品牌色通常只有一个，但组件需要 bg-brand-50 到 bg-brand-950 一整套深浅变化。这个工具从一个基色出发生成 11 级色阶：先把颜色转换到感知均匀的 OKLCH 色彩空间，再参考 Tailwind v4 默认色板（取自 tailwindcss/theme.css）的亮度与彩度分布——默认按色相在最接近的两个内置色板之间插值，所以黄色系会更亮、紫色系更深，与 Tailwind 原生色板的观感一致；低彩度的灰色会自动过渡到 slate、zinc 等中性色的曲线。基色可以自动放在亮度最接近的一级，也可以锁定在 500、600 等指定位置并保证该级就是你的原色；可以叠加两端的色相偏移，或跟随 Tailwind 自带的色相漂移。超出 sRGB 的颜色会保持色相降低彩度。每一级都显示与白色、黑色的 WCAG 对比度和 AA / AAA 标记，方便挑选文字与背景组合，并列出最接近的 3 个内置 Tailwind 色板作参考。可以同时生成多个命名颜色，一次导出 Tailwind v3 的 tailwind.config.js、v4 的 @theme（oklch() 值）、CSS 变量、SCSS 变量与 map 或 JSON。

免费 · 无需注册 · 浏览器本地处理最后更新：2026-10-26

正在加载工具...

如何使用Tailwind 色阶生成器

1输入颜色名称和基色（HEX、rgb()、hsl()、oklch() 都可以），可添加多个颜色
2选择基色所在的级别、亮度曲线和色相偏移，查看每一级的对比度
3选择导出格式（Tailwind v4 / v3、CSS 变量、SCSS、JSON），复制或下载

常见问题

生成的色阶和 Tailwind 自带的颜色有多接近？: 曲线直接取自 Tailwind v4 的默认色板数据。用 Tailwind 自己的 blue-500、red-500 作为基色锁定在 500 时，生成结果与原色板的平均色差（OKLab ΔE）大约在 0.003～0.015 之间，肉眼几乎看不出区别。实际品牌色往往彩度和亮度不同，生成结果会保留你的色相和彩度特征，同时让深浅分布与 Tailwind 原生色板保持一致。
基色应该放在 500 还是 600？: 选“自动”时，工具会把基色放在亮度最接近的那一级，这样整套色阶最自然。如果设计规范要求主按钮用 brand-600，就把基色锁定在 600，该级会严格等于你的原色，其余各级相应调整。很亮的颜色（如浅黄）锁定在深色级别时，上方可用的亮度空间很小，浅色几级会比较接近。
Tailwind v3 和 v4 的配置有什么不同？: v3 在 tailwind.config.js 的 theme.extend.colors 里定义颜色对象，工具导出的是十六进制值；v4 改为在 CSS 中用 @theme 声明 --color-brand-500 这样的变量，官方色板使用 oklch()，所以 v4 导出也使用 oklch() 值。两种方式定义后都可以直接使用 bg-brand-500、text-brand-700 等类名。
对比度标记 AA、AA18、AAA 是什么意思？: 这是 WCAG 2.x 的文字对比度要求：AA 表示对比度 ≥ 4.5，可用于正文；AA18 表示 ≥ 3，只适合 18pt（约 24px）以上或 14pt 粗体的大号文字以及图标等界面元素；AAA 表示 ≥ 7。每个色块下方分别显示该颜色与白色、黑色的对比度，例如某一级在白底上达到 AA，就可以作为白色背景上的正文颜色。