理解颜色以及如何配色

产品经理在工作的过程中经常会碰到关于颜色的问题,照理来说这应该是UI设计师的工作内容 —— 决定界面元素的颜色和产品配色方案。但我们又如何能分辨UI设计师给到我们的方案是好是坏? 好的色彩搭配可以影响用户使用这个产品的心情,更能突出页面焦点,引导用户的行为。 这要求产品经理在色彩上拥有一定的把控能力,往大了说可以追求最好的用户体验,往小了说也不会被偷懒的UI设计师忽悠。

我在Youtube上发现了一个视频,根据这个视频的内容翻译整理成一篇文章分享给大家。

文章分为三个部分。

  • 为什么色彩如此地重要
  • 饱和度和明度如何影响图像
  • 6种最常用的配色方案

首先我们从色彩的重要性开始说起。

正确的使用色彩可以影响图片所传达的内容,把观察者的注意力引导到画面的重点上,就像下面这张图。

Created by Cornelius Dämmrich Created by Cornelius Dämmrich

当我们看到这张图的时候,眼睛会立刻去关注画面中间的这个漂亮的绿色圆柱体。色彩也可以用来讲述一个故事或控制画面的情感基调,如上图中大量使用暗灰色为主色给人以压抑阴森之感。在很大程度上,色彩的使用会决定一幅图像的成败。
正确地使用色彩并不容易,虽然在现实中我们身边到处都有大量的饱和度和阴影的事物,但我们都不曾去关注他们。因此,当我们需要使用他们的时候,从脑海里找出能用的色彩搭配是件很困难的事情。
我们从孩提时期开始,对色彩的分类就非常简单, 红色、蓝色、黄色等一些其他的颜色。
bcolor
但当我们直接使用这些颜色作为配色时,通常所构建出的画面非常的难看。比如这样:

但为什么呢?

色彩的饱和度和亮度就是其中的原因


饱和度就是色彩的纯度,它是颜色运用不当最大的原因之一,第二个是亮度,亮度是表现色彩的明暗程度。让我们看一下下图,左边是100%的饱和度,看起来很刺眼,不好看对不对? 再看一下右边,当我们吧饱和度降到20%的时候,它看起来像是有点小清新的粉红色,柔和了许多。从这个例子可以看出,饱和度的改变会让颜色产生出完全不同的效果。

这次我们来试一下改变明度,左边的明度是100% 右边的明度是20%,

你能看到红色转变成了棕褐色。

当我们把饱和度和明度同时改变就变成了下图的样子。

甚至如果单纯地改变明度和饱和度就能只用唯一一种颜色画出一副画。

这幅画是通过红色与黑色和白色进行一定比例的混了,来改变颜色的饱和度和明度,因此就可以只使用一种颜色来创造出整个令人惊喜的画面。

所以? 为什么饱和度和明度那么重要呢?
基本上,它能成就或者破坏一副作品。
我们来看看下面这张CG图:

在这张图中,最大的问题就是太高的色彩饱和度使得画面使得有些假。很多人选择高饱和度是为了使画面更加的生动,但现实中并没有那么高的饱和度,高饱和度不仅看起来会非常失真,而且会使观察者的眼睛得不到休息,这在作品中十分重要,像是这副话如果长时间看它会感到非常的不适。
让我们降低一下饱和度。

是不是更像真实世界了?

但是也不是说高饱和度的颜色都是不好的,关键在于怎么去应用颜色,和作品想要表达的意思。


Maxfield Parrish – Salzkarawane am toten meer (from ArtRenewal.org)

在这幅作品中,我们的注意力会不自觉得集中在和背景产生高对比度的饱和度很高的红色山峰上,这是作者故意的,让我们的注意力可以保持在作者所要表达的画面重点上。


莫奈——《亚嘉杜的罂粟花田》

在莫奈的这幅《亚嘉杜的罂粟花田》里,莫奈也是试图让你注意到这些红色的花。这些花的高饱和度和红颜色感觉几乎要跳出画面,这令人很吃惊,这也成了你对这幅画的一个记忆点。

高饱和度也用于故事的叙述上。历史上有很多名画,耶稣总是穿着红色的衣服,这是人们的注意力集中于他,同时也让他看起来高大威严。


John Singleton Copley – The tribute money (from ArtRenewal.org)

在动画中,高饱和度和明亮的颜色也起到了非常好的作用。它能使画面变得明快,并且看上去卡通感十足,构造了卡通中明快梦幻的感觉。


Frozen

