HEX 调色板生成器
输入一个主色，自动生成完整配色方案（主色阶、和谐色、语义色和可复制 CSS 变量），帮助你更快统一品牌视觉。
基础颜色 (HEX)
支持 #RGB 或 #RRGGBB，例如 #0EA5E9
快速预设
配色总览
主色 + 色彩关系，快速搭建一致的视觉系统。
基础颜色 (HEX)
#2563EB
色相: 221饱和度: 83%亮度: 53%
和谐色
邻近色 A
#45C7E4
邻近色 B
#6345E4
补色
#E6AB2A
三角色 A
#E2386D
三角色 B
#6DE238
主色阶（50 - 900）
从浅到深的可用色阶，可直接用于按钮、背景、边框和强调文本。
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
语义色（设计 Token）
建议直接用于产品 UI 的角色色，减少每个页面重新配色的成本。
Primary
Primary
主按钮 / 主品牌色
#2563EBSecondary
Secondary
辅助品牌色
#6C59D5Accent
Accent
重点强调 / 高对比元素
#E3AA2DBackground
Background
页面背景
#F7F7F8Surface
Surface
卡片与容器背景
#E8E9EEText
Text
正文文字颜色
#1B212CCSS 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;
}如何从一个 HEX 颜色构建完整的配色系统
此工具可将一个基础 HEX 颜色实时转换为结构化调色板。您可以手动输入 HEX 值、从取色器中选择，或随机生成颜色。即时查看完整的调色板概览，包括和谐色、色调阶梯、语义化令牌和可复制的 CSS 变量。
1
步骤 1：输入或选择基础颜色
直接输入 HEX 颜色代码、从取色器中选择颜色，或点击"随机颜色"自动生成。
2
步骤 2：查看调色板概览
查看基础颜色及自动生成的和谐色，它们将互补并扩展您的设计。
3
步骤 3：探索色调阶梯和语义化令牌
查看 50-900 的色调阶梯，从浅到深的色阶适用于背景、边框、状态和文字对比。同时生成实用的 UI 语义化令牌。
4
步骤 4：复制 CSS 变量或令牌
一键复制生成的 CSS 变量或语义化角色，直接粘贴到您的样式表中。
为实际项目打造的结构化调色板
这款 HEX 调色板生成器不仅是简单的色板。它创建结构化、可立即用于产品界面、设计系统和品牌工作流的调色板。
基于和谐理论的颜色生成
自动生成保持视觉平衡和对比度的互补和谐色。
色调阶梯（50-900）
为 UI 层级、状态、背景和可读文字对比优化的从浅到深色阶。
UI 一致性的语义化令牌
预定义角色帮助在主要操作、成功状态、警告和中性元素之间保持一致的使用。
可复制的 CSS 变量
一键将整个调色板导出为 CSS 变量，可直接在样式表中使用。
常见问题
它是一个基于单个 HEX 颜色值创建完整调色板的工具，包括色调变化和和谐色。
可以。您可以输入任何有效的 HEX 颜色、手动选择或随机生成颜色。
色调阶梯（50-900）为背景、边框、悬停状态和可访问文字对比提供结构化色阶。
只需复制变量并粘贴到您的 CSS 文件或设计系统配置中即可。