色阶生成器

把一个颜色变成 Tailwind 风格的 50–950 色阶，以及明色、暗色和灰调。在 OKLCH 和 sRGB 中计算，可导出为 CSS 变量、Tailwind 或 JSON。

色阶设置

基础色

#3b82f6rgb(59 130 246)hsl(217 91% 60%)oklch(62.3% 0.188 259.8)

明色 / 暗色 / 灰调步数

导出

格式

令牌名称

50–950 色阶以你的颜色作为 500，并调整其他级别的 OKLCH 亮度与彩度，色相保持不变。

50–950 色阶

#eef5ff

oklch(96.8% 0.015 257.2)

#e1edff

oklch(94.3% 0.028 258.4)

#c9deff

oklch(89.6% 0.051 259.4)

#a3c6ff

oklch(82.2% 0.089 260)

#73a8ff

oklch(73.2% 0.139 259.9)

#3b82f6

oklch(62.3% 0.188 259.8)

#266ad8

oklch(54.6% 0.182 259.9)

#1554b8

oklch(47% 0.17 260)

#074095

oklch(39.5% 0.15 259.7)

#002d72

oklch(32% 0.128 259.6)

#012156

oklch(26.5% 0.103 259.7)

明色、暗色与灰调

明色（与白色混合）

暗色（与黑色混合）

灰调（与灰色 #808080 混合）

按等间距在 sRGB 中混合，与 color-mix(in srgb, …) 相同；点击颜色即可复制。

导出代码

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

什么是色阶生成器？

把单个颜色扩展为类似 Tailwind 调色板的 11 级 50–950 色阶，以及若干行明色（与白色混合）、暗色（与黑色混合）和灰调（与灰色混合）。所有数值都可以单独复制，也可以导出为 CSS 变量、SCSS、Tailwind v3/v4 或 JSON。

如何使用色阶生成器

输入“基础色”。
查看 50–950 色阶；你的颜色位于第 500 级。
为混合行设置“明色 / 暗色 / 灰调步数”。
点击任意色块即可复制。
选择导出“格式”和“令牌名称”，并复制色阶。

示例

输入

#3b82f6, CSS variables, token name brand

输出

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

何时使用色阶生成器

适合根据一个品牌色为设计系统或 Tailwind 主题构建完整的色阶，或得到悬停/激活状态的变体。该色阶是合理的算法起点；用于正式的设计系统时，你可能仍需微调个别级别，并检查用于文字时的对比度。

色阶生成器的工作原理

对于色阶，基础色被转换为 OKLCH，并在 500 级保持不变。较浅的级别把明度向 0.985 移动固定比例（50–400 分别为 95%、88%、75%、55%、30%）并降低色度；较深的级别向 0.2 移动（600–950 为 18%–85%），色度略有降低。色相保持不变，每一级都映射到 sRGB 色域内。明色、暗色和灰调是在伽马编码的 sRGB 中的混合，类似 color-mix(in srgb, …)，按 1/(n+1) 的等间隔取值。