色轮配色器

功能说明

色轮配色工具是一款基于 Canvas 交互式 HSL 色轮的在线配色工具，通过点击或拖动色轮选择基色，自动生成多种和谐的配色方案。

支持 6 种经典配色方案：互补色（180° 对立）、相邻色（±30°）、三色搭配（120° 等分）、四色矩形（60°/180° 互补对）、分裂互补（180°±30°）、同色系（明度阶梯）。

每种方案的颜色块点击即可复制 HEX 值，方便快速应用到设计稿。所有计算在浏览器本地完成，数据安全。

使用步骤

1. 在左侧色轮上点击或拖动鼠标选择基色（色轮上 H/S 维度，L 由滑块控制）。

2. 右侧自动展示当前选色的 HEX/RGB/HSL/HSV 四种格式，点击任一格式复制。

3. 在配色方案标签中切换不同的配色规则，下方展示该规则下的所有色卡。

4. 点击任一色卡复制 HEX 颜色码；下方历史色块点击可快速切回之前选过的色。

常见问题

色轮上为什么是彩色的圆？

Canvas 渲染的 HSL 色轮：角度方向（0-360°）代表色相 H，半径方向代表饱和度 S；中心是白色，向外饱和度逐渐增加到边缘纯色。亮度 L 由滑块单独控制。

互补色和相邻色有什么区别？

互补色指色轮上 180° 对立的位置（如红与绿），对比强烈适合强调；相邻色是 ±30° 范围内的颜色（如蓝与蓝绿），过渡自然适合背景。

你可能还想问

互补色、邻近色怎么选？

互补色（色轮相对）对比强烈，适合强调按钮与强调信息；邻近色（相邻 30-60 度）协调柔和，适合大面积背景与整体氛围，两者常搭配使用。

三角色、四角色配色怎么用？

三个等距颜色（三角）活泼均衡，适合儿童与创意类界面；四个颜色（四角）需注意主次，别四色平权平均，否则画面会显得杂乱。

生成的配色落地要注意什么？

先定一个主色，其余按 6:3:1 分配使用面积；同时校验文字与背景对比度，别让协调的配色牺牲可读性。

相关工具

相关内容