色轮配色 - 在线交互式色轮与配色工具

交互式色轮，一键生成配色方案

这是一个交互式 HSL 色轮，能把一种基准色直接变成成套的配色方案。在色轮上单击或拖动选取色相，互补色、邻近色、三角配色等和谐组合便会即时呈现。

它专为设计师、画师、开发者，以及任何要为网站、品牌、插画或房间选色的人打造。不用再凭感觉猜哪些颜色搭在一起好看，色环上的指示点和连接线会把颜色之间的关系清晰地摆出来，任意 HEX 值都能单击复制。

隐私优先：每一种颜色都通过纯数学和 canvas 在你的浏览器中计算，不会上传、追踪你的颜色，也不会存到服务器上。

在色轮上任意位置单击或拖动即可设定色相。你也可以用基准色取色器，或直接输入 HEX 代码（例如 #6366F1）来精确指定起始颜色。

用饱和度滑块控制鲜艳程度（0% 灰到 100% 鲜亮），用明度滑块控制亮暗（0% 黑，50% 纯色，100% 白）。色轮和色块会实时更新。

从六种配色方案中选一种。色轮会画出指示点和连接线，展示颜色之间的关系，旁边还有一句说明告诉你这套方案适合什么场景。

每个色块都标有名称、HEX 代码和相对基准色的角度。单击色块即可把 HEX 值复制到剪贴板，随手粘进任何设计工具或 CSS 即可使用。

流畅的 canvas 色轮，单击或拖动即可选取 0° 到 360° 的任意色相，中心预览实时显示当前颜色。

生成专业设计师常用的互补色、邻近色、三角配色、分裂互补、矩形配色和单色配色方案。

色轮上的指示点和连接线，清晰展示每套配色与基准色之间的对应关系。

用实时滑块微调每一种颜色，滑块渐变会随当前色相更新，预览完整的取值范围。

用系统原生取色器，或直接输入六位 HEX 代码，精确设定基准色。

单击任意色块即可立即把 HEX 值复制到剪贴板，每个色块都有名称并标注相对基准色的角度。

每种配色方案都附有简短说明，讲清它的作用和适用场景，让你边用边学色彩理论。

触屏和鼠标在电脑、平板、手机上都好用，内置舒适的深色主题。

先单击色轮或输入 HEX 代码选定基准色，再选一种配色方案，比如互补色或三角配色。匹配的颜色会以色块形式出现，并附带 HEX 值，随时可复制进你的设计。

互补色在色环上正好相对，相隔 180°。这种搭配对比最强烈，特别适合想让某些元素突出、抓住眼球的场景。

邻近色是色环上相邻的三种颜色（相对基准色约 ±30°），配色平静而统一。三角配色是间隔 120° 的三种色相，配色鲜明又均衡——通常以一种颜色为主导时效果最好。

互补色用相对的颜色营造强对比和活力，邻近色用相邻的颜色营造柔和、和谐的感觉。想要醒目、突出重点时用互补色；想要轻松、统一的设计时用邻近色。

角度指的是该颜色在色环上相对基准色的位置。互补色显示 180°（正好相对），三角配色显示 120° 和 240°——正是这种等距分布定义了每一种配色方案。

当然可以。每个色块都显示 HEX 代码，单击就能复制。HEX 在 Photoshop、Figma、Sketch、CSS 以及几乎所有设计工具中都能用。如果是印刷，请在软件里把这些屏幕颜色转换为 CMYK。

色轮采用 HSL 模型，所以饱和度控制颜色看起来有多鲜艳或多灰，明度控制颜色有多亮或多暗。整个色轮和每个色块都会按你当前的设置重绘，让你看到配色实际的样子——而不是理论上的纯色。