亮度和饱和度还能控制画面的情感基调。我们来对比下面两张图。

在这张图中,使用了多种明亮的颜色,这些颜色充满了生气,很好的表达了生活喜悦和快乐的情感。
但在伤心的时候,画面的整体基调就会变成低饱和度和明度,且颜色使用数量也很少,比较单调。这能让你感受到角色正在经历难过与失落。

色彩是个强有力控制画面情感基调的方式,以至于被广泛地应用于好莱坞的各种电影中,当然游戏中应用得也非常多。

色彩还被应用于构图中,在下面这幅画中,我们的视线也会立即被画面中部红色吸引,只通过一些具有高饱和度色彩的事物就能成功地使人的视线从前景转移到背景上面来。


Giuseppe de Nittis – The place de carrousel and the ruins of the tuileries palace in 1882 (from ArtRenewal.org)

在下面这幅图中,左下角高饱和度的鹦鹉给画面提供了一个基点,让我们可以以此开始观察整个画面,可以想象没有这只鹦鹉的话这幅画会逊色不少。

这些就是关于饱和度和明度的内容,总结一下:

  1. 不要滥用。 不要把画面中的颜色饱和度和明度都设置过高,这样画面会变得很糟糕。
  2. 使用它来引导观察者的注意力
  3. 使用它来叙述故事
  4. 用它来控制画面的情感基调。在欢乐活泼的画面中使用明亮的颜色,在悲伤的画面中使用低饱和度的颜色。
  5. 用它来吸引注意力

我们接下来看看色彩应该如何搭配

色彩的协调搭配,就是这些色彩要如何组合才能看起来更加好看。在色彩设计中,不同的搭配会有不同的效果,所以接下来我们要讲到6种流行并且看上去很好的色彩搭配色系组合。这些都很简单,我们可以轻易地应用到作品当中。但首先,我们得了解一些关于色轮的知识。

色轮

色轮

色轮由 12 种基本的颜色组成。首先包含的是三原色( Primary colors ),即蓝、黄、红。原色混合产生了二次色( Secondary colors ),用二次色混合,产生了三次色( tertiary colors )。
原色是色轮中所有颜色的“父母”。在色轮中,只有这三种颜色不是 由其它颜色调合而成。三原色在色环中的位置是平均分布的。二次色所处的位置是位于两种三原色一半的地方。每一种二次色都是由离它最近的两种原色等量调合而成的颜色。三次色是由相邻的两种二次色调合而成。每一种颜色都拥有部分相邻的颜色,如此循环成一个色环。
颜色有明暗之分――或者称为颜色数值。为了显示颜色的明暗,所以色轮有多个环。两个外围的大环是暗色( Shadow colors ),里面两个小环是明色 (tint colors) 。
色轮有五个同心环组成,从暗到亮――暗色处于大环,明色处于小环,而中间是颜色的基本色相。
色轮是

色轮是我们学习配色的基本工具。

第一种:单色系组合


单色系组合很简单,它只使用了一种颜色。最适合单个对象,因为它能够使注意力集中,通过饱和度的变化来观察画面中的细节。也能用来营造戏剧效果。

在上面这个例子中,你的注意力会被吸引到黄色的岩石和浓雾上,

而在这幅画中,除了上面的黄色月亮,整幅画都是红色,营造了一种非常让人震撼的气氛。

还有下面这一副恐怖类型的画,只使用了黄色,营造出了一种惊悚恐怖的感觉。

第二种:类比色组合


它是色轮上相近的集中颜色的组合,这种组合通常眼睛看着会感觉很舒服,表达了和睦与舒适的感情,主要是因为它在现实生活中随处可见。我们来看一些例子。

首先,你看到图片背景上都是紫色的,但椅子上的饰品使用了蓝色,还有一朵具有视觉冲击力的粉红色的花在这位女士胸前,把这个类比色用得非常好。

这是一个户外风景的例子,我们能看到照片前景使用了大量的暗绿色和明亮绿色的组合,天空是蓝色的。这是自然中类比色的一个例子。

这幅画也是非常棒的例子,画面很好,尤其是人物穿着的红裙子,其他地方运用了粉色和紫色。

第三种:等距三色组合


这种组合最难使用,它在色轮上之间的距离都相等,它最适合用在卡通或者超现实的场景中。让我们来看几个例子。


你在这幅画中又能看到穿着红色衣服的耶稣,运用蓝色和黄色突出了其他要素。非常愉悦的视觉效果。


