色阶生成

Tint & Shade Scale

从一个颜色生成 50–950 的明度色阶，步进在感知上均匀，可直接当设计变量用。

从一个颜色构建 50 到 950 的色阶，按设计系统想要的方式。明度目标是 Tailwind 自己各彩色色系的均值，从安装的包里测出来而不是手挑的，所以结果落在你的眼睛已经预期每一级所在的位置。一个滑块在这条熟悉的曲线和一条等距曲线之间移动。

🔒 完全在你的浏览器里运行colorscaletokenstailwind

基准色

颜色

它的色相和彩度是色阶的种子；它的明度决定哪一档被标成你挑的那个。

色阶

贴合实测曲线的程度: 100%为 0 时色阶是从 0.97 到 0.25 的一条直线，间距更均匀，但也更陌生。到 100% 就跟大家脑子里已经有的那条曲线一样了。色相漂移: 0°Tailwind 自己的色系就在漂移：红色从 50 档的 17° 一路走到 950 档的 26°，因为暗红色稍微暖一点更好看。峰值彩度: 取自基准色

把每一档都留在 sRGB 里关掉就把超出色域的档位原样留着，P3 屏幕显示得出来，十六进制写不出来。

每一档的明度目标不是在这里定的，是从装好的 Tailwind 包里量出来的各个有彩色系的平均值。

深色模式

推导一套深色色阶

50 档变成 950 档，100 变成 900，以此类推。令牌名字的含义没变——500 仍然是中间调——照着这套色阶写的组件一点都不用改。

浅色

100

200

300

400

500

600

700

800

900

950

导出

前缀

:root {
  --brand-50: oklch(97.72% 0.0107 259.81);
  --brand-100: oklch(95.04% 0.0236 259.81);
  --brand-200: oklch(90.55% 0.0458 259.81);
  --brand-300: oklch(84.05% 0.0793 259.81);
  --brand-400: oklch(75.35% 0.1267 259.81);
  --brand-500: oklch(68.27% 0.1677 259.81);
  --brand-600: oklch(59.78% 0.1861 259.81);
  --brand-700: oklch(51.49% 0.1655 259.81);
  --brand-800: oklch(44.61% 0.1391 259.81);
  --brand-900: oklch(39.46% 0.1128 259.81);
  --brand-950: oklch(27.79% 0.0752 259.81);
}

要的不是一个色相的色阶，而是一组色相？配色方案生成会按配色规则给你做一组。想找出跟这些颜色最接近的 Tailwind 令牌，Tailwind 最接近色查找会用 ΔE 量给你看。

怎么用

填入基色
它的色相和彩度是色阶的种子。它的明度决定哪一级带上圆环——离你带来的颜色最近的那一级。
决定你想要曲线多熟悉
在 100% 时各级落在 Tailwind 放的位置，那是团队里每个人脑子里已经有的东西。在 0 时色阶是从 0.97 到 0.25 的一条直线——更均匀，也更陌生。没有正确答案；和现有产品对齐是留在 100% 的通常理由。
深色端看着不对就加色相漂移
真实的色系会漂移：Tailwind 的 red 从 50 级的 17° 走到 950 级的 26°，因为深红略微偏暖读起来更好。几度通常就够；滑块两个方向都到 40。
决定是否留在 sRGB 之内
打开时，每一级都是任何屏幕能显示的颜色，十六进制是精确的。关闭时，饱和色相的中间几级保留彩度，P3 显示器显示它们，十六进制变成近似——溢出的级会被标出。
导出为变量、Tailwind 主题或 JSON
前缀由你定。JSON 形式还带着明度锚点，下游有东西需要重建同一条色阶时有用。