跳过导航
学习设计

终极配色指南

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

无论您是在设计应用、插画还是乐队的最新专辑封面,了解哪些颜色搭配在一起看起来不错都会对您的设计产生巨大影响。但是,有如此多的颜色可供选择,我们从哪里开始呢?这就是色轮派上用场的地方。

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

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

目录

等等,什么是色轮?

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

简单来说,色轮是研究颜色及其之间关系的框架。顾名思义,它形状像一个轮子,由 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 的新手,还是回来查看新功能,我们都将在几分钟内让您做好准备,并能够完成最佳工作。

免费开始
免费开始