UI 设计知识库 [03] 色彩 · 配色

目 录 [隐藏]

1 色彩的特征

1.1 色轮

1.2 色彩关系

1.2.1 色彩层次

1.2.2 明度层次

1.2.3 饱和度层次

1.2.4 色相层次

1.2.5 色彩场景

1.3 冷暖色

1.3.1 冷暖倾向

1.4 色彩膨胀

2 配色理论

3 色彩配比

3.1 配色主旨

3.1.1 单色主导

3.1.2 调和主导

3.1.3 色调主导

3.1.4 强调色主导

3.1.5 对比主导

3.2 配色技巧

3.2.1 自然的渐变层次

3.2.2 画面浑浊与干净

4 色彩搭配的心理效应

4.1 暖色青睐

4.2 非自然色吸引力

4.3 侧抑制效应与马赫带

4.4 文化背景

这是《nullice 的 UI 设计知识库》的第三篇文章，是“色彩”系列最后一篇 。

前两篇写的是关于色彩的一些理论概念的知识，而这篇是具体的配色知识和技巧。

色彩的特征

色轮

色轮又称为色环、色相环，是根据色彩特征制作的工具，用来辅助色彩的选择和方便色彩特征的判断。

各种种类色环

色轮有很多种，比如蒙赛尔色轮、牛顿色环、伊登 12 色相环等等。经常可以看到说色轮中相对的颜色是补色，相邻的是邻色，相间的是间色，所以有人会误解以为 2 种颜色互为补色或者间色是因为在色环上的排列，但是真正的逻辑这正好与这相反，并非是颜色在色环上位置决定了色彩的关系，而是色环上颜色的位置是根据色彩关系人为制定的，知道这个，你就能理想为什么会有不同的色环、不同色环上颜色的颜色位置不一样了。

12 色相环

一般人们说的 12 色相环是以红、黄、蓝为初始基色，再分别把红-黄混合得到橙色放在红-黄之间、蓝-红混合得到紫色放在蓝-红之间，红-黄混合得到绿色放在红-黄之间，得到 6 种颜色再这样混合一次得到 12 色相环，这样虽然看似合理，但是却不能很好的反应颜色间真正的距离，比如黄色到蓝色之间的绿色本应有更大的范围，而黄色到红色的距离应该更小，所以其实这种色相环并不能很好的反应各种色彩间的距离关系。

而要更好的反应各种色彩间的距离关系，RGB 遍历色相环是一个方便的选择，这种色相环根据 RGB 色彩模式数值挨个排列，也被称为 HSB 色环、色轮，也就是列举所有 HSB 色彩模型的 H （色相）值。（不过这虽然比 12 色相环能更好的反应色彩间的距离关系但是这也不是最精确的，因为没有考虑人真实的色彩视觉感受，要更加准确的描述色彩间的距离关系需要色貌模型，只是一般设计师不需要用到那么精确。）

RGB 遍历色环

而人视觉的实际的补色应该是根据色彩感知第二层次，视神经中互相抑制的 2 通道的颜色，也就是 红-绿，黄-蓝互相对抗的关系，而根据这个理论设计的 NCS（自然色彩系统）色环能更好的体现颜色在视觉上的互补关系

NCS 色环

感受实际的补色：盯住图像看大约一分钟，将目光集中在十字图案上。然后，移开视线看白色墙面。您将会看到颜色改变了的视后像。红色变成绿色，白色变为黑色，蓝色变成黄色，这就是视觉上真正的补色。

负后像现象

色彩关系

色轮虽然有各种各样，但是在描述色彩关系时结果能大体相同，以一种颜色为基准色，最靠近基准色的是相似色，略远的是相邻色，更越的、相对的就是对比色。不过要记住视觉上对比度最大的是黄蓝和红绿。

色彩层次

