什么是色轮？

选择一个基础色，在交互式色轮上查看互补色、类似色、三色组、分裂互补色、四色组和单色配色方案。每个色块都会显示与黑白的 WCAG 对比度，并可将完整配色导出为纯文本或可分享的 PNG 图片。

色轮基于 HSL 模型,你可以直接拖动基础色相,也可以输入任意 HEX 值,匹配的色块会实时跟着旋转。饱和度和明度滑块用于一次性调整整套配色。每个生成的颜色都能一键复制成 HEX、RGB、HSL、CMYK 或 OKLCH,色轮上还会用带标签的圆点标出每个配色位置,让你看清颜色之间的关系。

使用方法

1. 在色轮上点击或拖动选取基础色相，也可以在输入框中输入特定的 HEX 色值。
2. 选择配色类型（互补色、类似色、三色组、分裂互补色或四色组），查看色轮上高亮显示的匹配颜色。
3. 点击色块即可复制 HEX、RGB、HSL、CMYK 或 OKLCH 格式的颜色值。支持将完整调色板导出到设计工具中使用。

何时使用

• 品牌主色已定,再为它挑选三到四个搭配色,组成完整视觉包。
• 为按钮选取与背景在色相上对立的颜色,实现最大对比度。
• 构建 UI 色板时,让相近色调显得协调而不是刺眼。

结果

一位网页设计师选择 #E87040 作为品牌色，切换到三色组配色方案，一键即可获得三个均衡的强调色用于着陆页设计。

常见问题

类比配色和三角配色有什么区别?

类比配色选取色轮上相邻的颜色(差距约 30 度以内),整体感觉柔和统一。三角配色在色轮上每隔 120 度取一色,对比强烈又保持平衡,常用于让设计显得有活力。

什么时候用互补色,什么时候用分裂互补色?

互补色取两个完全相对的色相,冲击力最强,但两边都饱和到底容易刺眼。分裂互补色保留基础色,搭配对侧颜色的左右两个邻居,既保留张力又更柔和,搭配起来更容易平衡。

为什么我调明度滑块,搭配颜色也跟着变了?

色轮保留相对的色相偏移,但会把你的饱和度和明度应用到所有结果上。这样在 40% 明度下的类比绿都是深森林色调,不会出现深绿和荧光绿混在一起。

能把配色导出成 CSS 变量或设计工具的格式吗?

点击任意色块即可复制 HEX、RGB、HSL、CMYK 或 OKLCH 到剪贴板。直接粘到 CSS 文件里写成 --brand-primary: #E87040,或粘到 Figma 的 hex 输入框,或填到 Tailwind 的自定义色板配置,都没问题。

四方配色就是矩形配色吗?

是的。四方配色(也叫矩形配色)在色轮上选取构成矩形的四个颜色,等于两组互补色。配色更丰富,但必须有一个主色调,否则整体会显得过于花哨。

相关工具