配色方案生成器

什么是配色方案？

配色方案是一组经过精心挑选、视觉上相互协调的颜色集合。设计师使用配色方案让网站、品牌、插画和仪表板保持一致性，因为重复使用相同的几种颜色能产生节奏感与识别度。配色方案通常包含一个主色、一两个强调色，以及一组中性或辅助色调。设计师并不随机选色，而是依赖色彩和谐规则 — 类似色、互补色、三元色、四元色和单色 — 这些规则基于色轮的几何关系，能产生视觉愉悦的组合。

本工具实现了这五种经典和谐规则，并在您更改基础色的瞬间重新生成配色方案。所有计算都通过 HSL 变换在浏览器本地完成，因此您可以自由实验而无需上传任何内容。

何时生成配色方案

提前生成配色方案可以节省时间，并避免临时选色造成的视觉混乱。常见场景包括：

• 启动新网站或应用。 选择一个品牌色，让生成器产生辅助强调色和中性色。
• 构建设计系统。 --accent、--accent-complement、--accent-triadic-2 等 token 名称直接对应生成的色块。
• 插画与数据可视化。 三元色和四元色方案为多系列图表提供足够的区分度且不冲突。
• 营销素材。 互补色对在品牌背景上为行动号召按钮创造强烈对比。
• 主题与品牌重塑。 更改基础色，整个配色方案随之更新，使浅色/深色或季节主题变得轻而易举。
• 学习色彩理论。 观察色相偏移如何转化为和谐规则，比阅读理论更快建立直觉。

得到配色方案后，将其锁定到 CSS 变量或设计 token 中，让每个组件引用同一真实来源。

配色和谐规则详解

本工具生成的五种和谐规则基于 HSL 色轮中的色相角度：

• 类似色。 色相在色轮上相邻的颜色（通常为 ±30° 和 ±60°）。由于色相共享相同基础，结果感觉平静且协调。
• 互补色。 两个色相直接相对（相隔 180°）。这种搭配产生最大对比度和鲜艳度 — 非常适合在主背景上做强调。
• 三元色。 三个色相在色轮上均匀分布（相隔 120°）。结果鲜艳而平衡，适用于俏皮或大胆的设计。
• 四元色。 四个色相均匀分布（相隔 90°），在色轮上形成矩形。它提供丰富变化，但需要一种颜色占主导，以免其他颜色相互竞争。
• 单色。 单一色相搭配不同亮度（有时还有饱和度）。结果微妙而精致，非常适合极简或文字密集的界面。

这五种规则都源自同一基础色相，因此即使外观差异很大，它们也共享家族相似性。

常见配色使用场景

下表展示了每种和谐规则如何对应典型的设计用途。

规则	色相偏移	最适合
类似色	±30°, ±60°	协调的背景、渐变、自然主题
互补色	180°	行动号召按钮、高对比强调
三元色	0°, 120°, 240°	俏皮品牌、多系列图表
四元色	0°, 90°, 180°, 270°	丰富插画、四分类仪表板
单色	0°（改变亮度）	极简 UI、排版、优雅主题

为获得最佳效果，选择一种颜色作为主色调，另一种作为辅助，其余少量用作强调。

如何生成配色方案

使用本工具生成配色方案只需一秒钟，且完全在浏览器中完成，无需上传、无需注册、无需安装。请按以下步骤操作：

1. 选取基础色。 使用颜色拾取器，或在 HEX 输入框中输入 6 位 HEX 代码（带或不带 #）。
2. 查看方案。 五行和谐配色实时更新，每个色块下方显示生成的 HEX 代码。
3. 复制代码。 点击"复制全部 HEX"复制每个色块的 HEX 值，然后粘贴到 CSS、设计工具或样式指南中。

由于所有步骤都通过 JavaScript 在浏览器本地运行，您的颜色选择永远不会上传到服务器。这使配色方案生成完全私密且即时。