颜色搭配生成器能做什么？
颜色搭配生成器基于色彩理论一键生成和谐的配色方案：互补色、类似色、三角对比、分裂互补等经典搭配模式，每个方案给出完整的色板和 HEX/RGB 色值。做设计、写 PPT、配网站主题、装修选色时，它能帮你快速从「不知道配什么色」到「有一套专业色板」。
使用步骤
- 打开颜色搭配生成器
- 用取色器选一个主色（或直接输入 HEX 值）
- 选择搭配模式：互补、类似、三角、分裂互补、单色阶
- 点击「生成」，得到 3-5 个协调的颜色
- 点任意色块微调明度、饱和度
- 复制单个色值或一键导出整套色板（HEX 列表 / CSS 变量）
- 锁定满意的颜色，继续随机其他位置的配色
经典搭配模式详解
- 互补色：色轮上正对面的两色（如蓝+橙），对比强烈、活力十足，适合海报、促销
- 类似色：色轮上相邻的 2-3 色（如蓝+蓝绿+绿），和谐舒缓，适合自然主题
- 三角对比：色轮上等距三色，丰富而平衡，适合插画、品牌视觉
- 分裂互补：主色 + 对面两侧的颜色，对比感强但比互补柔和
- 单色阶：同一色相的不同明度，最安全、最显高级，适合商务与极简风格
配色实用原则
- 60-30-10 法则：主色占 60%、辅色 30%、强调色 10%，空间层次立现
- 对比度达标：正文与背景对比度至少 4.5:1（WCAG 标准），保证可读性
- 饱和度降一档：高饱和色大面积使用易疲劳，低饱和更耐看
- 中性色打底：黑、白、灰、米色作背景，彩色作点缀，最不易出错
- 深色模式：主色在深背景上需要提亮 10%-20% 才够醒目
注意事项与边界情况
- 屏幕色（RGB）与印刷色（CMYK）存在色差，印刷前请以打样为准
- 色弱人群（约 8% 男性）对红绿区分困难，重要信息不要只靠颜色表达
- 不同设备屏幕色准不同，重要配色在目标设备上复核
- 品牌色一旦确定请固化色值，全渠道保持一致
常见问题
- 生成的配色可以直接用吗？
- 可以直接用于网页、PPT、设计稿；建议先按 60-30-10 法则分配面积再微调。
- HEX、RGB、HSL 有什么区别？
- HEX 是十六进制网页色值，RGB 是红绿蓝三通道，HSL 按色相/饱和度/亮度描述，调色时 HSL 最直观。
- 怎么让配色看起来高级？
- 降低饱和度、提高明度层次、大面积用中性色，三点做到就成功大半。
- 能保存我的配色方案吗？
- 可以导出为 CSS 变量或文本保存；页面刷新后建议先导出。
- 深色主题怎么配色？
- 背景用深灰蓝而非纯黑，主色提亮，对比度依旧保持 4.5:1 以上。
实战案例：给内容站做整套配色
需求：900px 高的内容页配色。按 60-30-10 法则分面积：60%（540px）给纸白背景、30%（270px）给墨灰文字、10%（90px）给黛绿点缀——三段相加正好 900px，面积账可复算。正文对比度按 WCAG 2.1 AA 标准不低于 4.5:1：墨灰 #333 压在纸白上轻松达标，点缀色只用在按钮和链接上，不与正文抢面积。
常见错误
- 互补色大面积撞色：高饱和对比铺满整页，看两分钟就视觉疲劳
- 对比度拍脑袋：浅灰字压浅色底看着「高级」，读起来是灾难，先跑 4.5:1
- 色弱用户看不见的区别：红绿状态灯只靠颜色区分，加图标或文字标签
- 品牌色在深色模式下原样搬：不提亮 10%-20% 会沉进背景里
进阶方向
- 把色板做成设计令牌（--color-primary 等），换主题只改变量
- 用 APCA 等新一代对比度算法做更精细的可读性评估
- 配 A/B 测试验证点缀色对点击率的真实影响
- 收藏 2-3 套成熟配色做备胎，改版时不用从零调
总结
颜色搭配生成器把色彩理论变成一键操作：选主色、挑模式、导出色板。配合 60-30-10 法则和对比度标准，就算是配色新手也能做出专业级的方案。