在这个例子中,主要运用了橙色、绿色和蓝色,你可以看出效果很好,画面非常活泼。

第四种:互补色(对比色)组合


它是在色轮上相互对立的颜色,这种组合在作品中运用得非常多,眼睛看到这种颜色会自然得感到愉悦。但要注意的是,你不应该两种颜色的范围相当,比如一半使用红色一半试用绿色,这会看起来非常难看。 你应该使用一种颜色为主色调,通常是饱和度弱一点的颜色。在上面这种情况中,红色和绿色,你应该更多得使用暗绿色,把它使用在大多数面积上,再使用点鲜艳的红色。
来看一些例子。

这幅图的颜色用的很大胆,你可以看到画面中运用了大量的绿色,图中女士穿漂亮的绿裙子,还有一篇绿色的草地,当然还有红色的布,她的红头发,还有日落等组成了一副非常漂亮的画。

这幅画,看起来很像单色系组合,但当你注意看图片的背景时,能发现作者使用了一些紫色。

这是一个运用冷色和暖色这一自然的对比色很好的例子,图片中大量使用冷色调,在门上使用了一些类似灯光的暖色,这可以用来改变画面的情感气氛。

在这个例子中,作者运用了红绿这个对比色,看来来非常不错,视觉效果也很棒。

这幅画就非常明显了,大量的红色和绿色作为互补色。

Created by Cornelius Dämmrich

在我们之前展示的这幅画种,也使用了对比色。画面的整体色调是蓝色, 灯光处使用了橙色来点亮灯泡。在屏幕上,我们也能看到一些橙色的元素。

《权力的游戏》中的Drogo, 整体画面使用了黄色和橘黄色,但你能在他肩膀的图腾还有灯光上看到蓝色,平衡了整个画面的色调。 可以想象如果没有蓝色的灯光这个画面的效果就没那么好。

第五种:分散互补色


分散互补色和我们之间将的互补色很像,也是互补色,不同的是使用对立色旁边的两个颜色,它具有更自由的创造性。通常这样的颜色组合会使人感到富有生机和喜悦。我们再看一些例子。

这幅画很好的运用了分散互补色,墙上紫色的花,右下角黄色的花和黄色的背景,绿色的叶子。使得这个画面具有视觉冲击力和愉悦感。

在这幅图中,有非常漂亮橙色的树,引人注目的绿色草地还有漂亮的蓝天,这三种颜色构成了整个画面。看起来很不错。

这幅画有点难以区分,但很明显在机器人身上有一点黄色,当然还有蓝色的天空,你还能看到橙色,就在背景日落的地方。

这幅画看起来只有两种颜色,但实际上有三种,能看到画面上大量的水绿色,在背景上打上了红色的光。还有黄色的皮肤。

还有这幅画,你可能觉得仅仅是互补色的组合,以为蓝色的背景加上魔法橙色的光,但仔细看的话会发现女主的头发是红色的。不仅如此,旁边的窗帘也是红色的。很棒的分散互补色运用。

还有这幅画,非常的可爱,色彩运用非常好,尤其在动画片中,这种高饱和度的色彩能够使人感到活泼与喜悦。你可能会困惑,天空不是蓝色的吗? 其实你仔细看的话会发现那并不是蓝色,而是水绿色。

第六种:双互补色组合


它由两组互补色构成,最适合用于前景或者背景,非常不建议在一个区域里把所有的颜色都混合在里面。通常是一组应用在背景,来平衡另外一组带来的冲击。永远不要平均地使用四种颜色,会使画面非常混乱。这种组合比较难使用,但是使用好了效果会很好。
来看例子吧

这个是前景和背景的例子,我们能看到前景中使用了绿色和红色这对互补色,而在背景上使用了黄色和紫色来平衡画面。

这也是一个非常好的例子,前景红色的建筑和墨绿色的水,背景是蓝天和黄色建筑。

在这个例子中,首先引人注目的是这顶红色的帽子,作为对比色使用的是绿色的衣服。为了平衡画面在背景使用蓝色的灯光,还有一些黄色。

总结一下

  • 饱和度:适度使用,不要滥用,最好是只在高亮区域上用一点点的在关键点上,或者用来叙述故事。
  • 明度:用明度来造成鲜明的对比来吸引注意力,比如在黑暗中的灯光。

  • 色彩平衡(搭配)

    1. 单色组合
    2. 类比色组合
    3. 等距三色组合
    4. 对比色组合
    5. 分散对比色组合
    6. 双互补色组合