不同的色彩有不同的距离感，一般来说越明亮，越鲜艳的颜色更靠近，反之感觉离人越远更靠后，这就是不同色彩的层次。不同的颜色组成的层次就有着引导视觉方向的作用，配色中的层次感是对配色效果至关重要的因素。

明度层次

看起来越亮（明度越高）的颜色在视觉上越靠前。明度层次是色彩最基本的层次。

明度层次

饱和度层次

人视觉对色彩是很敏感的，与无色彩（黑白灰）相比，有色彩的层次要更靠前。与饱和度低的色彩相比，饱和度高的色彩更靠前。

饱和度层次

色相层次

不同的色相也有层次之分。从下面这张图可以很直观的看到不同色相层次的不同。

色相层次

混合色：黄、青、品红的色相相比原色：红、绿、蓝 看起来层次更亮更靠前。

因为人视觉形成原理，混合色光能同时刺激多种视锥细胞，比如黄色光能同时刺激专长感受红色的视锥细胞和专长感受绿色的视锥细胞，所以黄色看起来很亮。另外人视锥细胞不同种类的数量也是不同的，专长感受绿色的视锥细胞数量要远多于其他 2 种，所以人视觉对绿色的明度感知要比另外 2 种原色红色、蓝色要敏感的多，甚至比绿、蓝的混合色：品红还要敏感一些。而蓝色的明度感知是最弱的，所以与绿色有关的混合色：黄色、青色 比与绿色无关的混合色紫色（红、蓝的混色）要更亮。如果进行图像色彩通道调整的话就会发现调整绿色通道对图像改变最为明显。

6 种主要色相的层次：

黄>青>绿>品>红>蓝

三原色：红、绿、蓝视觉感受亮度的比例是（根据常用的标准 CCIR 601 ，更多信息参见：色彩 · 理论 – 常见问题：明度、亮度、辉度）：

红2.99 ：绿5.87 ：蓝1.14

色彩场景

颜色层次而具体到一个场景中哪种层次在视觉上更敏感还需要具体分析。

大体上配色的场合分为：

白\亮 场景

白\亮 场景意味着背景是明亮的颜色，而前景要突出的话，就要比背景明度低。

由于与亮色背景的对比效应，低饱和度、明度下的颜色也有一定突出感，所以高饱和度、明度颜色与其对比并不十分突出，而在暗场景下高饱和度、明度颜色突出会很明显。

由于人视觉对亮度感知在同一时间范围是有限的，在主体是明亮的情况下，对低明度的颜色敏感度会降低。

你现在看的网页就是 白\亮 场景 所以你会感觉左边 2 种暗色的色差没有右边 2 种亮色的色差大，而实际上他们是色彩差别几乎是一样

同时白\亮 场景一般还意味着近处颜色鲜亮，远处颜色暗淡的空间规则（空气透视），所以要加强白\亮 场景下画面的对比度和空间感，应该让近处颜色更鲜亮，远处颜色更暗淡：

亮场景空间层次

黑\暗 场景

黑\暗 场景 意味着背景是暗淡的颜色，前景要突出的话，就要比背景明度高。

相对于白\亮 场景，由于与暗淡的背景颜色对比，黑\暗 场景下颜色的饱和度、明度看起来都会更高：

而明度层次对比也会变得更加明显，如在“白\亮 场景”  文中图片所示。

也是由于人视觉对亮度感知在同一时间范围是有限的，在主体是暗淡的情况下，高明度、低饱和度的颜色会显得更亮，而视觉对其敏感度会降低，所以类似下面这种小清新的配色在黑\暗 场景在难以复现：

同时黑\暗 场景下一般常用反空气透视的规则，远处的颜色鲜亮，近处的颜色暗淡，这对增强颜色对比，突出色彩很有效果，而且往往更有空间感：

暗场景 反空气透视

冷暖色

色彩的冷暖是配色的重要概念，色彩的冷暖对色彩情感的表达有决定性的作用。

