色轮配色方案

单色：同一色相不同明度，最和谐；互补：相差 180°，对比强烈；类似：±30°，柔和自然；三元：120° 间隔，活泼均衡；分裂互补：主色 + 互补色两侧，对比中带协调；四方：90° 间隔，色彩丰富。

除单色方案外，其他方案的色相按固定角度偏移，饱和度和明度基于主色做合理调整，保证整体协调且色卡有视觉层次。

色轮把色相（Hue）按 0–360 度排成一个圆环，它描述的是色相之间的关系。 配色好看与否，很大程度取决于你在环上挑了哪几个角度，而不是具体选了什么颜色。 最常用的几种关系：

互补色（相隔 180 度）对比最强，适合做强调与按钮，但大面积并列会显得刺眼； 类似色（相邻 30–60 度）最安全，适合做背景层次与插画； 三分色（相隔 120 度）既有对比又不易失控，是新手最容易出效果的选择； 分裂互补（互补色两侧各偏 30 度）在强调与克制之间折中。

只用色相还不够，真实配色至少还有两个维度：饱和度与明度。 同一组色相关系，把饱和度压低会显得克制高级，拉高则更活泼。 一个稳定做法是「一个高饱和主色 + 若干低饱和辅色」，让视觉焦点只有一个。

实际落地时，配色通常不是三个颜色，而是一组明度阶梯： 同一个色相下准备由浅到深若干档，用于背景、描边、正文、悬停、按下等状态。 这样界面既有层次又不会像调色盘打翻。生成阶梯时保持色相不变、只动明度与饱和度， 最容易保持一致；如果某档看起来发脏，通常是饱和度没有跟着明度一起微调。

最后一步别忘了校验对比度。色轮解决的是「好看」，对比度解决的是「看得清」： WCAG 要求正文 4.5:1、大字 3:1，增强级要求 7:1。 把选好的前景色与背景色一起验一遍，能避免大量返工。 本页的色轮与所有转换都在浏览器本地完成，不上传任何数据。

最后提醒一点：色轮上的角度是均匀的，但人眼的感知并不均匀—— 同样是 30 度，在黄绿区间差别明显，在蓝色区间却几乎看不出来。 因此按角度挑颜色只是起点，最终仍要放进真实界面里看； 如果一组配色在缩略图上分不开，就拉开明度，或改用间隔更大的角度。

使用上，色轮更适合「定关系」而不是「定最终值」：先在环上确定主色与配色的角度关系， 再把结果转成 HSL 微调饱和度与明度，最后交给调色板工具整理成明度阶梯。 选中颜色后可直接复制 HEX / RGB / HSL 任一写法，粘到 CSS 变量或设计软件里； 同一组配色要复用到多个页面时，建议先存成设计令牌再引用，避免各处数值漂移。