Illustration: Color relationships displayed on a color wheel.
Illustration: Color relationships displayed on a color wheel.
Source colors

Illustrative preview

交互式色轮 — 寻找匹配的色彩和谐

寻找互补色、相似色、三元色、四元色和方形配色方案。调整十六进制、饱和度和亮度,然后免费复制匹配的颜色,无需任何帐户。

拖动以选取基础色——复制每种经典配色方案的十六进制色值。

HEX / CSS 颜色
配色和谐

色轮和谐配色详解

互补色

互补色在色轮上彼此正对——例如蓝色与橙色、红色与绿色。它们能营造出最强烈的对比效果和视觉张力,让设计显得充满活力,也让行动号召按钮更加醒目。建议以一种颜色为主色,其互补色仅作点缀使用,以避免视觉上的冲突感。

分裂互补色

分裂互补色方案由一种基础色加上其互补色两侧相邻的两种颜色组成。它保留了互补色方案的高对比度,同时缓和了视觉张力,让配色更不容易出错。这是非常适合入门的方案:一种主色调,两种辅助点缀色,效果自然均衡。

邻近色

类似色配色方案会选用色环上相邻的三种颜色,例如黄色、黄绿色和绿色。由于相邻色调之间存在共同的底色,搭配效果显得宁静、和谐而自然——就像日落和森林的色彩。建议选定一种主色,用相邻色作为辅助,再加入一种中性色形成对比。

三角色

三色配色方案会选取三种彼此相隔 120 度、均匀分布的颜色,例如红、黄、蓝。即使使用较浅或较柔和的色调版本,整体依然显得鲜活,而且由于没有哪种色相因位置相邻而占据主导,配色始终保持平衡。建议以一种颜色为主色调,其余两种用作点缀和高光。

四色(矩形)配色

四色矩形配色方案使用四种颜色,以两对互补色的形式排列,彼此间隔 60 度。它是所有经典配色中色彩最丰富的一种,但也是最难掌控平衡的一种——建议选定一种主色,弱化其余颜色,并仔细把控冷暖色调的比例。

正方形

方形配色方案会在色环上均匀分布四种颜色,彼此相隔 90 度。与四色配色一样,它也是由两组互补色搭配而成,但由于间距均匀,整体呈现出更强烈、更活泼的冷暖平衡感。当其中一种颜色明显作为主色、其余颜色作为点缀时,这种方案效果最佳。

使用 色轮 可以做什么

在开始之前查看主要功能。

  • 探索互补色与邻近色配色方案
  • 查找三角色、四角色和方形配色方案
  • 复制每种匹配颜色的十六进制代码
  • 实时微调饱和度与明度
  • 为设计配色方案选择基础颜色

设置参考

色轮 的可用控件。

选项

基础色(色相与饱和度)取色器
在交互式色轮上任意拖动,即可选择起始颜色:角度决定色相,与圆心的距离决定饱和度。
HEX / CSS 颜色文字输入
输入或粘贴任意 HEX 色值、rgb()、hsl() 或 CSS 颜色名称,色轮会直接跳到你已有的那个精确颜色。
饱和度滑块范围: 0–100% · 默认: 91%
调整基础颜色的鲜艳程度,0% 为完全灰色,100% 为该色相最纯粹、最浓烈的状态。
明度滑块范围: 0–100% · 默认: 60%
控制基础颜色的明暗:0% 为黑色,中间为纯色相,100% 为白色;所有配色方案都会随之更新。
配色和谐预设
选择要在色轮上突出显示的经典配色关系,并为其搭配色标出标记,让你直观看到配色方案的构成。选项: 互补色分裂互补色邻近色三角色四色(矩形)配色正方形
免费使用 · 无需注册 · 无水印上传过程全程加密传输已根据我们的数据保留政策移除

常见问题

色轮 如何助您完成任务

它每天为企业、创作者和日常任务解决实际问题。找到适合您的用例并开始。

教育经历

学习色彩理论

从你选择的基础色实时计算出各种经典配色方案,并用简单易懂的语言解释每种方案适合什么场合、为什么有效。

面向创作者

选择网站的强调色

在色轮中输入你的品牌十六进制色值,使用分裂互补色或三角对比色方案,找到既有对比又不冲突的点缀色。

面向创作者

在真实界面中预览配色方案

每种配色方案都会应用到一张小样卡上——包括标题、正文、按钮和圆点——让你在实际场景中判断配色效果,而不只是孤立的色块。

面向创作者

艺术与插画配色方案

自然、宁静的场景适合使用类似色搭配,戏剧性的视觉焦点则适合使用互补色,将精确的十六进制色值复制到你的绘画软件中即可使用。

观看每一个转变土地

每张照片都原封不动地穿过斜线,并在另一边完成。