暖色有积极、热情、扩张的情绪效果；冷色有消极、冷静、收缩的 情绪效果。

最强烈的暖色是红、黄，最强烈的冷色是蓝、青。你无法判断青色比蓝色更冷，红色比黄色更暖，这 2 组颜色是产生色彩冷暖感觉的关键，而其他颜色的冷暖感觉取决于现对于与这 2 组颜色的距离和色彩对比。

而弱冷色弱暖色的冷暖感觉要通过对比才能更明细的表达。

纯绿色一般认为没有冷暖倾向，靠近青色的绿被认为是弱冷色，靠近黄色的绿被认为认为是弱暖色。同样紫色也被认为是弱暖色。

弱冷、暖色的视觉感受受对比影响很大，弱暖色与暖色比较体现出冷色的倾向，而与冷色比较才能明显体现暖色的倾向。弱冷色也是如此。

黄绿色和淡紫色与粉红对比显示出冷色的感觉，与淡蓝色对比显示出暖色的感觉。

要注意的事，色温和色彩的冷暖是不同的概念，而且从结果来看还是完全相反的概念：

色温越高的光在人视觉中反倒感觉越冷，这说明色彩在视觉的冷暖更多取决于心理效应，即更可能产生自人类对皮肤、血液和食物的认知。

冷暖倾向

冷暖不是绝对的概念，在配色中颜色可能会有冷暖倾向，比如倾向于暖色的蓝色调配色。从冷色到暖色的变化的倾向性方向性很强，有增加画面戏剧冲突的功能，往往有着不错的视觉效果。

色彩膨胀

不同的颜色在视觉上有不同的面积倾向，鲜艳的暖色有膨胀的视觉倾向，看起来比实际大小相同的暗淡的冷色面积要更大，这就是色彩的膨胀效应。

黄色圆看起来会比黑色、深蓝色圆更有扩张感，面积更大，而黑色圆看起最小

明度越高，饱和度越高，越接近暖色越有膨胀感，看起来面积越大。

明度越低，饱和度越低，越接近冷色越有收缩感，看起来面积越小。

这意味着在设计图表，尤其是类似于饼状图的时候要注意颜色膨胀性对表示准确性的影响

三等分的拼图黄色部分明显看起来比其他 2 部分更大更明显

配色理论

配色的目的在于让画面产生对比或者调和的效果，对比能增加画面的丰富度和视觉吸引力，画面突出重点；而调和则能让画面在视觉上更舒适，浏览起来更轻松愉悦。

配色的一般过程是：

确定配色范围

人视觉观察画面是有局限性的，不会一眼看到所有内容，所以有层次的画面需要分层次进行配色，一般而言即是确定是为前景的配色还是为背景配色，确定一个对象配色之后再以此考虑另一部分的配色，这样能便于调整保证整体的协调

比如一张海报可以先明确是对标题 LOGO 进行配色，在根据标题 LOGO 配色的特点设计背景的配色。

确定主色、辅色、强调色

主色是画面整体的色彩基调，强调色是画面最重要的部分，如果是单色调设计只需要主色和强调色，而辅色通常是作用是与主色配合增加画面对比度和空间感。

所以主色与强调色之间一般都有强烈对比，辅色如果也是与主色对比的话，对比程度不应该强过主色与强调色之间的对比。

色彩配比

一个对象的配色中色彩的数量一般需要控制在 3~4 类以下。这里说的类指定是一定范围内的颜色，比如同色相，明度相差不大的一组颜色只算作一类：

配色的基本思想是色彩的需要变化，不一定是色相层次的变化，还可以是明度、饱和度层次的变化。

而色彩面积的方向性的变化对画面有决定性作用：面积最大的主色，比主色面积小的辅色，然后是更小的第二辅色，最后是面积最小的点缀色（强调色）

色彩鲜艳程度的方向性变化：从主色到点缀色，越来越鲜艳，越来越突出。

