Softonic

暗色阶生成器

步 1 / 2
结果

暗色阶（shade）是颜色与黑色混合的结果，每一级都会更深。生成器接收 HEX 基础色，生成 3～20 级（默认为 10 级）逐渐加深的暗色阶，同时给出同一基础色的淡色阶。可用于设计系统调色板的阶梯（500 → 900）、按钮按下/激活状态、保持可读性的文字颜色和阴影叠加。每一级都以色块显示，并带有可直接复制的 hex 值。

暗色阶的生成原理

  1. 1

    选择基础色

    使用颜色选择器，或在分步模式下通过页面 URL 传入 hex 值。基础色位于淡色阶范围与暗色阶范围之间。

  2. 2

    选择级数

    3～20 级，默认为 10 级。级数越多渐变越平滑，级数越少变化越强。

  3. 3

    与黑色按均匀级别混合

    每一级都以相同系数缩放红、绿、蓝三个通道，相当于与黑色（淡色阶则与白色）按均匀级别混合。设为 10 级时，每一级约加深或变浅 9 %，色相与基础色完全一致。

  4. 4

    读取色阶

    每个色块都显示其 hex 值。选中文字即可复制到 CSS、Tailwind 主题或 design tokens 文件中。

暗色阶、淡色阶与浊色的区别

  • 暗色阶（shade）：颜色 + 黑色 → 更深。
  • 淡色阶（tint）：颜色 + 白色 → 更浅。
  • 浊色（tone）：颜色 + 灰色 → 饱和度降低。

本生成器从同一基础色同时生成暗色阶和淡色阶。淡色阶与暗色阶通常成对构成一套设计系统调色板（例如从brand-100到brand-900，其中500为基础色）。

色阶示例：#3B82F6（Tailwind blue-500）

级别 HEX 混合 在设计系统中的作用
0 #3B82F6 基础色 主品牌色（例如 blue-500）
1 #316CCD 17% 黑色 悬停状态
2 #2756A4 33% 黑色 按下/激活状态（blue-600）
3 #1D417B 50% 黑色 blue-700
4 #132B52 67% 黑色 blue-800
5 #091528 83% 黑色 blue-900

上表为 5 级色阶：每一级向黑色推进六分之一的路程。

每一级如何计算

工具在每一级都以相同系数缩放基础色的红、绿、蓝通道。这相当于暗色阶范围与黑色混合、淡色阶范围与白色混合，且级别均匀。设为 10 级时，每一级比前一级约深或浅 9 %。

由于所有通道等比缩放，基础色的色相被精确保留：蓝色基础色仍是蓝色，绿色基础色仍是绿色。与黑色混合还会在降低明度的同时降低饱和度，因此暗色级别看起来自然而非发光。若只降低明度而不动饱和度，暗色会保持过饱和。

在界面中使用暗色阶

  • 按钮：常态使用基础色，悬停时加深1～2级，激活/按下时加深2～3级。
  • 正文文字：比基础色深2～3级，以确保在白底上的可读性；次要文字则更浅。
  • 边框/分隔线：比背景深1～2级，足以区分而不致喧宾夺主。
  • 阴影：使用最深的一级（或更深）并降低其透明度，而不是另用一种灰色。
  • 数据可视化：顺序型色阶（数值大小）使用同一色相的暗色阶；发散型色阶（正负对比）则搭配两种色相的暗色阶。

常见误区

  • 级数过多会被压缩成难以区分的色带。 10级色阶之所以好用，是因为每级大约深9%；到了20级，差异会变得细微。想要强对比，优先选择3～5级。
  • 这里不会发生色相偏移：每一级都等比例缩放所有通道，红色仍是红色，绿色仍是绿色。色相偏移出现在两种不同颜色之间做插值的时候，本工具不会这样做。
  • 忽视无障碍性：看起来协调的色阶，可能无法满足相对于背景的WCAG对比度要求。务必逐级验证对比度。
  • 仅由暗色阶构成的色阶在深色背景上会显得压抑。 搭配一套淡色阶，才能得到可用的深色模式。

常见问题

对于设计系统而言，5级暗色阶 + 5级淡色阶（围绕基础色共10级）是常见惯例。若只是快速准备界面状态色（悬停、激活），3级就足够了。

这里使用的均匀混合让每一级都处于基础色与黑色之间的直线上，所以中间级别始终干净。中间发浊通常来自在两种不同颜色之间插值的工具，或者只降低明度而不降低饱和度的做法。

深色在变成黑色之前已经没有多少变暗空间，以深紫色为基础时，色阶往往只有2～3级可区分，之后便会塌缩。想要更丰富的色阶，请选择中等明度的基础色。

意图相似，但与黑色混合会在降低明度的同时降低饱和度，通常看起来更自然。单纯降低明度会让饱和度保持很高，可能导致暗色过饱和。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

BBCode 转 HTML 转换器

将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片和链接。

布尔代数化简器

计算布尔表达式在每种输入组合下的值，并显示完整的真值表。支持最多五个变量和 &、|、!、^ 运算符。