色轮——非设计师的基本设计指南

已发表: 2022-12-26

色轮——非设计师的基本设计指南

你能想到你最喜欢的颜色吗? 嗯,这很容易。 现在您能想到一种您认为与您的品牌信息最相关的颜色吗? 棘手,但色彩心理学挽救了这一天。 现在你能想出一种颜色与你最初选择的颜色搭配起来会很好看吗? 这就是混乱开始的地方,对吧? 我们今天要解决这个小困惑。 如何? 通过谈论色轮。

如果您现在已经为您的品牌创建营销设计一段时间,您可能已经知道一种颜色并不适合所有人。 您需要知道什么颜色适合您的品牌。 你需要知道什么颜色适合你的观众。 为此,有两个因素在起作用——色彩理论和色彩心理学。 我们已经谈到了色彩心理学。 现在让我们谈谈色彩理论。 特别是关于色轮以及它如何帮助区分“设计”和“好的设计”。

  • 那么,什么是色轮?
  • 色轮和品牌设计
  • 你应该知道的 7 种配色方案
    • 1.单色配色方案
    • 2. 类比配色方案
    • 3. 互补色方案
    • 4.拆分互补色方案
    • 5. 三元配色方案
    • 6. 四边形矩形配色方案
    • 7.方形配色方案
  • 结束您与 Kimp 的配色方案混淆

那么,什么是色轮?

金普设计

选择颜色是有创意的。 当您将一点科学应用于您的创造力时,您可以识别不同场合的颜色组合。 这是关于选择搭配起来很好看的颜色,对比鲜明或毫不费力地混合的颜色。 色轮可以使您的选择更加简单。

色轮的字面定义是

“用于显示颜色之间关系的光谱圆图”。

简而言之,色轮是根据颜色的特性和感知这些颜色的方式对颜色进行的圆形排列。 这个想法来自牛顿圆盘的概念。

空白的
资源

基本色轮包含 12 种色调(纯色),包括:

  • 3原色(其他颜色无法合成的原色)
  • 3种二次色(通过组合2种原色获得)
  • 6 种三次色(通过组合一种原色和一种二次色获得)

设计中常见的两种色轮是以RGB(红、绿、蓝)为原色或以RYB(红、黄、蓝)为原色的。 虽然 RGB 基于光谱 - 所有色调的组合都会产生白色。 而 RYB 基于油漆颜色的工作原理。 你混合的颜料越多,你组合的色调越多,你就越接近黑色。

这就是为什么您会发现印刷设计师和数字设计师使用的配色方案存在细微差别的原因。 那么,为什么很好地理解色轮对营销设计很重要呢? 我们会告诉你

色轮和品牌设计

从代表您品牌的标志到帮助建立联系的名片,从传递您的信息的社交媒体设计到影响客户体验的包装设计——只要有您品牌的视觉表现,颜色就是主导。 您知道吗,单是颜色就能影响近 85% 的购买决定? 任何有助于您更好地理解这种有影响力的视觉属性的想法都是有价值的。 这就是为什么了解色轮是迈向更好设计的重要第一步。

有些颜色并排放置时看起来不错。 但是把一个放在前台,事情就会变得如此不同。 前景中的颜色要么难以区分,要么会造成过多的视觉干扰,使设计看起来不舒服。 你不希望出现这种情况!

下表显示了网页设计中不同颜色组合的效果。 类似的规则适用于营销设计中文本的易读性。

空白的
资源

两种颜色之间的对比告诉您前景中的文本相对于背景颜色是否清晰可辨。 否则,由于您的副本和其中的信息不清晰,将浪费两种好的颜色。 避免这种情况的一种方法是了解所选颜色在色轮上的位置,并根据常用的色彩和谐或配色方案选择正确的组合。

那么,现在让我们来谈谈配色方案以及如何在您的设计中使用它们。

你应该知道的 7 种配色方案

色彩和谐或配色方案是两种或两种或更多种颜色的组合。 您根据色轮中相应颜色的位置得出这些组合。 您选择的颜色之间的关系决定了当您将它们并排放置或相互放置时它们的外观。 良好设计的关键在于正确组合。