各种颜色面积的比例无需精确调制，一般只需明确 主色 ≥ 辅色 + 强调色 即可。所以常用的主色、辅色、强调色比是 4:3:1，主色 = 辅色+ 强调色。

配色主旨

配色主旨是在配色时根据需求的特点决定颜色搭配的方向。

一般有：单色主导、色调主导、强调色主导、对比主导、调和主导 5 种配色的主旨。

比如在为一个网页中广告图片进行配色时，使用对比主导的配色能让广告图片在网页中更加显眼，而且不用考虑对比主导的配色长时间观看时视觉疲劳的副作用。而为网页首页标题图片时使用强调色主导的配色更能突出想要突出的标题。

单色主导

由一种颜色（主要是色相和冷暖特征）或相近似的颜色起主导作用的配色，统一画面的色彩的整体印象和冷暖性或冷暖倾向。

色相跨度小，明度、饱和度跨度大。

简单自然，整体感强。

单调乏味，缺少戏剧性。

单色主导配色例子 – 来源 ui.cn

调和主导

以画面协调自然，不易视觉疲劳为目的的配色，常使用临近色搭配，用由于色相跨度小，常增加明度、饱和度跨度增强画面的对比度和层次感，是最常用和最“安全”的配色。

色相跨度小，明度、饱和度跨度大。

视觉感受自然舒适不易疲劳，整体性强而不单调。

缺少对比，画面吸引力不足。

调和主导例子

色调主导

相对色相特征明度和饱和度特征起主导作用的配色，能突出画面的气氛，常用于背景的配色。

色相跨度大，明度、饱和度跨度小。

整体感强，气氛突出。

单调乏味，缺乏层次感、方向性。

色调主导配色例子 – 

强调色主导

以突出强调色为目的的配色，少量强调色用在最重要的地方，其他颜色以强调色的对比色为主，增强与强调色的对比。

色相跨度大，明度、饱和度跨度大。

目标明确，重点突出。

整体性弱。

强调色主导例子 – 

对比主导

以高对比度营造戏剧冲突，增强画面吸引力为主旨的配色方法。

与对比强调色主导的不同之处是：强调色主导的配色中对比最强的调色只使用在很少的范围内，而对比主导整个画面都充满对比。强调色主导更适合大场面的设计，比如软件界面主体、网页中的大标题图片。而对比主导配色更适合用在需要在一堆同类中脱颖而出的对象上，如封面、图标、广告入口图片。

色相跨度大，明度、饱和度跨度小。

画面视觉吸引力大，视觉刺激强烈。

长时间观看易疲劳，重点不易突出。

对比主导例子 – 

配色技巧

自然的渐变层次

普通的颜色渐变是同一个色相改变明度或饱和度，这样的渐变虽然数值上很规整但颜色很单调也不自然，自然环境中同一颜色的不同明度变化往往伴随着色相的微妙变化，如果在明度、亮度变化的同时偏移一些色相会更讨眼球也更自然。

普通的渐变

有色相偏移的渐变 – 

要人配色更自然，就需要考虑亮度、饱和度变化时色相的变化，如下面这个例子，2 边的按钮的基础颜色都是同样的橙色，但是左边的按钮高光部分仅仅只是调整了明度、饱和度，色相没有变化，而右边按钮在高光部分的渐变色相向黄色偏移了（加入了黄色），显得更加自然和饱满，相近之下左边的按钮则显得生硬暗淡多了。

另外在阴影部分由于无色彩的灰色在暖色的对比下会显的有冷色倾向，看起来泛蓝很有违和感，所以右边按钮的阴影颜色增加了暖色的倾向，看起来更协调。

画面浑浊与干净

极端浑浊的配色

画面浑浊也被说成是画面脏，浑浊的画面让人看着就不舒服，也无法突出画面内容。

暧昧而又暗淡的配色有浑浊和脏的感觉。

