🎨 配色方案生成器
从基础色生成互补色、类似色、三角色、分裂互补色等多种配色方案
什么是配色方案生成器？
配色方案生成器是一种帮助设计师和开发者快速创建和谐色彩组合的在线工具。色彩是视觉设计的核心要素，一个好的配色方案能传达品牌情感、引导用户注意力、提升界面可用性。然而，配色并非易事——需要理解色轮理论、色彩心理学和可访问性标准。配色方案生成器基于色彩学原理，通过算法自动生成符合美学规律的色板组合，包括单色、互补色、类似色、三角色等多种配色方案。开发者可以快速获得UI设计所需的主色、辅助色、背景色和强调色的协调组合，大幅缩短设计阶段的时间。
如何使用配色方案生成器
- 选择基准色 — 在色轮上点击选择一个基准颜色，或直接输入HEX/RGB值。也可以点击"随机"获取灵感。
- 选择配色模式 — 从互补色、类似色、三等分、分裂互补等配色规则中选择一种方案类型。
- 调整和导出 — 微调各个颜色的明度和饱和度，满意后导出为CSS变量、Tailwind配置、JSON等多种格式。
常见使用场景
场景一：UI主题设计
开发Web应用时，需要定义一套完整的主题色系。使用生成器快速获得主色、辅色、成功/警告/错误状态色的和谐组合。
场景二：品牌色彩探索
初创团队在确定品牌色时，通过配色生成器探索不同的色彩组合方案，找到最能传达品牌调性的颜色搭配。
场景三：数据可视化配色
图表中多个数据系列需要区分度高但整体和谐的颜色。生成器可以产出满足可区分性要求的色彩序列。
技术原理
配色方案基于HSL（色相-饱和度-亮度）色彩空间中的角度关系：
// 色轮上的角度关系
// 互补色：色相相差180°
// 类似色：色相相差30°
// 三等分色：色相各差120°
// 分裂互补：主色的互补色两侧各30°
function complementary(hue) {
return [(hue + 180) % 360];
}
function analogous(hue) {
return [(hue - 30 + 360) % 360, (hue + 30) % 360];
}
function triadic(hue) {
return [(hue + 120) % 360, (hue + 240) % 360];
}颜色对比度检查遵循WCAG 2.1标准：普通文本至少4.5:1，大文本至少3:1。
最佳实践与注意事项
- 选择颜色时务必检查对比度，确保文本在背景色上清晰可读，符合WCAG AA标准。
- 一套配色方案不宜超过5-6种颜色，过多颜色会让界面显得杂乱。
- 考虑色盲用户的视觉差异，避免仅依赖红色/绿色区分重要信息。
- 导出的CSS变量建议使用语义化命名（如--color-primary），便于后期主题切换。
常见问题
Q：什么是互补色和类似色？
A：互补色是色轮上正对面的两种颜色（如红与绿），对比强烈适合突出重点。类似色是色轮上相邻的颜色（如蓝与蓝绿），搭配柔和适合创建统一感。
Q：HEX和RGB有什么区别？
A：两者表示同一种颜色，只是格式不同。HEX用十六进制如#FF5733，RGB用十进制如rgb(255,87,51)。在CSS中可以互换使用，HEX更简洁，RGB支持透明通道（rgba）。
Q：如何确保配色对色盲用户友好？
A：使用模拟色盲视觉的工具检查配色方案。避免仅靠红绿区分状态，搭配图标或文字标签。蓝色和橙色是对色盲最安全的对比色组合。
Q：60-30-10配色法则是什么？
A：室内设计和UI设计中常用的配色比例：60%主色调（通常是背景色）、30%辅助色（卡片、次要元素）、10%强调色（按钮、链接等交互元素）。
Q：暗色模式的配色有什么不同？
A：暗色模式不能简单反转颜色。背景应使用深灰而非纯黑（如#121212），前景色饱和度需降低以避免刺眼，层级通过亮度而非颜色区分。