两种颜色之间的关系可以简单到它们看起来有多相似或有多不同。 在色轮上,离颜色越远,对比度就越高。 太多的对比或太少的对比都会影响易读性和设计的美感。 要了解如何以及在何处使用这些想法,让我们谈谈配色方案。

在我们到达那里之前,您会发现经常使用术语 hue、tint、shade 和 tone。 如果您还不知道,

  • 色调是纯色
  • 色调 = 色调 + 白色
  • 阴影 = 色调 + 黑色
  • 色调 = 色调 + 灰色
1.单色配色方案

要更好地理解这一点,您需要了解包含纯色色调和阴影的扩展色轮。

空白的
金普设计

当您通过在上面的色轮上垂直前进来选择调色板时,您会得到一个单色调色板。 换句话说,这是一种色调及其色调、色调或阴影的组合。 总的来说,这个方案还算中规中矩。 只有一种主色。 因此,如果您确定了一种能够强烈反映信息情感的颜色,那么单色方案就可以了。 没有矛盾的颜色会分散观众对核心信息的注意力。

围绕您的品牌颜色构建的单色配色方案有助于将您的品牌颜色置于聚光灯下。 这些是品牌设计的绝佳选择。 持续使用它们可以帮助客户将您的品牌与您的品牌颜色联系起来。

空白的
Kimp 的社交媒体设计

Kimp 提示:当您选择单色调色板时,最高级别的对比度位于单色色轮中心的颜色与同一垂直部分中最外层的颜色之间。 因此,如果您正在使用单色配色方案并想知道如何使设计中的文本清晰易读,请选择相距较远的颜色值。

2. 类比配色方案
空白的
金普设计

如果你想打破单色的单调,但又希望保持组合的柔和,类似的配色方案是你最好的选择。 要想出一个类似的配色方案,您可以在色轮上选择一种主要颜色以及紧邻它的两种颜色。 这三种颜色看起来像是渐进的,从一种色调到另一种色调的柔和过渡。 这就是使它成为一种令人愉快的配色方案的原因。

当你必须创建渐变背景或当你想传达一个强烈的主题,比如受自然启发的设计时,你可以选择类似的方案。

空白的
Kimp 的社交媒体设计

在上面的设计中,粉红色是情人节主题的完美颜色。 但是单色调色板意味着对比度较低。 使用单色调色板时,很难立即将注意力吸引到 CTA 或焦点文本(在本例中为价格)。 但不能选择打破情人节主题的强烈色彩。 这就是橙色等类似颜色最合适的地方。 恰到好处的对比将您的注意力吸引到设计中的焦点元素上,但和谐的组合不会破坏主题!

Kimp 提示:无论是单色还是类似的配色方案,颜色之间都没有明显的对比。 因此,在视觉数据解释等需要显示两个或多个参数之间明显差异的地方,请远离这些方案。 但是,如果您有一个条形图或饼图来捕获略有重叠的参数,这些方案可能会起作用。

3. 互补色方案
空白的
金普设计

在色轮上彼此直接相对的颜色是互补色。 正如我们之前讨论的那样,当您远离任何颜色时,对比度会增加。 因此,最高对比度出现在互补色之间。 当您必须将它们一起使用时,这既是优点也是缺点。

当您必须使用对称平衡来平衡页面上的视觉权重时,高对比度可以帮助您创造视觉平衡感。 或者换句话说,当您需要在设计中表示具有相同权重或优先级的两个不同元素时。

但是考虑到高对比度,当你在前景和背景中使用这些颜色时,它们最终会产生过多的冲突。 其结果是导致大量视觉疲劳的设计。 换句话说,如果背景颜色与字体颜色互补,阅读文本会感觉不舒服。 一些互补的配对看起来不错,但其他配对会让您的设计看起来很糟糕。 例如,红色和绿色是互补色。 如果您为字体和背景选择它们,则设计结果如下。

空白的
资源

色调之间有很好的对比,因此您可以清楚地阅读文本,这是毫无疑问的。 但正是这种组合破坏了这里的效果。