所谓暧昧就缺乏对比和设计意图，而颜色暗淡即使明度和饱和度都偏低。与浑浊相对的是干净，画面的干净一般意味着画面层次分明、对比适中、配色意图明显。如果画面浑浊，可以使用对比色，和增加画面颜色的明度、饱和度，使画面颜色对比更加明显，更富有变化，并且明确画面中各内容的层次。

色彩搭配的心理效应

暖色青睐

暖色是有积极的心理效应的。在于食物有关的配色中暖色也是引发食欲的关键，所以餐厅尤其是快餐店的装潢大都是暖色调，在设计与饮食有关的配色时使画面呈现暖色调或暖色倾向是大多数情况下的必选项（顺带一提黑色是与饮食配色的百搭色），而冷色调和冷色倾向会使人丧失食欲。

暖色与欲望也有着心理上的联系，暖色积极心理效应不是空口说的，例如在网页按钮上使用暖色可以显著提升点击率 （参考：对转化率最好的颜色是什么 ）。在多个实验中都证明使用红色按钮会比绿色点击率高，而绿色要比蓝色高。

Hubspot 在超过 2000 人次的样本测试中，红色方案的点击率超过绿色方案的点击率 21%

暖色这种受青睐的特性在引导用户上有着重要的作用，你可以发现从淘宝到亚马逊再到雅虎，绝大多数购物网站的购买按钮都是暖色调的。

买买买

但是使用暖色的时候也要注意暖色另一个作用：使人对时间的感知加速，也就是使人焦躁，在网页上这会使用户的当页停留时间减少.快餐店大量使用暖色很大程度也是基于这个原因，据称在暖色装潢的餐厅要比冷色装潢客户停留时间要减少 20~30% 。

非自然色吸引力

不常见的色彩对人有一种吸引力，人种会格外注意新奇的事物。著名的例子有 Tiffany 蓝，这种生活中不常见的颜色被 Tiffany 采用并曾风靡一时，即使现在对人也有很大的吸引力，显得时尚而独特。使用非常见色是增强画面特点的好办法，而什么才是非常见色要看观众的身份，和配色使用的场合。

而在实际设计中使用与多数同类竞争对手不同的色彩会更能让用户注意到，并产生尝试的想法。

侧抑制效应与马赫带

在看配色图片时会发现一个色块的看起来似乎不是同样的颜色，如下图同一个色块左边要更亮且泛黄光，而右边颜色则更深，而用拾色器测试这会发现这只是个错觉，同一个色块视觉上相同的颜色。

这被称为侧抑制效应（Lateral inhibition），在不同明度的灰块的交界处，颜色深者更深，而浅色相对更浅，产生一种交界有处阴影的感觉，这种感觉会增加相邻色块的视觉上对比度，也被称为马赫带（Mach bands）。

这种效应配色越暗越不明显。

文化背景

色彩受文化的影响是很深的，极端的例子是如今代表女孩子的颜色：粉色在 20 世纪初还是代表男孩的颜色，当时认为粉色代表肌肉和力量是男性的象征，而蓝色暗示圣母玛利亚的坚贞和忠诚象征着女性的气质，而到如今这种观点完全逆转了。

虽然世界范围内文化越来越趋同，但在一些色彩的心理感受上各个文化圈还是有不同的地方，比如上面这张图是三部分是中文圈对粉色的印象，而下部是英文圈对粉色的印象。而且不同年龄段、职业、受教育程度、收入水平对色彩的偏好都不一样。

更多的例子还有，在文化圈的股市中代表涨跌的颜色往往不同，中国和日本是↓绿跌↑红涨；而美国、英国、香港等地是↑绿涨↓红跌。

值得一说的是受艺术教育的人比如设计师往往喜欢中低饱和度的颜色，而大众对饱和度的偏好要比设计师想象的要高一些。

你觉得上方饱和度低的配色更好看还是下方饱和度更高的好看？