Tailwind 色阶生成器。

输入一个颜色，得到 Tailwind 风格的 11 级色阶（50 到 950），像 Tailwind v4 自己的调色板一样在 OKLCH 里计算。你输入的颜色原样保留，放在明度最接近它的那一级。全程在浏览器里运行，你输入的内容不会上传。

颜色颜色名称

你的颜色在第 500 级。

50#F1F6FD
100#E0EBFB
200#C6DAFA
300#9EC2FB
400#659FFD
500#3B82F6
600#2873EA
700#215FC3
800#1E50A0
900#1F4482
950#0C2246

@theme {
  --color-brand-50: oklch(0.971 0.011 256.695);
  --color-brand-100: oklch(0.937 0.025 257.646);
  --color-brand-200: oklch(0.884 0.049 259.79);
  --color-brand-300: oklch(0.809 0.09 259.44);
  --color-brand-400: oklch(0.705 0.151 259.626);
  --color-brand-500: oklch(0.623 0.188 259.815);
  --color-brand-600: oklch(0.578 0.195 259.687);
  --color-brand-700: oklch(0.505 0.169 259.846);
  --color-brand-800: oklch(0.445 0.141 259.626);
  --color-brand-900: oklch(0.395 0.113 260.11);
  --color-brand-950: oklch(0.257 0.073 259.785);
}

在你的浏览器里运行，放进来的内容不会上传，也不会保存。

怎么生成 Tailwind 色阶

输入你的颜色。 点色块选色，或者直接输入 HEX、rgb()、hsl()、oklch() 格式的颜色，默认是 #3B82F6。
给色阶起个名字。 名字会成为每个变量名的一部分，比如 --color-brand-500，默认是 brand。名字会转成小写，除字母、数字和连字符以外的字符都会变成连字符。
查看色阶。 11 个色块从最浅的 50 到最深的 950，每个都标出 HEX 色值和复制按钮。你的颜色会被框出来，页面也会告诉你它在第几级，比如「你的颜色在第 500 级。」
复制代码。 「Tailwind v4 @theme」和「CSS 变量」两个标签，都用 oklch() 值列出全部 11 级的 --color-<名字>-<级数>，前者放在 @theme 里，后者放在 :root 里。

色阶是怎么算出来的

明度沿用 Tailwind v4 自己调色板的曲线，取自它的红色色阶：50 级约 0.97，500 级约 0.64，950 级约 0.26。
色度（颜色有多鲜艳）沿用同一个色阶的曲线，在 600 级达到峰值，再按你的颜色的色度等比缩放。
色相每一级都保持你的颜色的色相。
你的颜色原样放在明度最接近它的那一级。默认的 #3B82F6 落在 500 级。
sRGB 显示不了的级别会降低色度拉回范围内，所以色块上的每个 HEX 色值，屏幕都能真实显示。

在 Tailwind 和 Codex 里使用

在 Tailwind v4 项目里，把 @theme 代码块粘贴到含有 @import "tailwindcss" 的那个 CSS 文件里。每个 --color-brand-* 变量都会变成类名：bg-brand-500、text-brand-700、border-brand-200 等等。

常见的分工方式：50 到 200 做浅色底和背景，500 到 600 做按钮和链接，700 到 900 做浅色背景上的文字，950 做最深的文字。哪一级够深、能放白色文字，要看色相，所以每一组搭配都用对比度检测查一下。

想让 Codex 到处都用这套色阶，又不跑偏，把代码块和规则一起给它：

加入色阶

把这套色阶加到我们 Tailwind v4 项目的全局 CSS 文件里；如果已经有 @theme 代码块，就加在里面：[粘贴 @theme 代码块]。主按钮和链接用 brand-600，悬停用 brand-700，浅色底用 brand-50，最深的文字用 brand-950。不要再加其他品牌色，并检查这些搭配上的文字对比度至少达到 4.5:1。然后在 DESIGN.md 里记下每一级用在哪里。

常见问题

免费吗？

免费，不用注册，想生成多少套色阶都可以。

我输入的颜色会上传吗？

不会。色阶在你的浏览器里生成，不会发送，也不会保存。网站只统计工具被用过，不会记录你输入的颜色。

它和 Tailwind 自带的颜色一样吗？

不完全一样。它把 Tailwind v4 红色色阶的明度曲线用到每一种色相上，所以各级之间间距均匀、看起来很熟悉，但 Tailwind 自带的每种颜色都是单独调过的。生成的蓝色和 Tailwind 的蓝色神似，但不会完全相同。

能用在 Tailwind v3 吗？

「Tailwind v4 @theme」标签是给 Tailwind v4 用的。v3 的话，把色块上的 HEX 色值复制到 tailwind.config 的 colors 里，起个名字，比如 brand，用级数做键。