🎨 配色方案生成器
色环理论 · 多种和谐方案 · 一键复制
色环理论 · 多种和谐方案 · 一键复制
互补色是色环上位置相对的颜色（相隔180°），如红-青、蓝-黄。互补色搭配对比强烈，适合需要视觉冲击力的设计，但大面积使用需谨慎。
单色方案使用同一色调不同明度和饱和度的变体，视觉效果统一、和谐、专业。适合企业网站、仪表盘、极简风格设计。
四角色（矩形方案）是四个均匀分布在色环上的颜色，通常选择其中一个作为主色，另外三个少量使用作为点缀，避免画面混乱。
其实是一回事，都是色环上相邻的颜色（一般相差30°左右）。类似色搭配自然和谐、不易出错，是最保守稳妥的配色方式。
记住三点：主次分明（一个主色+一个点缀色）、控制饱和度（大面积用低饱和）、留白缓冲（不要所有元素都上色）。对比强烈的互补色只用在强调处。
这是室内和UI设计通用的比例：60%主色（背景/大面积）、30%辅助色（次级模块）、10%强调色（按钮/链接）。按这个比例配色画面最平衡。
建议不超过3-4个主色。超过4个颜色容易显得杂乱。中性色（黑白灰）不算在内，可以放心用。
可以在色环上按固定角度取色（互补180°、类似±30°、三角120°、四角90°），这些角度关系天然协调。本工具即按此原理自动生成。
配色方案都建立在12色色环上。色环把颜色按360°排列，不同角度间隔对应不同关系：间隔越小关系越和谐，间隔越大对比越强。
| 方案 | 角度 | 特点 | 适用 |
|---|---|---|---|
| 单色 | 同色调 | 统一简洁 | 企业站、极简风 |
| 类似色 | ±30° | 和谐自然 | 内容类、健康类 |
| 互补色 | 180° | 对比强烈 | 强调、促销、海报 |
| 三角色 | 120° | 均衡活泼 | 插画、儿童类 |
| 四角色 | 90° | 丰富华丽 | 装饰、节日视觉 |
取色角度是固定的几何关系，这也是为什么按角度自动生成的配色"看起来协调"的根本原因。
不管用哪个色彩模型，配色时真正要控制的是三个维度：色相(H)决定是什么颜色，饱和度(S)决定颜色浓淡，明度(B/L)决定深浅。
| 维度 | 含义 | 调节效果 |
|---|---|---|
| 色相 H | 颜色种类(0-360°) | 决定是什么颜色 |
| 饱和度 S | 颜色浓淡(0-100%) | 越低越接近灰，越高越鲜艳 |
| 明度 B | 颜色深浅(0-100%) | 越高越亮，越低越暗 |
理解这三个维度，比死记配色公式更能灵活调整出协调的搭配。
黑白灰等中性色（还有低饱和的米色、浅灰蓝）不参与色相冲突，是配色的"缓冲带"。它们能降低视觉疲劳，让彩色元素更突出。
| 中性色 | 用途 | 示例值 |
|---|---|---|
| 白/浅灰 | 背景、留白 | #FFFFFF、#F5F5F5 |
| 深灰/黑 | 正文、标题 | #333333、#1F1F1F |
| 米色/浅灰蓝 | 缓冲装饰 | #F5F0E8、#E8EDF2 |
| 用途 | 最小对比度 | 依据 |
|---|---|---|
| 正文文字 | 4.5:1 | WCAG AA 标准 |
| 大号文字 | 3:1 | ≥24px 或加粗18px |
| 图形/图标 | 3:1 | 非文字元素 |
配色不是越花越好，而是越克制越高级。真正好的配色往往"看起来很简单"。
| 品牌 | 主色Hex | 色相 |
|---|---|---|
| 微信 | #07C160 | 绿色 |
| 支付宝 | #1677FF | 蓝色 |
| 淘宝 | #FF5000 | 橙色 |
| 字节/抖音 | #FE2C55 | 玫红 |
| 腾讯 | #0BBA2B | 绿色 |
| #12B7F5 | 天蓝 |
| 色相 | 情感 | 适用领域 |
|---|---|---|
| 红/橙 | 热情、活力、促销 | 电商、餐饮、活动 |
| 黄/金 | 温暖、醒目、财富 | 奢侈品、教育 |
| 绿 | 自然、健康、信任 | 医疗、环保、金融 |
| 蓝 | 专业、冷静、科技 | 科技、金融、企业 |
| 紫 | 高端、神秘、创意 | 美妆、音乐、艺术 |
| 粉 | 柔美、可爱 | 美妆、女性向、儿童 |
1. 选择基色（使用取色器或输入Hex）。
2. 选择配色方案类型。
3. 查看生成的色块。
4. 点击色块复制Hex代码。