🌑

颜色明暗梯度

颜色明暗梯度是一款免费的在线工具，可生成明暗梯度：基于主色生成多级明暗色阶。在UI 配色辅助等场景下尤其好用，处理结果与步骤都支持一键复制。

颜色明暗梯度帮助你快速生成明暗梯度。它基于主色生成多级明暗色阶，常用于UI 配色辅助。无论是颜色梯度、明暗色阶、配色辅助等相关需求，都能在浏览器里直接完成。

工具完全在本地运行，你输入的内容不会上传到任何服务器，处理速度快、结果可直接复制使用，适合日常办公与专业开发等多种场景。

颜色明暗梯度

基础色

生成方式

#f4f6fb白底 1.1 / 黑底 19.4

100

#e9eef6白底 1.2 / 黑底 18.0

200

#c6d4f1白底 1.5 / 黑底 14.1

300

#a1b9e8白底 2.0 / 黑底 10.6

400

#7497dc白底 2.9 / 黑底 7.2

500

#4775d1白底 4.4 / 黑底 4.7

600

#3060c0白底 5.9 / 黑底 3.6

700

#28509f白底 7.7 / 黑底 2.7

800

#214183白底 9.8 / 黑底 2.1

900

#183162白底 12.7 / 黑底 1.7

950

#18233a白底 15.7 / 黑底 1.3

Tailwind config

colors: {
  brand: {
    50: '#f4f6fb',
    100: '#e9eef6',
    200: '#c6d4f1',
    300: '#a1b9e8',
    400: '#7497dc',
    500: '#4775d1',
    600: '#3060c0',
    700: '#28509f',
    800: '#214183',
    900: '#183162',
    950: '#18233a',
  },
}

CSS 变量

:root {
  --brand-50: #f4f6fb;
  --brand-100: #e9eef6;
  --brand-200: #c6d4f1;
  --brand-300: #a1b9e8;
  --brand-400: #7497dc;
  --brand-500: #4775d1;
  --brand-600: #3060c0;
  --brand-700: #28509f;
  --brand-800: #214183;
  --brand-900: #183162;
  --brand-950: #18233a;
}

SCSS 变量

$brand-50: #f4f6fb;
$brand-100: #e9eef6;
$brand-200: #c6d4f1;
$brand-300: #a1b9e8;
$brand-400: #7497dc;
$brand-500: #4775d1;
$brand-600: #3060c0;
$brand-700: #28509f;
$brand-800: #214183;
$brand-900: #183162;
$brand-950: #18233a;

同时给出每档在白底/黑底上的 WCAG 对比度，便于挑选正文色与背景色。

在取色/输入框中设定或选择颜色。
拖动控件调整参数，实时预览效果。
复制生成的颜色值或 CSS 代码。

常见问题（FAQ）

Q：什么情况下适合用颜色明暗梯度？

A：当你需要生成明暗梯度时（例如UI 配色辅助），使用本工具可以快速得到结果，无需安装任何软件。

Q：颜色明暗梯度和同类工具相比有什么优势？

A：纯前端运行、打开网页即用、数据不上传服务器；同时基于主色生成多级明暗色阶，兼顾速度与隐私。

Q：使用颜色明暗梯度收费吗？

A：完全免费，可无限次使用；所有处理均在本地完成。

Q：颜色明暗梯度都能处理哪些内容？

A：本工具支持基于主色生成多级明暗色阶，覆盖颜色梯度、明暗色阶、配色辅助等常见需求，适用于UI 配色辅助。

UI 配色辅助。