明暗色调生成器，免费

选择一种颜色，生成由更浅到更深的完整色阶。点击色块即可复制其值。

10

淡色（更浅）

底色

暗色（更深）

淡色与暗色

淡色（tints）通过在颜色中加入白色得到，使其逐步变浅。暗色（shades）通过加入黑色得到，使其变深。两者结合形成完整的色阶，非常适合界面设计、渐变、悬停状态和无障碍色彩系统。

常见问题

如何使用这些色调？

浅色调可用于背景、悬停状态和边框。深色调可用于文字、激活状态和强调。点击「复制全部为 CSS 变量」即可获得可直接使用的 CSS 片段。

可以单独复制颜色吗？

可以！点击任意色块即可将其 HEX 值复制到剪贴板。

色调、阴影与中间调：正式定义

三个术语常被混用；古典色彩理论对其有精确区分：

此生成器生成色调（比基础色浅）和阴影（比基础色深）。中间调（加灰而非加白或加黑）适合柔和、精致的调色板（如1970年代室内设计配色体系），但在常规UI工作中较少用到。

为何现代设计系统采用数字比例尺

Tailwind CSS推广了每种颜色的50-100-200-…-900-950数字比例尺，其中「500」档按惯例被视为基准色。Material Design采用并行的50-100-…-900体系；Bootstrap 5使用100-…-900；IBM Carbon每个色板使用10档。共同理念：单一品牌色通常远不够用，UI需要一致的变体来处理悬停状态、背景、边框、焦点环、禁用状态、徽标和深色模式等效色。可预测的数字比例尺能以跨组件可移植、品牌演进时可重构、代码库中任何人都能发现的方式提供这些变体。

系统每色阶数基准阶
Tailwind CSS v3+11 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950)500
Material Design 313 tonal (0, 10, 20, …, 100)40
Bootstrap 59（100、200、…、900）加基础色500
IBM Carbon每个色卡 10 个60

不同算法如何计算比例尺

计算色调/阴影比例尺有三种常用方式，产生不同的视觉效果：

如果您的比例尺看起来「单调」（黄色档位褪色、蓝色档位都显示为同一种深蓝），几乎总是因为底层算法基于HSL而非OKLCH。现代CSS（CSS Color Module Level 4）直接提供了oklch()、lab()和color-mix(in oklch, …)，无需任何外部工具即可轻松实现视觉均匀的比例尺。

使用场景

无障碍性与对比度

生成的比例尺是否有用，取决于它所产生的文字与背景配对。请牢记WCAG 2.1最低标准：

大多数构建良好的比例尺通用规则：50 + 900配对始终通过正文文本测试，100 + 800配对几乎都能通过。400 + 500配对几乎从不通过。请测试您计划实际使用的具体配对，颜色对比度检查器，免费工具可计算任意两个HEX值的WCAG比率。

将输出接入您的代码库

消费生成比例尺的三种常见方式：

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }
// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>
// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

常见错误

  1. 生成档位过多。Tailwind的11档是甜蜜点。20档是过度设计，大多数在视觉上无法区分，而且您根本不会用到它们。
  2. 对黄色/橙色/荧光色使用基于HSL的比例尺。它们在浅色档位会褪色，深色化也不干净。如果您的品牌色落入「棘手」的色相范围，请改用基于OKLCH的生成方式。
  3. 将比例尺视为最终结果，而不检查文本对比度。美观的色彩关系有时会将白色文本与400档配对，但无法通过WCAG 4.5:1测试。请测试您实际使用的每个配对。
  4. 反转浅色调色板来制作深色模式调色板。数学上很诱人，视觉上却是错误的，在白色背景上感觉平衡的颜色在近黑色背景上会显得刺眼。请生成或手动调整一套并行的深色模式比例尺。
  5. 将基础色定为「500」，而实际上它在视觉上更接近另一档位。如果您的品牌色本身就偏深，它可能是其比例尺中的700档；应由视觉感知关系决定它占据哪个位置，而非惯例。
  6. 忘记50档。最浅的色调在背景和细微高光中最为有用。不要将比例尺截断在100档。

更多常见问题

为什么我的比例尺看起来单调，所有档位感觉都差不多？

两种常见原因：（1）在过窄的范围内档位过多，尝试减少档位，特别是当颜色本身已处于中等亮度时；（2）在HSL校准效果差的色相上（黄色、橙色、荧光色）使用了基于HSL的缩放。改用基于OKLCH的调色板生成器通常能解决这两个问题。

如何从浅色模式比例尺生成深色模式调色板？

不要简单地反转。朴素的反转（翻转浅色和深色档位）会产生显得刺眼或褪色的深色模式调色板。Material 3、Radix Colors和Tailwind深色变体的惯例，是生成一套专为深色背景调校的并行比例尺，通常采用略微降低的饱和度和调整过的色相，以补偿颜色在深色表面上的视觉感知差异。大多数大型设计系统会并排发布两套调色板。

我可以将生成的颜色用于商业用途吗？

可以。颜色值不受版权保护；HEX码是关于像素的客观事实。生成的调色板可在任何地方使用：开源项目、商业网站、品牌系统、印刷品、包装。

推荐多少个档位？

对于UI设计，每种颜色9到11档是公认惯例（Tailwind、Bootstrap、Carbon均在这一范围内）。Material Design使用13档。低于7档，比例尺感觉分辨率不足；超过13档，档位之间难以相互区分。

有任何内容会发送到服务器吗？

不会。颜色计算在您的浏览器中运行；输入的HEX色、生成的档位和复制的CSS从不接触服务器。当品牌色尚未发布或处于保密状态时，这一点尤为有用。

这与配色生成器有何不同？

配色生成器会挑选几种相互协调的不同颜色（互补色、类似色、三角色等），即完全不同的色相。阴影生成器（本工具）保持单一色相，生成其浅色和深色变体。用途不同：配色生成器提供品牌主色加辅助色；阴影生成器则提供其中一种颜色的各种变体。

相关工具

调色板生成器

一键生成和谐调色板。

颜色转换器

在 HEX、RGB、HSL 与 CMYK 间转换。

对比度检查器

检查 WCAG 2.1 对比度比率。