HEX 调色板生成器

输入一个主色，自动生成完整配色方案（主色阶、和谐色、语义色和可复制 CSS 变量），帮助你更快统一品牌视觉。

基础颜色 (HEX)

支持 #RGB 或 #RRGGBB，例如 #0EA5E9

基础颜色 (HEX)

快速预设

配色总览

主色 + 色彩关系，快速搭建一致的视觉系统。

基础颜色 (HEX)

#2563EB

色相: 221饱和度: 83%亮度: 53%

和谐色

邻近色 A

#45C7E4

邻近色 B

#6345E4

补色

#E6AB2A

三角色 A

#E2386D

三角色 B

#6DE238

主色阶（50 - 900）

从浅到深的可用色阶，可直接用于按钮、背景、边框和强调文本。

#F4F6FB

100

#D1DBF1

200

#ABBFEB

300

#82A2E7

400

#5583E8

500

#2563EB

600

#124BC7

700

#0D3794

800

#082462

900

#04112F

语义色（设计 Token）

建议直接用于产品 UI 的角色色，减少每个页面重新配色的成本。

Primary

主按钮 / 主品牌色

#2563EB

Secondary

辅助品牌色

#6C59D5

Accent

重点强调 / 高对比元素

#E3AA2D

Background

页面背景

#F7F7F8

Surface

卡片与容器背景

#E8E9EE

Text

正文文字颜色

#1B212C

CSS Variables

一键复制到样式文件，快速落地整套主题。

:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}