色环配色工具基于色彩理论，从一个基础色出发，按照不同几何关系在色环上取点，生成 2–5 种搭配和谐的颜色组合。输入十六进制颜色值或拖动色环选点，选择配色模式后即时得到可复制的色板，适用于品牌配色、界面设计和数据可视化。
9 种配色模式的原理与适用场景
色环将全部色相排列成圆形，不同几何关系对应不同的视觉张力：
对比型配色
- 互补色：色环对角两色，对比最强烈，适合突出焦点、CTA 按钮
- 分离色：互补色两侧各取一色，比互补色柔和，适合需要对比但不刺眼的设计
- 双分离色：两组分离色，共 5 色，用于多元素复杂界面
和谐型配色
- 相似色：色环相邻 3–5 色，过渡柔和，适合自然风格和渐变背景
- 单色：同一色相的不同明度与饱和度，简约统一，适合极简设计
- 复合色：互补色的扩展变体，层次更丰富
均衡多色：三角色（等距 3 色）、四角色（矩形 4 色）、方形色（等距 4 色）提供活泼感，适合儿童产品、品牌视觉和信息可视化。
复制颜色与在设计软件中使用
生成的色板中每个色块显示颜色名称和十六进制值，点击色块即复制十六进制代码。粘贴到 Figma、Sketch、Adobe XD 的颜色选择器或代码的 CSS 变量中均可直接使用。工具同时显示最接近的 Tailwind CSS 颜色名（如 rose-400、sky-600），方便在 Tailwind 项目中快速查找近似色。
配色主次关系
多色方案中，避免所有颜色权重相同。通行做法是主色占 60%（大面积背景、主要内容区）、辅助色占 30%（次级元素、卡片、侧边栏）、强调色占 10%（按钮、标签、引导箭头）。强调色通常选对比型配色中的高饱和色，主色和辅助色来自和谐型配色。
明度与饱和度的调整
色环生成的是理论基础色，实际落稿前通常需要在设计工具中调整明度（让背景色偏淡、文字色偏深）和饱和度（品牌色保留鲜艳，中性区域降低饱和）。生成的配色视为起点而非终稿，结合 WCAG 对比度检查（可用站内颜色对比度工具验证）后确认最终值。