03 迷人的色彩

3.1 色彩基础知识

色彩，即光从物体反射到人的眼睛所引起的一种视觉心理感受，按字面含义上理解可分为色和彩。所谓色是指人对进入眼睛的光传至大脑时所产生的感觉，彩则指多色的意思，是人对光变化的理解。丰富多样的颜色可以分成两个大类，即有彩色系和无彩色系。有彩色系的颜色具有三个基本特性：色相、纯度和明度，在色彩学上被称为色彩三大要素或色彩三属性；无彩色系是指白色、黑色以及由它们调和形成的各种深浅不同的灰色，其饱和度为0。配色在设计中发挥着重要的作用，是建立应用的产品气质的关键，在学习UI配色之前我们先来了解色彩的基础知识。

原色

所有的色彩都源自“红黄蓝”三种原色，很多人常常认为三原色是“红绿蓝”，但其实不是。红绿蓝是显示上的三原色，即RGB，与美术上的三原色不一样。

间色

由三原色两两混合后得到三个二级色，即间色，黄色与红色混合得到橙色，红色与蓝色混合得到紫色，蓝色与黄色混合得到绿色。

复色

原色与间色混合或间色与间色混合而形成越来越多的颜色，即复色。例如，黄色与橙色混合得到橙黄，红色与紫色混合得到紫红。

冷暖色

最后由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色、黄色至紫红为暖色。冷色令人联想到天空、冰雪、海洋等，产生寒冷、理智、平静等感觉；暖色则令人联想到太阳、火焰、热血等，产生温暖、热烈、危险等感觉。

色相（Hue）

色相是指色彩的相貌，它是不同波长的色彩被肉眼感知的结果。所有的色相都可以用色环来展示，并能够确切地表示某种颜色的名称，例如红、橙、黄、绿、青、蓝、紫就是七种不同的基本色相。

纯度（Saturation）

纯度即饱和度，是指色彩的纯净程度，它表示颜色中所含有色成分的比例。饱和度越高，颜色越纯，色彩越鲜明；饱和度越低，颜色中灰色成分越大，色彩越黯淡。当一种颜色掺入黑、白或其他彩色时，纯度就产生了变化；当掺入的颜色达到很大的比例时，人的眼睛就无法感知出来了。

明度（Brightness）

明度是指色彩的明暗程度，反映的是色彩的深浅变化。在颜色中加入白色，明度提高；加入黑色，明度降低。最大值时，颜色都变成白色；最小值时，所有颜色都变成黑色。每一种纯色都有与其相应的明度，黄色明度最高，蓝、紫色明度最低，红、绿色为中间明度。色彩的明度变化往往会影响到纯度，例如红色加入黑色以后明度降低了，同时纯度也降低了；如果红色加入白色则明度提高了，纯度却降低了。

HSB模式

在Photoshop拾色器上可以看到每个颜色都有一组HSB值，H表示色相、S表示纯度、B表示明度。色相值为0～360度，即圆；纯度和明度值为0～100，即百分比。因此，了解了HSB模式的原理，就能了解色彩的本质。

当我们需要调配同色系色彩，保持色相不变，只需要改变纯度和明度即可。如下图所示的3种同色系青色，它们的色相（H158）都一致，仅在纯度和明度上有所变化。

当色相和纯度都为0时，色彩成为中性色，也称为灰度色，即黑白灰。其中，灰不是单指某一种颜色，而是一系列从黑到白的过渡色。

灰度色多用于文字，通常一个应用中的文字不应超过3种灰度色。深黑用于标题、正文等主要文字；浅黑或深灰用于辅助、提示性文字；浅灰用于禁用、失效等状态文字；纯白用于深色按钮文字。

此外，灰度色由于没有任何色相，始终沉着冷静，减少对内容的视觉干扰，因此常用于界面背景色，例如VUE的引导页设计。

中性色调

中性色调是指由黑色、白色及由黑白调和的各种深浅不同的灰色系列，它既不属于冷色调也不属于暖色调。中性色调主要用于调和色彩搭配，突出其他颜色，能与任何色彩起谐和、缓解作用，给人轻松、沉稳、得体的感觉。

iOS系统应用的界面背景色为H240 S2 B96，它并不是纯灰，而是加入了一点点蓝色，在一定程度上缓解了单调的灰色带来的枯燥。

下图左圆为iOS系统应用的界面背景色，右圆为同样明度的纯灰，通过对比可以发现左圆的色彩更丰富一些。

对比度

对比度对视觉效果的影响非常关键，一般来说对比度越大，图像越清晰醒目，色彩也越鲜明艳丽；而对比度小，则会让整个画面呈现灰蒙蒙的效果。通过有效地使用对比度可以使界面内容清晰可见，从而提升良好的阅读体验。清晰的对比度，一般会采用色彩的两极，例如黑与白、高亮与低亮。

浅色背景

大多数移动应用的界面通常是浅灰色背景，色值为B95（#f2f2f2），接近于纯白。在浅色背景上搭配低明度的灰色文字，当B值低于40%，内容清晰可见；高于60%，则难以阅读。搭配高纯度的彩色文字，当S值高于60%，内容清晰可见；低于40%，则难以阅读。

深色背景

也有一些移动应用的界面是深色背景，例如iOS系统时钟，通常不会选用纯黑，色值为B5（#0d0d0d），接近于纯黑。在深色背景上搭配高明度的文字，当B值高于80%，内容清晰可见；低于60%，则难以阅读。高纯度的色彩也有明暗之分，例如S值100的蓝色文字在深色背景上难以阅读。

彩色背景

彩色背景通常出现在注册登录页、引导页或营销专题页等。在彩色背景上搭配纯白或高明度的文字，内容清晰可见；搭配灰色字，则难以阅读。避免在彩色背景上搭配互补色的彩色文字、避免两种色彩明度接近，这两种搭配方式都会产生一种“震颤效应”，即觉得两种色彩之间会产生模糊、震颤或者发出光晕的视觉效果。

亮色背景

其实，这是一个伪命题，我们在设计之初就应避免使用高明度、高纯度色彩。如果不可避免地要与此进行搭配，可以选择低纯度的彩色文字，以此来减少因纯度接近而造成的辨识度问题。避免搭配低明度的灰色文字，深黑色的文字搭配亮色背景显脏，使用纯白是比较安全的做法。