设计基础 | 关于「颜色」

颜色，在设计工作中有重要作用。它能调动你的注意力，能唤起你的某种情感，甚至是传递某种信息。

历代的设计师们都在不断探索着颜色的可能性，想要更好地把握颜色，学习一些关于颜色的理论是有必要的。

1.颜色的常识

我们都听过一级色和二级色的说法。红、黄、蓝是一级色，也就是我们常说的三原色。其他所有颜色都是从这三个颜色组合而来。

一级色——红、黄、蓝

红+黄=橙色，黄+蓝=绿色，蓝+红=紫色，于是我们得到了二级色——橙、绿、紫。

二级色——橙、绿、紫

如果再对相邻的颜色两两组合，就能得到三级色。如下图所示。

三级色——橙红、橙黄、黄绿...

于是我们就得到了所谓的「色轮」。在色轮里，相对的颜色，被称为「互补色」，即两两对比最强烈的颜色。比如红色和绿色、橙色和蓝色、黄色和紫色。它们的搭配通常是一种作为主色，另一个用于强调。

色轮

2.色相、饱和度、亮度

了解了有关颜色的基础知识，我们再进一步。

色相（Hue），饱和度（Saturation），亮度（Brightness）这三个设计师常用的术语可能很多人在日常生活中并不常听到（RGB 是更多被熟悉的颜色标准，但 HSB 更容易让人理解），但它们是进一步理解那些冷门颜色的必要知识。

色相，可以说是「颜色」这个词的学术化表达，即色彩的性质。饱和度，字面意思即可理解，代表了颜色的鲜艳程度，饱和度越高，颜色越鲜艳；饱和度越低，颜色越暗淡。亮度，则决定了颜色的亮与暗。如下图所示，横向上从左到右表示饱和度从低到高；纵向从上到下表示亮度从低到高。

所以我更喜欢使用 HSB 的颜色标准来选择颜色，因为相较于 RGB ，我无法知道一种颜色中包含了多少程度的红、多少程度的绿和多少程度的蓝，用 HSB 来理解，则是首先确定其属于什么颜色（即 Hue 值），色轮从左到右对应着从 0 到 360 的不同色相，再去决定我要多少饱和度（即 S 值）和亮度（即 B 值），这样决定颜色的方式更符合人脑的认知。比如确定了 H 值为60（近似黄色）后，改变 S 值，就能看到选择点从左向右水平移动，即饱和度的水平，同理纵向上是亮度的水平。

3.颜色的运用

有了以上两个知识的储备，我们就能开始学习一些运用颜色的方法论了。

比如运用单色。即一个视觉框架内只有一个颜色（同一色相），但是具有不同的饱和度和亮度。这个方法的好处是简洁，只用了一种颜色，信噪比比较低，或许能使人更专注与信息。

一组单色

也是一组单色...

再比如运用相邻色。还记得上面的色盘吗？相邻的颜色组合起来使用也是很好的方法。

相邻色（较暖）

相邻色（较冷）

还可以选取上面提到的互补色来建立颜色组合、对立色左右两边的颜色或色轮上相隔 120 度的颜色组合等。