颜色色阶生成器：从一个颜色构建完整调色板

每个设计系统最终都需要一套颜色刻度——每种品牌颜色从浅到深的完整范围。背景色、边框色、文字色、悬停状态、焦点环、禁用状态都需要它。靠手动一步步挑选色阶既繁琐，凭眼感挑的结果也往往参差不齐——有些跳跃太大，有些又过于细微。

颜色色阶生成器接受一个基础颜色，在大约一秒内生成一套步骤均匀的完整调色板。本文解释它的工作原理、如何在项目中使用输出结果，以及这种方法真正的局限性所在。

色调和明度色究竟是什么

在深入工具之前，先理清术语，因为「色阶」这个词用得比较随意。

色调（Shades） 是颜色变深的变体——技术上是颜色与黑色混合。明度色（Tints） 是颜色变浅的变体——颜色与白色混合。两者合在一起，从接近黑色的深色调到接近白色的淡色调，构成完整范围。

在实践中，大多数设计系统直接使用这个组合范围，统称为「颜色刻度」或「颜色调色板」。重要的不是叫什么名字，而是结果：一组从浅到深协调一致的颜色，可以在整个 UI 中统一使用。

典型结构如下：

步骤	用途
50	非常浅的背景、白色背景上的悬停状态
100	浅色背景、选中状态背景
200	浅色背景上的边框、细微填充
300	禁用文字、占位符文字
400	次要文字、静音标签
500	主色——通常就是基础颜色本身
600	按钮悬停状态、稍深的主色
700	按下状态、更深的交互元素
800	浅色背景上的深色文字
900	非常深的颜色，可作标题文字
950	接近黑色，深色模式基础色

Tailwind 推广了这套 11 步系统（50 到 950），它已经成为足够普及的标准，即使你不使用 Tailwind 也值得遵循。

生成原理：HSL 调整

生成器在 HSL 色彩空间中工作——色相（Hue）、饱和度（Saturation）、亮度（Lightness）。如果你不熟悉 HSL，简单解释：色相是颜色角度（0–360，0 是红色，120 是绿色，240 是蓝色），饱和度是颜色强度（0% 是灰色，100% 是完全鲜艳），亮度从 0%（黑色）到 100%（白色）。

给定一个基础颜色，工具会：

将基础颜色转换为 HSL
保持色相不变（整个刻度都是同一个颜色家族）
生成横跨一定范围的亮度值——最浅步骤大约 95%，最深步骤大约 10%
可选地在极端值处进行微小的饱和度调整以补偿视觉错觉

最后一点值得说明。人类的色彩感知是非线性的。在纯 HSL 中，90% 亮度的浅蓝色往往看起来几乎是白色，完全失去颜色——在高亮度值下，饱和度会在感知上「消失」。许多专业调色板生成器会通过在浅色端稍微提高饱和度来保持色相可见，在深色端降低饱和度来避免显得浑浊，以此作为补偿。

结果是一套在人眼看来步骤均匀的调色板，而不只是数学上均匀分布。

为什么要用 50–950 规范

Tailwind CSS 功不可没。在 Tailwind 之前，每个人用不同的命名约定：「浅蓝」「blue-lighter」「blue-dark」「blue-darkest」——意味着每个项目都有自己特立独行的系统，无法在项目间通用。

数字系统（50、100、200……900、950）有几个实际优势：

容易添加步骤。 如果需要 200 和 300 之间的颜色，加一个 250 就行。有自然的位置放它。

一眼就能看出意图。 开发者看到 color-100 立刻知道这是浅色背景色。color-900 显然是深色文字的范围。数字本身就带有语义信息，不需要描述性名称。

与工具兼容。 Figma 变量、CSS 自定义属性、JavaScript 主题对象——都能自然地与数字刻度配合。因为 Tailwind 用同样的数字，设计师和开发者说同一种语言。

不鼓励过度细化。 当颜色有「primary-blue」「primary-blue-slightly-lighter-for-hover」这样的名字时，团队往往会不断添加更多命名变体。数字系统会引导你一致地使用已定义的刻度。

在项目中使用输出结果

生成器提供几种输出格式，下面分别说明用法。

CSS 自定义属性

CSS 变量输出看起来像这样：

:root {
  --color-50: #eff6ff;
  --color-100: #dbeafe;
  --color-200: #bfdbfe;
  --color-300: #93c5fd;
  --color-400: #60a5fa;
  --color-500: #3b82f6;
  --color-600: #2563eb;
  --color-700: #1d4ed8;
  --color-800: #1e40af;
  --color-900: #1e3a8a;
  --color-950: #172554;
}

把这段内容粘贴到主 CSS 文件的 :root 块中，变量就在样式表的任何地方都可用：

.button-primary {
  background-color: var(--color-500);
  border-color: var(--color-600);
  color: white;
}

.button-primary:hover {
  background-color: var(--color-600);
  border-color: var(--color-700);
}

这种方式对主题切换特别有用。如果把品牌颜色定义为 CSS 自定义属性，切换主题只需在 [data-theme="dark"] 或 .dark-mode 选择器中覆盖这些值即可。

Tailwind CSS 配置

如果你在使用 Tailwind，可以直接把调色板放进 tailwind.config.js 或 tailwind.config.ts：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          // ... 以此类推
          950: '#172554',
        },
      },
    },
  },
}

这样就解锁了品牌颜色的完整 Tailwind 工具类系统：bg-brand-100、text-brand-700、border-brand-300、hover:bg-brand-600 等等全部可用。你的自定义颜色与 Tailwind 内置调色板颜色行为完全一致。

