跳过导航
学习设计

终极配色指南

通过学习色轮,发现最佳配色方案

无论您正在开发一个应用程序、插图,还是您乐队的最新专辑封面,了解哪些颜色搭配起来好看会对您的设计产生巨大的影响。但是有这么多的颜色,我们从哪里开始呢? 这就是色轮派上用场的地方。

在本文中,我们将解释什么是色轮,它如何帮助我们理解不同颜色之间的关系,以及什么是最佳配色方案。

准备好了吗? 让我们开始吧。

目录

等等,什么是色轮?

我们在之前的文章中介绍了 什么是色轮。但回顾一下将有助于为理解配色方案做好准备。

简而言之,色轮是研究颜色及其之间关系的框架。 顾名思义,它形似轮子,由 12 种颜色组成。但我们可以通过将它们分解为三个组来更好地理解它们:原色、次色和三次色。

原色是红色、蓝色和黄色。 我们称它们为原色,因为与次色或三次色不同,我们不能将两种颜色混合在一起以产生它们。

次色来自混合两种原色:红色和蓝色形成紫色,蓝色和黄色形成绿色,而黄色和红色形成橙色。 三次色来自混合一种原色和一种次色,总共给我们六种颜色:红橙色、红紫色、黄橙色、黄绿色、蓝绿色和蓝紫色。

An image showing primary and secondary colors on the color wheel.

三次色来自混合一种原色和一种次色。

基于色轮的配色方案

仅看色轮,您可能已经能够分辨出哪些颜色搭配起来好看 — 以及为什么有些颜色最好分开 🥴  这可能是因为颜色具有 影响我们情绪 的能力。想想情人节的产品通常是粉红色和红色,或者道路危险标志通常是鲜黄色或橙色。

虽然我们的情绪可以是一个有用的指南,但它们并不是确定最佳配色方案的唯一方法。 事实上,颜色在色轮上的位置说明了很多。 让我们仔细看看。

什么是暖色和冷色?

对颜色进行分类的一种方法是按温度 — 即暖色和冷色。 通过将色轮分成两半,您可以将所有暖色 — 如红色、橙色和黄色 — 与冷色 — 如紫色、蓝色和绿色 — 分开。

An image showing warm and cool colors on the color wheel.

我们可以将色轮分成两半,将暖色与冷色分开。

暖色倾向于传达兴奋和警觉的感觉。 想想有多少维生素 C 产品 — 旨在提高您的能量 — 以橙色片剂的形式出现。 或者想想我们将黄色与阳光联系起来,从而与积极性联系起来。

当然,冷色会产生相反的效果。 温度较低的颜色,如蓝色、绿色和紫色,通常会给人一种平静、悲伤或反思的感觉。

An image showing warm colors depicted in a sunset and cool colors depicted by the seaside.

暖色倾向于传达兴奋和警觉的感觉,而冷色会给人一种平静、悲伤或反思的感觉。

什么是类似色?

当使用类似色配色方案时,您可能会更加注意到暖色和冷色之间的差异。 类似色是色轮上彼此相邻的任何三种颜色。 它们搭配良好,因为它们之间没有太多的对比,使它们能够增强彼此的效果。

An image showing an analogous color combination on the color wheel.

类似色配色方案包括色轮上彼此相邻的三种颜色。

让我们以黄色为例。 当您将黄色与橙色和红色结合起来时,您可能会开始想到火灾或其他高温情况。

但是通过关注黄色在色轮上的其他邻居,如黄绿色和绿色,您可能会发现自己从火灾中降温,喝一杯清爽的酸橙汁。

An image showing analogous color schemes in fire and in lemon-lime juice.

类似色组合中的颜色不会彼此对比太多。 相反,它们会相互影响每种颜色传达的感觉。

什么是互补色?

与类似色不同,互补色彼此相差甚远。 事实上,这种组合指的是色轮上直接相对的两种颜色。 一些例子包括橙色和蓝色、红色和绿色或紫色和黄色。

An image showing complementary colors on the color wheel.

互补色是指色轮上直接相对的两种颜色。

位于色轮的相对两侧,它们通常由一种暖色和一种冷色组成,这意味着它们直接对比。

使用这些组合,您可以进行高对比度并传达大胆和积极的感觉 — 想想橙色的日落照耀在蓝色的大海上。 或者,您可以专注于一种颜色并将另一种颜色作为强调色 — 想想红色的装饰品闪耀在绿色的圣诞树上。

An image showing complementary colors in a sunset and in a Christmas tree.

