色彩是设计中最具表现力和感染力的因素。全文15,字，阅读时长约30分钟。
色彩是影响用户最简单和最重要的一个因素。研究表明，人们只需90秒就能对一种产品做出下意识的判断，而其中高达60%以上的判断仅基于颜色。因此，选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。在没有文字的场景中，颜色的搭配非常重要。如何配色可以使设计感更强，如何配色更好看，哪些配色不好看，解决这些问题就需要学习色彩理论。
我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪。色彩，即光从物体反射到人的眼镜所引起的一种视觉心里感受，按字面含义上理解可分为色和彩。所谓色是指人对进入眼睛的光传至大脑时所产生的感觉，彩则指多色的意思，是人对光变化的理解。色彩的基本理论虽然老生常谈，但在UI设计中具体怎么运用，还有关于色彩的性格和含义，都是我们需要了解的。因此在学习UI配色之前我们先来了解色彩的基础知识。
1.1色彩常识
原色
所有的色彩都源自“红黄蓝”三种原色，很多人误以为三原色是“红绿蓝”，其实不是。红绿蓝是显示上的三原色，计算机屏幕的显示是色光三原色（红red，绿green，蓝blue）即RGB组成的，每一个像素的颜色都用三原色值来显示，与美术上的三原色不一样。原色是其他颜色调配不出来的。把原色相互混合，可以调和出其他种颜色。
虽然RGB在显示设备上表现良好，但并不够人性化。因为人们判断颜色，往往是通过：这是什么颜色？是不是太艳了？是太亮了还是太暗了？这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于RGB衍生出了HSB模式和HSL模式。
印刷三原色为青（Cyan)、品红（Magenta)、黄（Yellow)。是减色模式，混合为深灰色，并不能产生黑，所以在印刷时加上黑色油墨，才能产生纯正的黑，就是CMYK颜色模式。
间色
又叫“二次色”。它是由三原色两两混合调配出来的颜色。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色”。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。
复色
也叫“复合色”。复色是用原色与间色相调或用间色与间色相调而成的“三次色”复色是最丰富的色彩家族，千变万化，丰富异常，复色包括了除原色和间色以外的所有颜色。例如，黄色与橙色混合得到橙黄，红色与紫色混合得到紫红。
冷暖色
最后由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。冷色令人联想到填空、海洋、冰雪等，产生寒冷、理智、宁静等感觉；暖色则令人联想到太阳、火焰、热血等，产生温暖、热烈、危险等感觉。
不同的色轮由不同的人发明，他们对于色彩的见解不一样，因此创建出来的色轮用途也不一样。比如：伊顿色轮又被称之为美术三原色，是由颜料的三原色混合叠加而成；RGB色轮主要运用于电脑、手机、平板等一系列科技产品，RGB的三原色是光的三原色；CMYK色轮主要用于印刷领域。
1.2色彩三属性
丰富多样的颜色可以分成两大类，即有彩色系和无彩色系。彩色系的颜色具有三个基本特征：色相、明度和饱和度，在色彩学上被称为色彩三大要素或色彩三属性。
色相（Hue）
色相是自然状态下的色彩，是色彩的相貌。简言之，色环上没有改变明暗的色彩。色相是色彩的首要特征，是区别各种不同色彩的标准。例如红、橙、黄、绿、青、蓝、紫就是其中不同的基本色相。黑色是没有色相的中性色。不同的色相在人眼中的差异是色相本身对应光的波长不同而造成的。红色波长最长，紫色的波长最短。
饱和度（Saturation）
饱和度是色彩的纯度，他表示颜色中所含有色成分的比例。增加饱和度，色彩会变得更强烈、鲜艳生动；降低饱和度，颜色中灰色成分越大，色彩会变得暗淡乏味。当一种颜色掺入黑、白或其他色彩时，纯度就产生了变化，当掺入的颜色达到很大的比例时，人的眼睛就无法感知出来了。
饱和度为0的颜色为无彩色，就是黑、白、灰。在一张图中，饱和度高的地方给人感觉靠近，而饱和度低的地方则给人的感觉很遥远。高饱和度和低饱和度的色彩都给人坚硬的感觉。
明度（Brightness）
明度，指色彩的明暗度，反应的是色彩的深浅变化。以自然界为例，一些物体在早晨和晚上的色彩不同。如树木和山脉，早晨色调浅；傍晚因为光线减少了，色调变得偏暗。距光源越近的物体，明度越高，反之，则明度越暗。
明度在UI设计中扮演重要的角色，明度运用得好，可以实现好的对比效果。明度达到%时，色彩就会变成白色；明度是0%时，就会变成黑色。色彩的明度变化往往会影响到纯度，例如红色加入黑色以后明度降低了，同时纯度也降低了；如果红色加入白色则明度提高了，纯度却降低了。
1.3色彩的搭配
完整的UI配色应包含主色、辅助色和中灰色。主色通常与品牌色一致，辅助色一般选择与主色色调一致且能拉开层次的颜色，强调色选择与主色相对立的互补色。下面我们来学习几种常见的配色方案。
单色
单色是指某个色彩的明度变化，即在色彩上叠加10%-90%白色或黑色得到的一组颜色。单色搭配由于彼此之间色彩相同，因此能和谐共处。单色配色在色彩变化上也适合长时间阅读，让的颜色波动较少，比较适合沉浸式交互的界面设计。
虾米音乐就是单色搭配的最好例子，它将主色橙色用在主要功能入口、标签栏图标等所有界面的关键元素上，给人非常精致和统一的视觉体验。
邻近色
是指相互接近的颜色，在色相环上相距90°，或者相隔五六个数位的两色。他可以在同一个色调中建立起丰富的质感和层次，优点是阳光、活泼、稳定、和谐但不单调，理所当然称为最安全的配色法则。邻近色色相相近，冷暖性质相近，传递的情感也较为相似。例如，红色，黄色和橙色就是一组邻近色。邻近色表现的情感多为温和稳定，没有太大的视觉冲击。
美颜相机的主色是粉色，将浅粉色和浅紫色作为辅助色，既能信息区分又和谐统一。
互补色
互补色是指在色相环上对立（°）的两个颜色，色相环上夹角呈现一条直线，例如黄色和紫色、橙色和蓝色、红色和绿色等。互补色有着非常强烈的对比度，在颜色饱和度很高时，可以产生许多十分震撼的视觉效果，就会使这两种颜色都显得更加鲜明，也将视觉冲击力强度提升至峰值。这类配色形式优缺点和对比色很相似。常给人一种潮流、刺激、兴奋的感觉。但使用不当也有可能使设计显得非常突兀。
Airbnb的主色为红色，界面设计中使用主色的互补色「墨绿」作为主色调，给人清晰、高效简洁的感觉。
分裂互补色
分裂互补色是指寻找三种颜色，其中两种互为邻近色，另一种与它们形成互补色，例如黄色和蓝色、洋红。这种搭配既能保持互补色强烈的对比及视觉上的趣味性，又能让颜色变得柔和。
36Kr将蓝色作为主色，互补色黄色作为辅助色用在图标、标签上，再选择黄色的邻近色红色作为另一辅助色，用在不同的信息上，有助于用户区分产品信息。
对比色
指在色环上相距°左右的两种颜色，也是两种可以明显区分的色彩，包括颜色三要素的对比、冷暖对比，彩色和消色的对比等。对比色能使色彩效果表现更明显，形式多样，极富表现力。需要注意的是，互补色一定是对比色，但是对比色不一定是互补色。因为对比色的范围更大，包括的要素更多，如冷暖对比、明度对比、纯度对比等。这类配色形式优点是视觉冲击力强烈、富有跳跃性、突出、点缀能力强，比如常用作画面中的点缀色，或与主体固有色成对比关系的背景色，用于突出主体。缺点是大面积使用比较难把控。
马蜂窝的主色是黄色，对比色蓝色作为辅色用在标签、小图标上，红色作为强调色用在价格等信息上。
四元色搭配
四元色搭配在色环上形成了一个矩形，使用不是一对而是两对互补色。将其中的一个颜色作为主色，其余颜色作为辅色进行搭配可以得出不错的效果。
四元色是比较难以平衡的颜色，不过搭配好了会非常出彩。不信可以自己用用感受一下，尤其是使用其中一个颜色作为主色，其他的三个颜色作为辅助色的时候。
1.4色彩和光源关系
了解了色彩的基本知识，下面说说色彩和光源的关系。如果像描绘好对象的色彩，那么就必须了解对象的固有色、光源色、环境色及它们之间的关系和变化。
固有色
即物体本身的颜色。是指在光源条件下物体占主导地位的色彩，如红色的罐子、绿色的植物等。物体的固有色并不存在，在绘画过程中为了观察方便经常引入“固有色”这一概念。从实际方面来看，即使日光也是在不停地变化中，何况任何物体的色彩不仅受到投照光的影响，还会受到周围环境中各种反射光的影响。所以物体色并不是固定不变的。
光源色
物体只有在光源的照亮下才能观察到它们的色彩。光源有自然光（太阳、天光）和人造光（灯），这些光源都格子具有不同的颜色。太阳光是偏黄色暖色光，月光是偏青的冷色光，阴天则更多的是蓝灰色的天光，普通灯光是偏黄色的暖色光。光源的颜色对物体的颜色影响很大，想象一下一个置于红色光源照射下的蓝色物体会是什么颜色。
环境色
物体周围环境的颜色就是环境色。环境色对物体的影响非常大，如在红色背景下的白色物体，由于光源打到红色背景上的背景反射光也会“染”到白色物体上，因此白色物体的部分表面会蒙上一层淡红色的色彩。所以，设计师在用电脑作图时也需要考虑并想象环境色的影响。
1.5色彩空间
Lab
Lab的全称是CIELAB，有时候也写成CIEL*a*b*。最突出的特点是它的生理特性，一是它包括人眼所看到的所有颜色，是目前为止色域最宽的色彩空间，二是跟人眼一样，首先看到的是明暗，其次是色彩，可以用数字化的方式描述人的视觉感应，在计算机视觉中广泛应用。
LAB颜色空间中，L表示亮度，取值[0-]对应[纯黑—纯白]；A颜色表示从绿色到红色的范围，取值[-—+]对应[绿—洋红]；B表示从蓝色到黄色的范围，取值[-—+]对应[蓝-黄]，正是暖色，负是冷色。Lab颜色空间中亮度和颜色是分开的，L通道没有颜色，a通道和b通道只有颜色。不像在RGB颜色空间中，R通道、G通道、B通道每一个既包含有明度又包含有颜色。
在表达色彩范围上，最全的是Lab模式（其次是RGB模式，最窄的是CMYK模式），它弥补了RGB色彩模型和CMYK色彩模式色彩分布不均的不足。也就是说Lab模式所定义的色彩最多，且与光线及设备无关，并且处理速度与RGB模式同样快，比CMYK模式快数倍。
Hsb
HSB和HSV是同一个东西，只是名称不同。在Photoshop拾色器上可以看到每个颜色都有一组HSB值，H表示色相、S表示纯度、B表示明度。色相值为0～度，即圆；纯度和明度值为0～，即百分比。因此，了解HSB模式的远离，就能了解色彩的本质。
当我们需要调配同色系色彩，保持色相不变，只需要改变纯度和明度即可。如下图所示的3种同色系绿色，他们的色相（H）都一致，仅在纯度和明度上有所变化。
当色相和纯度都为0时，色彩称为中性色，也称为灰度色，即黑白灰。其中，灰不是单指某一种颜色，而是一系列从黑到白的过度色。
灰度色多用于文字，通常一个应用种的文字不应超过3种灰度色。深黑用于标题、正文等主要文字；浅黑或深灰用于辅助、提示性文字；浅灰用于禁用、失效等状态文字；纯白用于深色按钮文字。
此外，灰度色由于没有任何色相，始终沉着冷静，减少对内容的视觉干扰，因此常用于界面背景色，例如MOO音乐的界面设计。
Hsl
HSL色彩模式是工业界的另一种颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。在原理和表现上，HSL和HSB中的H（色相）完全一致，但二者的S（饱和度）不一样，L和B（明度）也不一样。
取一个颜色试试看，先选一个颜色#00a6ff，放入“HSLColorPicker”，显示HSL数值为：H(),S(),L(50)，但是我们放在Sketch里面看一下，显示的HSB数值为，H(),S(),B()。
HSL的H代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：°/0°红、60°黄、°绿、°青、°蓝、°洋红，它们在色相环上按照60°圆心角的间隔排列。
HSL的S指的是色彩的饱和度，它用0%至%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化，如下图：
HSL的L指的是色彩的亮度，作用是控制色彩的明暗变化。它同样使用了0%至%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。
HSL相比RGB的优势
我们来做一个基于HSL的调色实践。你可不可以快速说出“海棠红”所对应的RGB色值？如果再加一点橙色进去，把亮度提高一点，色值又是多少？想想那应该是一个介于洋红和红色之间的，性感娇艳的颜色。我们可以假定它在色相环H上的角度是°左右，饱和度较高，亮度适中，看看那是什么颜色？
我们想要的颜色应该再接近红色一点，让我们把色相（H）+20°到°，现在好多了。
通过改变色相值H，我们实现了色相从洋红向海棠红的偏移。大感觉接近了，但还是略微有点灰暗，我们可以通过增加饱和度（S）+15%，让这个颜色变得更鲜活，看起来更亮丽。
感觉还是差点，海棠红是属于少女的颜色，应当再嫩一点、通透一点，不会这么热烈。我们需要通过增加亮度L，+10%试试看，嗯，这才是我们想要的颜色。
同理，如果想加点橙色进去，再亮一点，我们通过心算就大致可以确定色相环的相位和亮度值。在这里，我们需要让H增加20°，L增加5%。
在使用HSL调色的过程中，我们并不需要打开拾色器，也不需要了解复杂的色光混合原理，这是一个自然的、感性的、易于理解的过程。相比之下，RGB调色方式显得非常笨拙复杂、难以理解，而HSL是多么的友好。
需要提醒一下的是，CSS代码里支持的是HSL，而不是HSB。如果和前端对接时，UI给到的是HSB的色值，那么最终落地的颜色效果会与设计稿有出入。Photoshop中的Hex和RGB颜色可以直接在CSS文件中使用，但是Photoshop中的HSB模式颜色和HSL是不同的。
Yuv
YUV，是一种颜色编码方法。常使用在各个影像处理组件中。YUV在对照片或影片编码时，考虑到人类的感知能力，允许降低色度的带宽。Y表示明亮度（Luminance或Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示浓度（Chroma）；通常UV一起描述影像色彩和饱和度，用于指定像素的颜色。
采用YUV色彩空间的重要性是它的亮度信号Y和色度信号U、V是分离的。如果只有Y信号分量而没有U、V信号分量，那么这样表示的图像就是黑白灰度图像。彩色电视采用YUV空间正是为了用亮度信号Y解决彩色电视机与黑白电视机的兼容问题，使黑白电视机也能接收彩色电视信号。
色彩心理学是美术知识学习中非常重要的一部分。他所研究的是色彩通过对人视觉上的刺激，而引发人情感和感官上的变化，通过日常生活中人们对应用色彩的经验积累而归纳总结出人类对色彩心理上的预期感受。在生活中，色彩心理学对人们对颜色的认知有很大的影响。为什么交通信号灯用红色表示停止通行而不是绿色呢？为什么大多快餐店用红色或黄色作为品牌的主色？这都是色彩心理学的相关知识。
虽然红、蓝是受到最普遍喜爱的颜色（通过对AppStore应用流行颜色分类统计得知）。但并不意味着这一准则可以套用在所有产品上。产品的属性是什么，用户定位是什么，要传达的产品气质是什么等等，这些都是选择应用图标的颜色时需要考虑的问题。世界上第一间Airbnb房间是在一条叫Rauschstreet的街上诞生的，因此Airbnb的主色被命名为Rausch的温暖颜色。在挑选主色调的时候，4名设计师前往世界13个城市，只为了更好地理解Airbnb的理念：热情、能量和自信，这正是Rausch要传递的信息。除了Rausch以外，Airbnb还有其它九种颜色，包括Kazan、Beach、Tirol、Foggy等等，它们也都是以Airbnb的社区街道命名的。
下面来讲解每一种颜色都各自带有什么样的性格，只有理解了颜色的性格才能正确的使用它们。
黑色
黑色代表着品质、高端、时尚、低调、权威、严肃、稳重，是一种充满质感的颜色。它是所有色彩中最有力量的，能很快吸引用户的注意力。作为一种无彩色，能让它和其他色彩百搭，黑色+金黄色，给人一种奢华精致的感觉；黑色+银灰色，则给人一种成熟稳重的感觉；黑色+红色，给人一种时尚潮流的感觉。因此黑色是一种永远流行的主要色彩。
白色
白色代表着纯洁、简单、纯真、朴素、信任、开放、雅致，白色常常被认为是“无色”，即不是色彩。单一使用白色通常不会引起任何情感，但是当白色与其他颜色配合使用时，白色能很好的衬托，大量的留白让其他元素脱颖而出。在界面设计中，作为无彩色的白色，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面明度，提高文字可读性。
灰色
灰色是代表着睿智、老实、执着、严肃、压抑、沉稳。介于黑色和白色之间，也属于无彩色，没有色相也没有纯度，只有明度的变化。它和任何颜色都能很好的搭配，也常常用于背景色或用于突出其他彩色。灰色不像黑色那么坚硬刺眼，他更有弹性，它比黑色更有深层次的力量。因此在画面中，很少出现纯黑，基本都是用深灰色来代替黑色，也可以用浅灰色来代替白色。
红色
红色代表着喜庆、热情、欢乐、斗志、奔放、自信，是一种充满能量的颜色。这是最醒目和强势的颜色，一登场即获得全场的
