色彩是设计中最具表现力和感染力的因素。全文15,998字，阅读时长约30分钟。
1、色彩基础知识
我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪。色彩，即光从物体反射到人的眼睛所引起的一种视觉心里感受，按字面含义上理解可分为色和彩。所谓色是指人对进入眼睛的光传至大脑时所产生的感觉，彩则指多色的意思，是人对光变化的理解。色彩的基本理论虽然老生常谈，但在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设计中扮演重要的角色，明度运用得好，可以实现好的对比效果。明度达到100%时，色彩就会变成白色（黑白模式下）；明度是0%时，就会变成黑色。色彩的明度变化往往会影响到纯度，例如红色加入黑色以后明度降低了，同时纯度也降低了；如果红色加入白色则明度提高了，纯度却降低了。
1.3色彩的搭配
完整的UI配色应包含主色、辅助色和中灰色。主色通常与品牌色一致，辅助色一般选择与主色色调一致且能拉开层次的颜色，强调色选择与主色相对立的互补色。下面我们来学习几种常见的配色方案。
单色
虾米音乐就是单色搭配的最好例子，它将主色橙色用在主要功能入口、标签栏图标等所有界面的关键元素上，给人非常精致和统一的视觉体验。
邻近色
是指相互接近的颜色，在色相环上相距60°，或者相隔五六个数位的两色。它可以在同一个色调中建立起丰富的质感和层次，优点是阳光、活泼、稳定、和谐但不单调，理所当然称为最安全的配色法则。邻近色色相相近，冷暖性质相近，传递的情感也较为相似。例如，红色，黄色和橙色就是一组邻近色。邻近色表现的情感多为温和稳定，没有太大的视觉冲击。
美颜相机的主色是粉色，将浅粉色和浅紫色作为辅助色，既能信息区分又和谐统一。
互补色
互补色是指在色相环上对立（180°）的两个颜色，色相环上夹角呈现一条直线，例如黄色和紫色、橙色和蓝色、红色和绿色等。互补色有着非常强烈的对比度，在颜色饱和度很高时，可以产生许多十分强烈的视觉效果，就会使这两种颜色都显得更加鲜明，也将视觉冲击力强度提升至峰值。这类配色形式优缺点和对比色很相似。常给人一种潮流、刺激、兴奋的感觉，但使用不当也有可能使设计显得非常突兀。
Airbnb的主色为红色，界面设计中使用主色的互补色「墨绿」作为主色调，给人清晰、高效简洁的感觉。
分裂互补色
分裂互补色是指寻找三种颜色，其中两种互为邻近色，另一种与它们形成互补色，例如黄色和蓝色、洋红。这种搭配既能保持互补色强烈的对比及视觉上的趣味性，又能让颜色变得柔和。
36Kr将蓝色作为主色，互补色黄色作为辅助色用在图标、标签上，再选择黄色的邻近色红色作为另一辅助色，用在不同的信息上，有助于用户区分产品信息。
对比色
指在色环上相距120°左右的两种颜色，也是两种可以明显区分的色彩，包括颜色三要素的对比、冷暖对比，彩色和消色的对比等。对比色能使色彩效果表现更明显，形式多样，极富表现力。需要注意的是，互补色一定是对比色，但是对比色不一定是互补色。因为对比色的范围更大，包括的要素更多，如冷暖对比、明度对比、纯度对比等。这类配色形式优点是视觉冲击力强烈、富有跳跃性、突出、点缀能力强，比如常用作画面中的点缀色，或与主体固有色成对比关系的背景色，用于突出主体。缺点是大面积使用比较难把控。
马蜂窝的主色是黄色，对比色蓝色作为辅色用在标签、小图标上，红色作为强调色用在价格等信息上。
四元色搭配
四元色搭配在色环上形成了一个矩形，使用不是一对而是两对互补色。将其中的一个颜色作为主色，其余颜色作为辅色进行搭配可以得出不错的效果。
四元色是比较难以平衡的颜色，不过搭配好了会非常出彩。不信可以自己用用感受一下，尤其是使用其中一个颜色作为主色，其他的三个颜色作为辅助色的时候。
1.4色彩和光源关系
了解了色彩的基本知识，下面说说色彩和光源的关系。如果想描绘好对象的色彩，那么就必须了解对象的固有色、光源色、环境色及它们之间的关系和变化。
固有色
即物体本身的颜色。是指在光源条件下物体占主导地位的色彩，如红色的罐子、绿色的植物等。物体的固有色并不存在，在绘画过程中为了观察方便经常引入“固有色”这一概念。从实际方面来看，即使日光也是在不停地变化中，何况任何物体的色彩不仅受到投照光的影响，还会受到周围环境中各种反射光的影响。所以物体色并不是固定不变的。
光源色
物体只有在光源的照亮下才能观察到它们的色彩。光源有自然光（太阳、天光）和人造光（灯），这些光源都各自具有不同的颜色。太阳光是偏黄色暖色光，月光是偏青的冷色光，阴天则更多的是蓝灰色的天光，普通灯光是偏黄色的暖色光。光源的颜色对物体的颜色影响很大，想象一下一个置于红色光源照射下的蓝色物体会是什么颜色。
环境色
物体周围环境的颜色就是环境色。环境色对物体的影响非常大，如在红色背景下的白色物体，由于光源打到红色背景上的背景反射光也会“染”到白色物体上，因此白色物体的部分表面会蒙上一层淡红色的色彩。所以，设计师在用电脑作图时也需要考虑并想象环境色的影响。
1.5色彩空间
Lab
Lab的全称是CIELAB，有时候也写成CIEL*a*b*。最突出的特点是它的生理特性，一是它包括人眼所看到的所有颜色，是目前为止色域最宽的色彩空间，二是跟人眼一样，首先看到的是明暗，其次是色彩，可以用数字化的方式描述人的视觉感应，在计算机视觉中广泛应用。
LAB颜色空间中，L表示亮度，取值[0-100]对应[纯黑—纯白]；A颜色表示从绿色到红色的范围，取值[-128—+127]对应[绿—洋红]；B表示从蓝色到黄色的范围，取值[-128—+127]对应[蓝-黄]，正是暖色，负是冷色。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～360度，即圆；纯度和明度值为0～100%，因此，了解HSB模式的原理，就能了解色彩的本质。
当我们需要调配同色系色彩，保持色相不变，只需要改变纯度和明度即可。如下图所示的3种同色系绿色，他们的色相（H152）都一致，仅在纯度和明度上有所变化。
当色相和纯度都为0时，色彩称为中性色，也称为灰度色，即黑白灰。其中，灰不是单指某一种颜色，而是一系列从黑到白的过度色。
灰度色多用于文字，通常一个应用中的文字不应超过3种灰度色。深黑用于标题、正文等主要文字；浅黑或深灰用于辅助、提示性文字；浅灰用于禁用、失效等状态文字；纯白用于深色按钮文字。
此外，灰度色由于没有任何色相，始终沉着冷静，减少对内容的视觉干扰，因此常用于界面背景色，例如MOO音乐的界面设计。
Hsl
HSL色彩模式是工业界的另一种颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。在原理和表现上，HSL和HSB中的H（色相）完全一致，但二者的S（饱和度）不一样，L和B（明度）也不一样。
取一个颜色试试看，先选一个颜色#0688F9，放入“HSLColorPicker”，显示HSL数值为：H(208),S(95),L(50)，但是我们放在Sketch里面看一下，显示的HSB数值为，H(208),S(98),B(98)。
HSL的H代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。
HSL的S指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化，如下图：
HSL的L指的是色彩的亮度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。
HSL相比RGB的优势
我们来做一个基于HSL的调色实践。你可不可以快速说出“海棠红”所对应的RGB色值？如果再加一点橙色进去，把亮度提高一点，色值又是多少？想想那应该是一个介于洋红和红色之间的，性感娇艳的颜色。我们可以假定它在色相环H上的角度是330°左右，饱和度较高，亮度适中，看看那是什么颜色？
em...我们想要的颜色应该再接近红色一点，让我们把色相（H）+20°到350°，现在好多了。
通过改变色相值H，我们实现了色相从洋红向海棠红的偏移。大感觉接近了，但还是略微有点灰暗，我们可以通过增加饱和度（S）+15%，让这个颜色变得更鲜活，看起来更亮丽。
同理，如果想加点橙色进去，再亮一点，我们通过心算就大致可以确定色相环的相位和亮度值。在这里，我们需要让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的社区街道命名的。
下面来讲解每一种颜色都各自带有什么样的性格，只有理解了颜色的性格才能正确的使用它们。
黑色
黑色代表着品质、高端、时尚、低调、权威、严肃、稳重，是一种充满质感的颜色。它是所有色彩中最有力量的，能很快吸引用户的注意力。作为一种无彩色，能让它和其他色彩百搭，黑色+金黄色，给人一种奢华精致的感觉；黑色+银灰色，则给人一种成熟稳重的感觉；黑色+红色，给人一种时尚潮流的感觉。因此黑色是一种永远流行的主要色彩。
白色
白色代表着纯洁、简单、纯真、朴素、信任、开放、雅致，白色常常被认为是“无色”，即不是色彩。单一使用白色通常不会引起任何情感，但是当白色与其他颜色配合使用时，白色能很好的衬托，大量的留白让其他元素脱颖而出。在界面设计中，作为无彩色的白色，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面明度，提高文字可读性。
灰色
灰色是代表着睿智、老实、执着、严肃、压抑、沉稳。介于黑色和白色之间，也属于无彩色，没有色相也没有纯度，只有明度的变化。它和任何颜色都能很好的搭配，也常常用于背景色或用于突出其他彩色。灰色不像黑色那么坚硬刺眼，他更有弹性，它比黑色更有深层次的力量。因此在画面中，很少出现纯黑，基本都是用深灰色来代替黑色，也可以用浅灰色来代替白色。
红色
橙色
橙色代表着温暖、欢乐、辉煌、健康、阳光、年轻、华丽，是一种充满朝气的颜色。橙色并不像红色那样咄咄逼人，而且它烘托出的活跃气氛没有危险的感觉，反而是一种友好。因此越来越多的应用避开常见的红色和蓝色，而选择橙色的原因。
黄色
绿色
绿色代表着健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满希望的颜色。绿色给人无限的安全感，当情绪低落与消极时看一些绿色，能缓解我们焦躁的情绪。绿色在生活中被广泛运用，如安全出口的颜色就是绿色，但绿色的饱和度要适当控制，如高饱和度的绿色也会令人兴奋，引起注意。
青色
青色代表着坚强、古朴、活泼、清爽、柔和、优雅、希望，是一种充满灵动的颜色。青色是一种介于
绿色与蓝色之间的颜色，如果无法界定一种颜色是蓝色还是绿色时，这个颜色就可以被称为青色。豆瓣的主色调是青色，很符合豆瓣小清新的气质，带给用户恬静的感受。
蓝色
蓝色代表着冷静、科技、灵性、自由、放松、未来、理智、纯净、商务，是一种充满理性的颜色。蓝色是天空的颜色，是大海的颜色。在色彩心理学的测试中发现，几乎没有人对蓝色反感。纯净的蓝色通常让人联想到海洋和天空，可以抚平内心的伤口，让人的内心感到平和，有助于人的头脑变得冷静。例如twitter的主色调是蓝色，在社交应用里蓝色是一种很安全的颜色，高纯度的颜色传递了信赖、年轻和沟通的氛围。
紫色
紫色代表着高贵、浪漫、优雅、性感、幸运、梦幻、时尚、创造性，是一种充满神秘的颜色。是小孩子和有创造力的人十分喜欢的颜色。紫色的光波最短，在自然界中较少见到，所以被引申为象征高贵的色彩。紫色的明度在所有有彩色的颜色中是最低的。与不同的颜色结合会展现厨不同的风格特色。紫+粉常用于女性化的产品调性，黄色是紫色的对比色。
当我们讨论色彩的时候，聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择，但是实际上，色彩对于用户的心理和行为的影响相对更深，最终会反映在用户体验和行为反馈上。
当然，色彩理论是一个相对复杂的主题。从用户体验的角度上来说，色彩所涉及到的远不是配色方案这一个维度。通常，我们聊得最多的是不同色彩所产生的心理效应，以及多色彩搭配时，相互之间的影响和可访问性上的问题。设计师可以将色彩更好地运用到设计中，而无需重新考虑整个过程。一旦设计师掌握了基础知识，色彩理论中最有意义的部分之一就是学习将更多意想不到的色彩融入他们的设计中。
3.1色彩心理学和用户体验紧密关联
界面颜色的情感影响不容忽视。尽管有些颜色在Ui设计中是“通用的”（例如，黑色，白色和灰色，实际上几乎所有好的设计中都使用了其中的至少一种），但它们结合使用的颜色可能会对体验设计产生巨大影响。当然，颜色的使用方式也会对颜色的感知产生巨大影响。以蓝色为例，在简约的布局当中，大面积使用蓝色作为主色调，和在大面积白底上使用很小的一抹蓝色用来强调CTA按钮，所带来体验是截然不同的。
3.2.1尊重文化差异
人类对于色彩都有着共通的认知，但不同国家对于色彩赋予了不同的含义。红色在中国象征着喜庆、财富和爱情，而在西方国家被赋予了流血、牺牲、暴力和激进的文化意义，贬义的味道更重一些。而白色与红色相反，白色在中国代表了死亡、反动和投降，以白色为主的设计常常会被视之为过于「素」，认为不够吉利。而西方国家却认为白色高雅、纯洁和幸运，因此要根据不同的文化背景，使用不同的色彩，才能更好地降低被误解的风险。
另外一方面，随着现代主义运动的普及，白色也拥有了更加现代的特征。在日本，白色甚至和当地文化结合，延伸出更加细腻独特的精神特质，随着日本战后设计领域的发展和崛起，白色在这一地区的含义则更加丰厚。原研哉在《白》一书当中，针对白色的含义和特征进行了非常深入的探讨，之后的《Subtle》一书当中，虽是围绕纸来探讨微妙的体验，但是也没少提及白色本身的特征。
例如股票交易市场，在国际股票市场通常是绿涨红跌，这是因为红色在西方国家代表着财政赤字，绿色代表着财富；而在中国正好相反是红涨绿跌，这是因为在中国红色象征着财富。
设计师必须根据产品的目标受众来审视其调色板的文化含义，这一点很重要。如果产品要面向全球受众，请确保在使用的颜色和图像之间取得平衡，以防止负面的文化内涵。如果产品主要只针对特定文化，则设计师可以不用太关心所选调色板在其他文化中可能产生的影响。
3.2.2历史对配色的影响
▲中国传统色
▲日本传统色
3.2.3性别误区
或许天生如此，女性不喜欢灰色、棕色和橙色。她们钟爱蓝色、紫色和绿色。而男性不喜欢紫色、棕色和橙色。男性喜欢蓝色、绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩，想象下你把运动类应用的界面使用女性色彩，结果可想而知。
▲男女最喜欢的颜色
▲男女最不喜欢的颜色
3.3流行趋势对色彩的影响
你知道世界上最受欢迎的颜色是什么吗？
是否存在一种色彩，是不分性别文化，大家都会喜欢的呢？确实有人通过大规模的调研和探索找到了一种世界上最受欢迎的色彩：马尔斯绿（MarrsGreen）。来自全世界100多个国家3万多人响应号召完成了这项投票，并且最终选取出来的一款绿色。
所以，当你在设计的时候，如果你的目标用户群体有着清晰的地域或者性别偏向，你可以有目的地利用这些知识来规避设计陷阱，更好地发挥色彩本身的功能和优势。如果受众广泛，则可以尽量使用通用性更强的色彩来进行设计。
4.1色彩的应用
4.1.1色调一致
4.1.260-30-10原则
60%30%10%的原则，是达到色彩平衡的最佳比例。在60%的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个App的视觉焦点和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。6:3:1原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上，蓝色的辅助色用在角标、图标上，还有黄色、红色用在一些小图标、小标签上，主次非常清晰明了。
“60-30-10原则”另一方面来说也控制了色彩的数量，但在实际UI设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不可超过7种色相，每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。
4.1.3远离纯黑色和纯灰色
黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色，是因为它们不存在于现实世界里。尝试在纯黑和纯灰中加入一些色调，会让界面看上去更柔和自然。另外，纯黑色还会与白色产生强烈的对比度，看久了会使人疲劳，让用户产生焦虑的情绪。MONO的导航栏并不是深黑色，而是加入了蓝色的低饱和度蓝黑色，它的界面背景也是加入了蓝色的的浅色，这样就不会让界面看上去死气沉沉的。
4.1.4遵循色彩心理学
前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行App设计时提供依据。这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的草地、黄色的沙漠等等，自然的色彩，对于我们来说是司空见惯的，但其中却蕴含着丰富的美感，并达到了和谐统一。网易云音乐使用红色作为主色，这种热情奔放的颜色传递出一种充满能量、自信的气质。
4.1.5良好的可读性
良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验，而一个可读性差的界面则会成为用户浏览的障碍。那如何确保界面具有良好的可读性呢？这就需要在界面设计中注意色彩搭配的对比，如在浅色背景上使用深色文字，在深色背景上使用浅色文字，使用高对比的度的亮色展示重要的元素，用低对比度的浅色来体现需要弱化和次要的内容。例如苹果Music的主要功能入口，标签栏图标、按钮等都是用了高纯度的红色，与其他元素从形成鲜明对比，就连深灰色的辅助文字都有着清晰的可读性。
4.1.6从大自然中获得灵感
4.1.7将UX颜色与品牌相匹配
品牌价值在创建调色板中发挥关键作用，但是它们不是唯一重要的因素，行业规范也是关键。使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。配色在品牌视觉中所发挥的作用是不言而喻的，但是，色彩本身的内涵和情绪特质并不是全部。比如一个行业当中，很多产品都使用了蓝色，那么你的产品继续使用蓝色，可以让用户更快「识别出」你所属的领域，但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出，可以试着使用不同的色彩。
△中国区或美国区，红色和蓝色都是最流行的颜色。
在进行品牌设计的时候，选择配色的第一步，始终是了解各种颜色或者色相的气质和情感属性。然后，在具体设计的时候，在进一步根据品牌的气质和需求，再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。
4.1.8从强调色入手
想要让配色方案更加突出，在设计中添加强调色可能是最容易入手的地方。举个例子，一个律师咨询的App可能会使用传统的蓝色作为基础配色，但是，如果能够加入柠檬绿作为强调色，会显得独特很多。
4.1.9避免常见错误
可读性是任何设计中的重要因素。你的颜色应该清晰易读，尤其是在处理文字时。因此对比度对视觉效果对影响就非常关键，对比度过小，就会使得界面出现灰蒙蒙对效果。清晰的对比度，一般会采用色彩的两极，黑纸白字或白纸黑字。而在彩色背景上要让内容清晰可见，就需要搭配纯白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互补色和明度接近的文字，因为这两种搭配会产生一种“震颤效应”，发出光晕的视觉效果。
为什么「超链接文字」要用蓝色？
简单说，因为在最早期的网站页面中，蓝色能呈现最高的对比度。
TimBerners-Lee——web的主要开创者，被认为是最早用蓝色链接的人。
一个很早期的web浏览器Mosaic，用的是深灰色背景和黑色文字。那时候，能用的非黑色、最深的文字颜色，就是蓝色。所以，让超链接文字突出显示，同时保证可读性，就选定了蓝色。此后超链接文字都用蓝色的传统沿用至今。
4.2app设计中的色彩搭配
4.2.1主色
4.2.2辅助色
辅助色与主色相辅相成，辅助色的功能是帮助主色建立更完整的形象，使界面丰富精彩起来，避免画面过于单一。通常，主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则就会使界面看上去花哨分散了主题。根据6:3:1原则，辅助色可以占有色相色彩的30%或更少为宜。
4.2.3点缀色
来康康这三种点缀色与主色之间存在什么样的关系，在色相（H）上，3种点缀色为邻近色，与主色为互补色；在明度（B）上，3种点缀色均为高明度色彩，起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。
4.2.4背景色
支付宝AlipayDesign团队提出过一个配色原则：
以同色系配色为主导，多色搭配为辅。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
4.3迷人的渐变色
不同于单一色彩，渐变色不属于任何色彩，它营造出千变万化的视觉效果，却又不会增加视觉负担。相较于单一的色彩，渐变色的复合性质让它在界面设计中具有更强的视觉冲击力，有助于快速抢占视线。如今，这种独一无二的色彩正逐渐成为一种潮流，究其原因是目前大量的扁平风格造成UI设计的严重同质化，人们需要追求更加个性的视觉语言来满足日益增长的设计需求。下面我们来了解几种常见的渐变的使用技巧。
4.3.1色相、饱和度、明度的渐变
色相（H）渐变是指由一种色彩向另一种色彩的过渡，这种渐变因跨度大产生的视觉效果非常明显；饱和度（S）渐变是指同一种色彩不同纯度的过度，其产生的视觉效果比较和谐单调；明度（B）渐变是同一种色彩不同明暗的过度，这种渐变的视觉效果给人一种沉静的氛围。
4.3.2渐变的表现形式
在界面设计中经常看多各种各样的渐变表现方式，使用最多的有以下几种：
水平渐变
这个很好理解，是指角度为0的线性渐变，是最流行的渐变形式。界面设计中多用在导航栏、进度条、按钮等元素上，能让画面变得精致而通透。例如京东使用橙红渐变的设计语言贯穿整个App，从应用图标到导航栏、按钮、标签，全部都运用了这种由红色到橙色的过渡。仔细观察发现在很多小标签上都使用了水平渐变设计手法，使产品看起来更年轻化。
在水平渐变中，通常把轻（亮）的色彩放在左边，重（暗）的色彩放在右边，这样由左向右的方向感刚好与人的浏览习惯保持一致。而反过来就会与人的浏览视线相悖，应避免。
垂直渐变
即角度为90°的线性渐变，它通常被用在正方形或竖条形的元素上，如注册登陆页，个人中心头部等。垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果，上浅下深会让给人一种凸起的立体感，而上深下浅会给人一种凹陷下去的空间感。例如「纪念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景，在让整个画面丰富的同时又不会太抢夺主体的色彩，使画面显得清新透气而不沉闷。
角度渐变
色块渐变
渐变的颜色不只可以运用在一个色块上，还可以运用在一组色块上。设计师运用一组近似性色彩，将每个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面更有节奏感和舒适性。不同于平滑的渐变，色块渐变不再是单纯的背景装饰，在某些地方还具有一定的功能性，比如使用不同的色块来分割的列表样式。ClearTodos是一款日常任务清单的APP，它抛弃了传统的列表样式，使用了一系列色块来作为列表的分割，非常漂亮和精致。
径向渐变
是指色彩以圆心向四周扩散的渐变，是一种模拟光源照射的视觉效果，因此光源是整个画面的视觉焦点，将关键元素放在光源中心就会成为主角。通常被运用到大背景上，如启动页、引导页等。Solar天气应用的背景就是径向渐变，光源扩散的效果营造出一种梦幻般的美感。
4.3.3和谐的渐变色
渐变色是由一个色彩走向另一个色彩的过程，有着迷人的视觉效果。如果你仔细观察两种色彩的过渡关系，就会发现不是每次都会得到满意的效果，例如红绿渐变就很糟糕，因为它们两者是互为对立的色彩，但是如果加入黄色的过渡色就会好很多。原因是当两种色彩之间超过90度就会导致其渐变色看上去不太和谐自然，只有控制在90度之内才会产生美妙的变化。如何改善超过90度的两种色相的渐变呢？这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时，就可以加入紫色作为过渡才能呈现完美的视觉效果。
在搭配渐变色时，尽量只改变其色相（H）、饱和度（S）、明度（B）中的一项，这样才能创造出和谐的渐变色方案。
调色板帮助我们在设计项目中建立色彩规范、提高工作效率。通过上文对色彩基础知识的学习，接下来为大家介绍几种简单易用的创建调色板的小技巧。
5.1从设计作品收集色彩
打开dribbble，每一幅作品预览页左下角都有一份自动生成的配色板，很多同学可能不知道这个配色文件是可以下载的。将调色板保存到本地，为自己在创作时提供灵感。在ps里的操作步骤是：点击“窗口—色板”，然后在色板的属性面板右上角打开“导入色板”，载入刚下载的色彩文件即可。
5.2从图片取色
这种方法也很常用，不需要任何插件，丢一张图片到Ps，然后将图片「马赛克」处理下就可得到一组配色。例如，我们需要一组同色系的绿色，在网上（建议unsplash或500px等专业图片网站）找一张树叶的图片，接着将图片在Ps中打开，进入“滤镜—像素化—马赛克”，在打开的窗口里调节单元格大小即可。
5.3自定义色块叠加
该方法稍微复杂一点，示例步骤如下：第一步绘制一个正方形做底板，填充一个颜色#5354F0；第二步分别在正方形的上和下1/3处叠加20%的白色和黑色；第三步分别在正方形中和右1/3处叠加40%、80%的紫红色#DF56FA；最后改变紫红色图层的混合模式为叠加即可得到一组蓝紫色色调的调色板。
5.4网站生成
利用AdobeColor配色网站自动生成一组配色。它是一个基于网络的应用程序和创意社区，提供免费的色彩主题，全世界的设计师都可以在这里创建和共享颜色与灵感，并且在Adobe相应的软件中也提供了扩展程序，比如我们常用的Photoshop和Illustrator.
AdobeColor通过拖拽色轮或输入自定义色值，可以创造出基于相似、互补、三原色、正方形等不同色彩规则的配色方案。除此之外，还支持CMYK、RGB、HSV多种色彩模式的配色调整。用法很简单，点击颜色块上的小三角确定基础色，就会自动生成5个基于你所选色彩规则的配色方案，拖动下方的颜色条时相应的也会改变配色方案。如果没有灵感可以通过顶部导航进入“探索”页，这里为我们提供了很多提取好的颜色和图片，这里的图片很丰富，有的是摄影作品，有的是设计作品，上方的轮播图提供的一些格外的内容，比如潘通流行色、Adobe社区、Adobe手机端的APP等等，非常的实用。
6.1配色网站推荐
Coolors
Coolors是创建配色方案的一个比较强大的工具。只需锁定选定的颜色，然后按空格键即可生成新的调色板。点击任一组查看，会随机挑出该组合的5个不同的颜色，每条颜色下面有颜色代码，点击颜色值可以选择不同的颜色模式及自定义调整色相、饱和度和纯度，还能传换成色阶显示。如果对当前颜色不喜欢，按空格键就可切换下一组颜色组合方案。
lolcolors
LoLcolors是一个简单在线配色工具，可以在这里找多许多色彩组合，将鼠标移动到颜色上方就会显示色值。每组颜色组合下方的小心心代表喜欢的人数。不过LoLcolors还没有收藏功能，也无法自定义配色。
Paletton
Paletton是一个在线面色调色网站，选择一个颜色后，即可在上方查看4种不同的配色模式。网站还提供配色方案调整，网页演示效果等。
Colorhunt
WebGradients
网站整理出了180种流行的渐变色方案，每一个渐变色都提供了颜色值，css代码及png图片下载，不愁搭配不出好看的渐变色了，还可以点击小圆球全屏预览渐变色效果。
Grabient
Grabient一个非常漂亮且实用的渐变网站，支持CSS样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下方自由添加和调整渐变的色系、以及线性渐变方向。
Picular
Picular是一款基于谷歌图像搜索的色彩生成器，只需输入描述词，就能快速生成配色方案。点击图钉可创建自己的颜色版。
EvaDesignSystem
EvaDesignSystem是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。
当然，以上这些配色工具只是为我们提供方便的，而不是主导我们的，所以在使用配色工具的时候最好是要有一定的理论基础作为支撑，让你的配色有理有据，切忌生搬硬套。对于新手设计师来说，颜色越少越容易把控画面。色彩层级越精简，就越容易达到整体色彩平衡，掌握好色彩的功能划分必然会让你的配色过程保持思路清晰从而提高效率。
6.2关于色彩空间配置
建议设计软件使用sRGB作为色彩空间的默认配置，而不要采用未管理（Sketch中默认是未管理/非托管），若团队协作请提前保持色彩空间配置的统一性。如果有需要针对广色域色彩空间做项目，可以单独设置该项目文档的色彩空间为DisplayP3或者AdobeRGB。
Mac系统色彩空间配置
建议所有macOS用户都在系统偏好设定的显示器颜色设定当中换用sRGBIEC61966-2.1这个校色方案，可以极大改善系统显示效能。如果有外接显示器，也建议使用外接的默认选项，默认选项一般可以发挥出该显示器的最大色彩性能。
Sketch色彩空间配置
因为Sketch目前还是UI设计师的主力软件，在此就说下怎么更改Sketch色彩空间配置。Sketch默认颜色配置是「非托管」，我们可以在「偏好设置」中为Sketch指定默认的色彩空间配置，如此一来每次新建设计文档将会默认采用我们的设置作为默认的色彩空间，不用每次新建文档都单独设置一次。
设置方法：Sketch→偏好设置(Preferences)→通用(General)→颜色描述文件(ColorProfile)，修改下拉框选择器的内容为sRGBIEC61996-2.1。
如果要更改已有的文档为sRGB色彩配置，可以通过文件——更改颜色配置，在弹出的对话窗里对文件进行色彩空间的更改即可。