虽然这些颜色与色轮中的蓝色、橙色、绿色或红色并不完全相同,但它们仍然向我们展示了互补色如何直接对比或相互支持。

什么是分裂互补色?

喜欢将一种颜色作为关注中心,同时添加一些强调色的想法吗? 分裂互补色组合正是您想要的!

您可以使用 等腰三角形 来识别分裂互补色组合,其中每个角都指向不同的颜色。 这意味着总共三种颜色。 一些例子包括红色、黄绿色和蓝绿色,或黄色、红紫色和蓝紫色。

提示: 使用等腰三角形来识别分裂互补色组合? 您需要确保两个底色之间只有一种颜色。
An image of split-complementary color scheme on the color wheel.

使用等腰三角形,我们可以在红橙色、绿色和蓝色中识别出分裂互补色方案。

不确定如何实现分裂互补色? 您可能只需要从您的设计中退一步,散步一下,让大自然激发您的灵感 — 尤其是在您有幸住在被绿树和蓝天环绕的岩石橙色山脉附近的情况下。

虽然下图中的颜色与我们在色轮中看到的颜色并不完全匹配,但它仍然使用了红橙色、蓝色和绿色的色调 — 以红橙色为中心。

An image showing a split-complementary color scheme in nature.

分裂互补色组合非常适合专注于一种颜色并将其他两种颜色用作强调色。

什么是三元色?

本着使用三角形的精神,我们需要另一个三角形来识别我们的下一个配色方案:三元色。 只有这次我们需要一个等边三角形,因为我们正在寻找均匀分布在轮子周围的三种颜色 — 如红色、蓝色和黄色!

由于每种颜色之间的距离相等,三色组合会产生高对比度的效果。但这也意味着没有两种颜色过于接近,因此您无需担心过度强调暖色或冷色。换句话说,三色配色方案非常适合传达平衡与和谐的感觉。

An image showing a triadic color combination on the color wheel.

三色组合由色轮上均匀分布的三种颜色组成。

红色、蓝色、黄色、平衡——如果这些颜色和词语让您觉得熟悉,那么您很可能想到荷兰画家皮特·蒙德里安,他最著名的是只使用原色来传达不对称感。

An image showing the three primary colors Piet Mondrian used in his paintings in the 1930s.

荷兰画家皮特·蒙德里安最著名的是只使用原色来传达不对称感。

什么是四色颜色?

如果您认为三种颜色组合已经很多了,那么准备好突破这些界限吧。四色颜色组合了两个互补色对,总共是四种颜色。在色轮上,您可以使用矩形或正方形来找到四色方案,每个角指向不同的颜色。

An image showing tetradic color combinations on the color wheel.

在色轮上,您可以使用矩形或正方形来找到四色方案

四色方案将让您使用色轮的三分之一。所以,如果您想获得充满活力、色彩缤纷的外观,这很可能是一个完美的选择——无论您是设计引人注目的徽标,还是制作冰淇淋圣代。

An image of a parrot with a tetradic color scheme.

虽然红色很微妙,但这只鹦鹉是一个行走的(也可能说话!)四色组合。

但如果您担心它可能有点过于繁忙,您会想看看我们的下一个建议👀

什么是单色颜色?

正在寻找与四色配色方案相反的东西?您可能对单色颜色组合感兴趣。单色方案不是组合色轮上不同的颜色,而是使用一种颜色的各种色调。您甚至可能从它的名字中猜到——“mono”表示单个,“chromatic”表示颜色。

An image showing a monochromatic color scheme on the color wheel.

单色方案不是组合色轮上不同的颜色,而是使用一种颜色的各种色调。

通过使用不同的色调和亮度级别,单色颜色组合允许您深入探索一种颜色。如果您希望在不矫枉过正的情况下添加一些颜色变化,这是完美的选择。

An example of a monochromatic color scheme found in Nature.

我们可以在这张照片中识别出不同的蓝色色调——在天空、水,甚至在山脉中。

就这样!您现在不仅了解了色轮,而且还准备好像专业人士一样混合和匹配颜色。要测试您所学到的知识,请尝试识别您最喜欢的一些设计中的颜色组合。您还可以尝试构建自己的调色板,并将其应用于您自己的设计使用我们的 Mac 应用程序。如果您这样做,请不要忘记在InstagramTwitter上使用#MadeWithSketch标签与我们分享!

您可能还喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新东西,我们都会让您在几分钟内完成设置并准备好做最好的工作。

免费开始
免费开始