JavaScript/TypeScript 对象

对于组件库或设计令牌，JavaScript 对象通常比原始 CSS 更实用。你可以直接在组件代码中导入颜色值，传递给 styled-components，或与 CSS-in-JS 库配合使用。

用颜色刻度构建设计系统

一个设计系统通常需要至少三四套颜色刻度：

主色：你的主要品牌颜色
中性色/灰色：用于文字、背景、边框——通常是略带暖色或冷色调的灰色，而非纯中性
语义颜色：成功（绿色）、警告（琥珀色/黄色）、错误（红色）、信息（蓝色）

分别把每种颜色跑一遍色阶生成器，统一命名，你就有了设计系统的颜色基础。

典型的使用模式：

primary-50、primary-100 → 背景色、选中状态填充
primary-200、primary-300 → 细微边框、标签、徽章
primary-500、primary-600 → 交互元素、按钮、链接
primary-700、primary-800 → 按下状态、深色交互元素
neutral-100 到 neutral-900 → 页面背景到正文文字

有了这套基础，每个组件都能从调色板中取色，不再需要随意挑选颜色。在大型代码库中保持一致性也容易得多。

与颜色调色板生成器的对比

网站还有一个颜色调色板生成器，两者很相似，值得说清楚区别。

颜色调色板生成器 通常生成一组互补或和谐的颜色——类似色、三角色、分裂互补色等配色方案。你给它一个颜色，它建议其他搭配得好的颜色。更侧重色彩理论，帮你找到好的颜色组合。

颜色色阶生成器 接受一个颜色，给你这个颜色从浅到深的完整范围。不是寻找其他颜色——而是获取你已经选好的颜色的所有色阶。

实际操作中，两者可以配合使用：先用调色板生成器确定品牌颜色组合，再用色阶生成器为每种颜色分别构建完整刻度。

值得了解的局限性

用过足够多类似工具，我清楚哪里容易翻车。以下是需要注意的点。

纯黑和纯白会生成无意义的调色板。 输入 #000000（纯黑）或 #FFFFFF（纯白），生成器没有色相信息可用，整个调色板只是一个灰度。这技术上是正确的，但几乎不是你想要的。对于中性色，使用至少有少量色相和饱和度的颜色——比如略带暖色调的灰色（#f5f0eb），会产生比纯白有趣得多的中性刻度。

饱和度极低的颜色看起来平淡。 一个已经接近灰色的颜色（比如 hsl(220, 8%, 50%)）不会产生有活力的深浅变化。浅色端几乎是白色，深色端几乎是黑色，中间可见的差异非常少。这不是 bug——只是低饱和度颜色的本质。如果调色板看起来平淡，试试更高饱和度的基础色。

生成的调色板是起点，不是终点。 基于 HSL 的生成方法系统高效，但不了解你的具体语境。某些生成的浅色可能对文字没有足够的对比度。某些深色在特定场景可能看起来有些偏差。务必在真实 UI 中验证，并用对比度检查器检验文字与背景的组合。

专业设计系统更在意感知均匀性。 Tailwind v3 的调色板是设计师手工调整的，不是自动生成的。Radix Colors 使用 OKLCH（一种感知均匀色彩空间），比 HSL 在视觉上步骤更均匀。色阶生成器给你一个很好的起点，但对于生产规模的设计系统，你可能需要手工微调极端值。

CSS 变量 --color-500 是通用名称。 工具输出的变量名如 --color-500。如果项目中有多套颜色刻度，需要重命名：--brand-500、--error-500、--neutral-200 等。不要把多个调色板不加命名空间地倒入 :root，否则它们会互相覆盖。

颜色工作相关工具

色阶生成器融入更广泛的颜色工作流：

颜色选择器：可视化选取基础颜色并获取其十六进制或 HSL 值，然后粘贴到色阶生成器。
颜色调色板生成器：先找到和谐的颜色组合，再为每种颜色分别生成色阶。
颜色转换器：如果需要把生成的十六进制值转换为 HSL 或 RGB，在特定场景使用。
CSS 渐变生成器：有了色阶，相邻步骤之间的渐变效果往往很好看——渐变工具可以直接组合和预览。

实际案例：为 Tailwind 添加自定义颜色

下面是一个为 Tailwind 项目添加自定义品牌颜色的完整流程：

你选定了品牌颜色：#0D6EFD（一个鲜明的蓝色）。
打开 /tools/color-shades-generator 并粘贴 #0D6EFD。
工具生成完整的 50–950 刻度。
复制 Tailwind 配置格式的输出。
添加到 tailwind.config.ts 的 theme.extend.colors.brand 下。
现在可以用 bg-brand-500 作为按钮背景，text-brand-700 作为深色文字，bg-brand-50 作为白色界面上的悬停背景，ring-brand-300 作为焦点环。

没有生成器，你得手动挑选全部 11 个色阶并希望它们看起来协调。有了它，整个过程只需两分钟左右。

总结

从头构建颜色刻度是那种看起来简单实则不然的任务。让步骤在视觉上感觉均匀、在不显得单调的情况下保持色相一致、确保极端值真正可用——这些都比每步固定加深一定量的十六进制值需要更多心思。

颜色色阶生成器自动处理所有这些，并提供多种格式的 CSS 就绪输出。它是一个扎实的 80% 解决方案，覆盖大多数实际项目，即使你计划之后手工微调，它也是正确的起点。

如果你在构建设计系统，把它与颜色调色板生成器结合来选取颜色，再用颜色转换器验证格式，就能快速建立专业感强的颜色基础。