另一方面,当你使用彼此相邻的互补色时,就像在标志设计中一样,它们创造了一种美学上吸引人的平衡。

这是一个使用互补色对的设计——黄色和紫色。

空白的
金普标志设计
4.拆分互补色方案
空白的
金普设计

当你想要在你的设计中有足够的对比度并且你需要至少三种颜色来传达信息并正确强调每个元素时,拆分互补方案会派上用场。

要创建拆分互补调色板,请选择您的主色。 确定它的互补色并选择位于该互补色两侧的两种色调。 这三种颜色放在一起形成了一个分裂互补的方案。

空白的
Kimp 的社交媒体设计

在上面的设计中,蓝色和紫色的文本部分不会相互冲突太多。 因此,阅读设计中的文案是愉快的。 对比鲜明的黄色的持久性有机污染物增加了一个有趣的元素。 它有助于在不破坏和谐的情况下使设计更具吸引力。 这就是分裂互补配色方案的作用。

Kimp 提示:互补色调旁边的颜色之间的对比度很小。 但是你选择的主色与这些颜色中的每一种都有最强烈的对比。 因此,在您的大多数设计中,创造愉快的和谐很重要,您可以选择对比度最小的一对。 对于 CTA 或英雄文本或标题文本等焦点元素,甚至文本重音,您都可以选择主要颜色。

5. 三元配色方案
空白的
金普设计

如果你必须在色轮上画一个等边三角形,你会得到一个三色调色板。 换句话说,三色配色方案是指您选择三种相距相等的不同色调。

您不必担心互补色的强烈对比或类似色的弱对比。 这个结合了两全其美。

这里恰到好处的对比可以帮助您通过差异创造平衡。 您可以玩转具有不同情感价值的颜色,从而使设计保持生动和互动。

使用三重配色方案,您可以结合暖色调和冷色调。 因此,您的设计不会显得阴郁或过于激烈。

空白的
Kimp 的社交媒体设计

上面的例子对设计的两种主要颜色给予了相同的权重,绿色提供了正确的对比来吸引注意力。

6. 四边形矩形配色方案
空白的
金普设计

大多数设计师建议在您的设计中最多使用两种或三种颜色。 这就是划分内容并提供区域之间对比所需的全部内容。 但是当你需要比这更多的颜色时,四元矩形调色板是一个不错的选择。

你如何形成一个四边形矩形配色方案? 选择一对互补色。 现在画一个矩形连接位于这些补色两侧的颜色。 这四种颜色形成一个四元矩形调色板。

这里有两对,每对之间的对比很小。 但是与每一对的对比是清晰可辨的。 但是没有像互补色那样引起眼睛疲劳的对比度。 因此,您可以保持文本的易读性,同时获得足够的颜色来使您的设计栩栩如生。

7.方形配色方案
空白的
金普设计

如果你想进一步柔化四边形矩形配色方案中的对比度并创建一个令人愉悦的调色板,那么方形配色方案就可以了。 顾名思义,您可以通过在色轮上画一个正方形来获得它。 这些是均匀分布的颜色。 所以,你会得到微妙的对比以及类似颜色的温和和谐。

Kimp 提示:由于此方案中的所有颜色在设计中似乎具有同等的主导地位,因此请尝试通过调整这些颜色出现的数量来改变它们的视觉权重。 例如,您可以使用其中一种作为背景色,其余的可以用作文本部分和 CTA 的强调色。

结束您与 Kimp 的配色方案混淆

颜色、色调、对比度、配色方案、色轮——我们知道作为非设计师,这可能有点难以消化。 但既然您已经有了一个概览,我们相信您看待设计的方式将会改变。 你会明白为什么你的设计师会根据你推荐的原色选择一个特定的调色板。 此外,当您与像 Kimp 这样的指定设计团队合作时,您与设计师的融洽关系会随着每个设计而变得更好。 因此,您可以确定您的设计师能够捕捉到您在设计中期望的情绪和视觉主题。

现在注册即可免费试用 7 天。