跳到主要内容

在线色轮

选择一个基础色,色轮会计算类似色、互补色、三角配色等调色板。复制 HEX、RGB、HSL 或 OKLCH 代码,或导出到 CSS、Tailwind 和 Figma。

#
和谐色

颜色转换

以十种格式查看此颜色代码,可直接复制。

什么是色轮

色轮(又称色相环)按色相把颜色从 0° 排到 360°。它是色彩理论的基础:一眼就能看出哪些颜色相近、哪些相对,以及哪些配色均衡或对比强烈。它被用于网页设计、品牌、UI、插画,以及任何需要用调色板清晰传达信息的项目。

与适合已有具体色值时使用的颜色选择器,或用于从照片中提取颜色的图片取色器不同,Matizly 色轮从单一基础色出发。你在色轮上或通过 Hex、RGB、HSL、OKLCH 确定色相,工具会按所选配色计算其余颜色,并允许你调整、锁定、重新排序和导出调色板。

原色、间色与复色

绘画和学校里使用的传统色轮有十二种颜色,分三个层级构成。

原色

红、黄、蓝。它们无法由其他颜色混合得到,其余所有颜色都由它们产生。

  • 黄
  • 红
  • 蓝

间色

橙、绿、紫。每种都由两种原色等量混合而成:红和黄得到橙,黄和蓝得到绿,蓝和红得到紫。

  • 橙
  • 紫
  • 绿

复色

由一种原色与相邻的间色混合而成:黄橙、红橙、红紫、蓝紫、蓝绿和黄绿。

  • 黄橙
  • 红橙
  • 红紫
  • 蓝紫
  • 蓝绿
  • 黄绿

暖色与冷色

把色轮一分为二,就得到两个色系。暖色(黄、橙、红)让人联想到阳光和火焰:传达能量与亲近感,看起来会向观看者靠近。

冷色(绿、蓝、紫)让人联想到水和天空:传达平静与距离感,看起来会后退。在设计中,通常把暖色留给需要引起注意的元素,把冷色用于背景和休息区域。

暖色
冷色

RYB、RGB 与 CMY:三种色轮

色轮并不只有一种:它会随着混合的是颜料、光还是油墨而变化。

RYB,用于绘画

以红、黄、蓝为原色。这是学校和美术中的传统色轮,适合调配颜料。

RGB,用于屏幕

红、绿、蓝三色光:相加得到白色。显示器、手机和网页设计都使用它,Matizly 的色轮显示的也是它。

CMY,用于印刷

青、品红、黄三色油墨,再加上黑色(CMYK)。叠加时会吸收光。这是印刷使用的系统。

如何使用 Matizly 色轮

点击色轮或输入 Hex、RGB、HSL 或 OKLCH 代码来确定基础色。在菜单中选择配色:类似色、互补色、分裂互补、三角配色、四角配色、方形配色、单色、色调、复合配色或自定义。调色板会即时更新为可锁定、重新排序、编辑或扩展的颜色列。

从每个颜色都可以打开阴影色阶和精细调整;你可以把调色板保存到收藏、复制代码,或导出到 CSS、Tailwind 或 Figma。一切都在浏览器中运行:无需账户,也无需上传文件。如果从照片开始,可以先用图片取色器,再把这些颜色带到色轮中。

色轮配色类型

类似色

类似色在色轮上相邻。Matizly 会从基础色生成五个相邻色调(约 ±20° 和 ±40°)。结果是柔和、统一的调色板,适合背景、安静的区块,以及追求视觉连贯、避免突兀对比的品牌。

互补色

互补配色将一种颜色与色轮上相对的颜色(180°)组合。Matizly 返回基础色与互补色这一对。这是对比最强的配色:非常适合 CTA、强调色,以及在不增加多余颜色的情况下突出某个元素。

分裂互补

不使用正对面的颜色,而是使用基础色及其互补色两侧的颜色(150° 和 210°)。它保留了互补色的对比,但视觉张力更小。适合需要鲜明强调色、又不想让整个调色板两极分化的界面和品牌。

三角配色

色轮上等距的三种颜色(0°、120° 和 240°)。Matizly 从你的基础色计算三角配色。它在鲜明与和谐之间取得平衡:适合有个性的调色板、图标,以及每种颜色都有明确角色的色彩系统。

四角配色

也称矩形配色:两组互补色(在 Matizly 中偏移 60°、180° 和 240°)。它会生成四种变化丰富的颜色。最好选一种作为主色,其余作为强调色,以免界面过于花哨。

方形配色

等间隔的四种颜色(从基础色起 90°、180° 和 270°)。与四角配色相似,但更对称。适合仪表盘、插画,或拥有多个同级强调色的品牌形象,能得到丰富而均衡的调色板。

单色

同一色相、不同明度和饱和度,从浅到深。在 Matizly 色轮中,它表现为同一颜色的色阶。非常适合文字、表面、状态和高度统一的极简主题。

色调

同一色相的变化,主要改变饱和度(在基础色中加入灰色)。色调色阶比纯粹的暗色更柔和、更有质感。适合低调的层级、标签、边框,以及不与内容争夺注意力的背景。

复合配色

将基础色的类似色与分裂互补区域(包括对面色)结合。Matizly 生成丰富但可控的五色方案:类似色用于主要区域,互补色用于强调。

自定义

在色轮上均匀分布的五种颜色(每 72° 一个)。这是一个自由的起点:之后你可以在调色板中移动、锁定或删除颜色,直到得到项目所需的配色。

常见问题

在传统色轮(RYB)中是红、黄、蓝。在屏幕(RGB)上,原色是红、绿、蓝;在印刷(CMY)中是青、品红和黄。

暖色是黄色、橙色和红色;冷色是绿色、蓝色和紫色。暖色吸引注意力,冷色传达平静。

它是色相(0°–360°)的圆形表示,帮助你选择和谐或对比强烈的组合。在 Matizly 中,它可以从一个基础色生成可直接用于设计和开发的调色板。

类似色、互补色、分裂互补、三角配色、四角配色、方形配色、单色、色调、复合配色和自定义。每种都按照不同的色彩理论规则在色轮上排列颜色。

互补色位于色轮的相对两侧(180°)。选择你的基础色,选中“互补色”,Matizly 会自动计算这一对颜色,并提供可复制的代码。

类似色在色轮上相邻,组合柔和。三角配色彼此相隔 120°,在保持三色平衡的同时,生成更鲜明的调色板。

两者都使用四种颜色。方形配色每隔 90° 分布。四角配色(矩形)使用分布不同的两组互补色(在 Matizly 中为 60°/180°/240°),更不对称,强调色也更多样。

单色改变同一色相的明度(和饱和度),从浅到深。色调则通过加入灰色降低饱和度,效果更柔和、更有质感。两者都只保留一个色相。

色轮从一个基础色出发探索配色。颜色选择器适合你已经知道确切代码、想在 Hex、RGB、HSL、OKLCH 等格式之间转换的情况。

可以。你可以复制每个颜色、把调色板保存到收藏,并导出为适用于 CSS、Tailwind 或 Figma 的格式,无需注册。

更多工具