跳到主要内容

Tailwind CSS 颜色：v4 和 v3 完整调色板

Tailwind CSS 的全部颜色，从 50 到 950，附 OKLCH（v4）和 HEX（v3）官方值。点击任意色阶即可复制类名、CSS 变量或代码。

查看 UI 颜色
版本
复制为

Tailwind v4 新增：Mauve、Olive、Mist 和 Taupe，四种带色调的灰色。

每种颜色的数值

选择一种颜色，查看它的十一个色阶，包括类名、OKLCH、HEX、RGB 以及对比最佳的文字颜色。

Blue · Tailwind v4

色阶类名OKLCHHEXRGB文字
50Aa19.3:1
100Aa17.2:1
200Aa14.8:1
300Aa11.6:1
400Aa8.0:1
500Aa5.6:1
600Aa5.2:1
700Aa6.8:1
800Aa8.8:1
900Aa10.4:1
950Aa14.8:1

Tailwind v4 以 OKLCH 定义颜色，部分颜色超出 sRGB 范围。HEX 为最接近的 sRGB 颜色。

什么是 Tailwind CSS 调色板

Tailwind CSS 内置一套预定义调色板，按命名的色系（Slate、Red、Blue……）组织，每个色系有十一个色阶，从 50（最浅）到 950（最深）。这种编号方式已成为许多其他库采用的标准。

每种颜色通过 bg-blue-500 或 text-red-700 等类名使用。在上方表格中，你可以复制类名、CSS 变量，或 HEX、RGB、HSL、OKLCH 代码。

各个色阶该用在哪里

没有固定规则，但大多数用 Tailwind 构建的界面在每个色系内都遵循类似的模式：

50–100
背景. 柔和的表面、卡片和突出区域。
200–300
边框. 分隔线、输入框边框和禁用状态。
500–600
操作. 按钮、链接和激活元素。600 通常与白色文字对比更好。
700–900
文字. 同一色系浅色背景上的标题和正文。
950
深色模式. 带有色调的深色背景，而不是纯黑。

Tailwind v3 与 v4：颜色有哪些变化

编号和名称相同，但数值不同：v4 重新校准了整套调色板。因此本页分别展示每个版本的官方值。

blue-500 = oklch(62.3% 0.214 259.815)

Tailwind v4

  • 颜色以 OKLCH 定义，亮度步进更均匀。
  • 色调更鲜艳，适配广色域屏幕（Display P3）。
  • 每种颜色都有 CSS 变量：var(--color-blue-500)。
  • 新增四种带色调的灰色：Mauve、Olive、Mist 和 Taupe。

blue-500 = #3b82f6

Tailwind v3

  • 颜色以 HEX（sRGB）定义。
  • 22 个色系：5 种灰色和 17 种颜色。
  • 通过类名或 theme('colors.blue.500') 函数使用。
  • 仍是许多现有项目使用的版本。

如何在 CSS 中使用 Tailwind 颜色

除了类名，你还可以在自己的 CSS 中使用调色板中的任何颜色。v4 中它们是普通的 CSS 变量；v3 中通过 theme() 函数访问。

Tailwind v4

@import "tailwindcss";

.card {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

@theme {
  --color-brand-500: oklch(62.3% 0.214 259.815);
}

Tailwind v3

.card {
  background: theme('colors.blue.50');
  border: 1px solid theme('colors.blue.200');
  color: theme('colors.blue.900');
}

在 v4 中添加自定义颜色，只需在 @theme 中用 --color- 前缀声明，就会自动生成对应类名（bg-brand-500、text-brand-500……）。

常见问题

名称和编号相同，但 v4 用 OKLCH 重新校准了调色板：色调稍微更鲜艳，亮度步进更均匀。因此 blue-500 的 HEX 在两个版本中并不相同。v4 还新增了四种灰色：Mauve、Olive、Mist 和 Taupe。

这是 Tailwind 的标准色阶：50 是最浅的色阶（接近白色），950 是最深的（接近黑色），中间的步进旨在让整个界面的背景、文字、边框和状态保持一致。

在 Tailwind v4 中，每种颜色都可作为 CSS 变量使用，例如 var(--color-blue-500)。在 v3 中，在 CSS 文件里使用 theme('colors.blue.500') 函数。

Tailwind v4 以 OKLCH 定义颜色，其中一些超出了 HEX 代码能表示的 sRGB 范围。这种情况下我们显示最接近的 HEX；如果你的项目支持 OKLCH，请使用该值获得准确颜色。

每种颜色的“文字”列会显示白色还是黑色对比更好，并给出比值。作为参考，普通文本至少需要 4.5:1；你可以在对比度检查器中检查任何组合。

OKLCH 是一种按感知计算亮度的色彩空间：亮度值相同的两种颜色在人眼看来一样亮。因此得到的色阶比基于传统 RGB 的更均匀。