颜色深浅色阶教程：从一个主色生成 10 级浅色和深色
一句话答案
打开颜色深浅色阶生成工具，输入基础颜色（例如 #2563eb），默认生成 10 级浅色（逐级混入白色）和 10 级深色（逐级混入黑色），每个色块显示 HEX 值和混合比例，点击即可复制。
一个设计系统通常只有一两个品牌色，但实际做界面时需要很多深浅变化：按钮默认色、悬停色、按下色、浅色背景、边框、禁用状态。颜色深浅色阶生成 可以从一个基础色生成一整套深浅色。
Tints 和 Shades
- Tints（浅色）：基础色逐步混入白色，越往前越浅；
- Shades（深色）：基础色逐步混入黑色，越往后越深。
工具显示的“91% white”表示混入 91% 的白色，“9% black”表示混入 9% 的黑色。
操作步骤
- 输入基础颜色：打开 颜色深浅色阶生成，在“基础颜色”中填写或选择颜色，例如 #2563eb。
- 设置级数：“级数”默认 10，决定浅色和深色各生成多少级。
- 查看色阶：上排是从最浅到接近基础色的 Tints，下排是从基础色逐渐变深的 Shades。
- 复制颜色：点击色块即可复制对应的 HEX 值，粘贴到 CSS 或设计软件中。
🌈 颜色深浅色阶生成
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
每一级怎么用
以 #2563eb 为例，可以这样分配：
| 用途 | 取色建议 | 示例 |
|---|---|---|
| 页面浅色背景、标签底色 | 最浅的 1–2 级 tint | #ebf1fd |
| 边框、分隔线 | 中间的 tint | #b0c6f8 |
| 按钮默认色 | 基础色 | #2563eb |
| 按钮悬停色 | 第 1–2 级 shade | #225ad6 |
| 按钮按下色、标题文字 | 更深的 shade | #1b48ab |
在浅色背景上放文字时，记得用 颜色对比度检测 检查是否清楚。
配合其他工具
常见问题
Tints 和 Shades 有什么区别？
Tints 是在基础色里混入白色，得到更浅的颜色；Shades 是混入黑色，得到更深的颜色。
91% white 是什么意思？
表示这个颜色由 91% 的白色和 9% 的基础色混合而成，所以非常浅。
生成的颜色可以直接用在 CSS 里吗？
可以。每个色块都是标准的 HEX 颜色值，复制后可以直接写进 CSS。
级数可以改吗？
可以。“级数”默认 10，可以按需要调整，生成更多或更少的深浅层级。