万字干货！超全面的色彩与应用指南

色彩是影响用户最简单和最重要的一个因素。研究表明，人们只需 90 秒就能对一种产品做出下意识的判断，而其中高达 60%以上的判断仅基于颜色。因此，选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。在没有文字的场景中，颜色g 1 q L的搭配非常重要。如何配色可以使设计感更强，如何配色更好看，哪些配色不好看，解决这些问题就需要学习色彩理论。

色彩基础知识w q V : S i , o

我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪Z o v g y & 2。色彩，即光从物体反射到人的眼睛所引起的一种视觉心理感受，按字面含义上理解可分为色和彩。「色」是指人对进入眼睛的光传至大脑时所产生的感觉，「彩」则指多色的意思，是人对光变化的理解。色彩的基本理论虽然老生常谈，但在 UI 设计中具体怎么运用，还有关于色彩W A = A l o ` G 4的性格和含义，都是我们需要了解的。因此在学习 UI 配色之前我们先来了m / L = z a [解色彩的基础知识。

1. 色彩常识

原色

所有的色彩都源自“红黄蓝”三种原色，很多人误以为三原色是“红U l P J p绿蓝”，其实不是。红绿蓝是显示上的三原色，计算机屏幕的显示是色光三原色（S ~ I Y + q ` {红 red，绿 green，蓝 blue）即 RGB 组成的，每一个像素的颜色都用三原色值来显示q D Y ? j ] . ^ C，与美术上的三原色不一样。原色是其他颜色调配不出来的。把原色相互混合，可以调和出其他种颜色。

虽然 RGB 在显示设备上表现良好，但并不够人性化。因为人们判断n * I , g F A颜色，往往是通过：这是什么颜色？是不是太V ~ X E + u s r F艳了？是太亮了还是太暗了？这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGw C x ) 3 @ 0B 衍生出了 HSB 模式和 H# B b q {SL– E a 3 F H 模式。

印刷三原色为青（Cyan)、品红（Magenta)、黄（Yellow)。是减色模式，混合为深灰色，并不能产生黑，所以在印刷时加上黑色% T s M . 4 S *油墨，才能产生纯正的黑，就是 CMYK 颜色模式。

间色

又叫“二次色”。它是由三原色两两混合调配出来的颜色。红与黄调配/ k G % Z 6 i出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色”。在w d W调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。

复色

也叫“复合色”。复色是用原色与间色相调或用间^ b t n F色与间色相调而成的“三次色”复色是最丰富的色彩家族，t L O d x 8 t |千变万化，丰富异常，复色包括了除原色和间色以外的所有颜色9 d U q 8 x @。例如，黄色与橙色混合得到橙黄，红色W ; ~ 7 J z L与紫色混合得到紫红。

冷暖色

最后由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。冷色令人联想到天+ M _ | z W [ =空、海洋、% L B 4 8 z n 8冰雪等，产生寒冷、理智、宁静等感觉；暖色则令人联想到太阳、火焰、热血等，产生温暖、热烈、危险等感觉。

虽然可以用「冷」、「暖」色系来划分色彩，但配色的变化却有千种} # b D x I万U e v种。借着色彩的组合方式，从「非常冷」到「凉爽」到「暖和」再到「炎热」都可以用不同的配色组来表现色彩的印象。

• 知识点：

不同的色轮由不同的人发明，他们对于色彩的见解, ( 3 w } 7不一样，因此创建出来的色轮用途也不一样。比如：伊顿色轮又被称之为美术三原色，是由颜料的三原色混合叠加而成；RGB 色轮主要运用| q J . t X F N B于电脑、手机、平板等一系列科技产品，RGB 的三原色是光的三原色；CMYK 色轮主要用于印刷领域。

2. 色彩三属性

丰富多样的颜色可以分成两大类，即有彩色系和无彩色系。彩色系的颜色具有三个基本特征：色相、明度和饱和度，在色彩学上被称为色彩三大要素或色彩三属性。

色相（Hue）

色相是自然状态下的色彩，是色彩的V ! J J 1相貌。简言之，色环上没有改变明暗的色彩。色相是色彩的首要特征，是区别各种不同色彩的标准。例如红、橙、黄、绿、青、蓝、紫就是其中不同的基本色相。黑色是没有色相的中性色。不同的色相在人眼中的差异是色相本身对应光的波长不同而造成的。红色波长最长，紫色的波长最短。

饱和j K ? ( Z度（Saturation）

饱和度是色彩的纯度，他表示颜色中所含有色成分的比例。增加饱和度，色彩会变得更强烈、z ~ p W o鲜艳生动；降低饱和度，颜色中灰色成分越大，色彩会变得暗淡乏味。当T 3 d P I 5一种颜色掺入黑、白或其他色彩时，纯度就产M Q R生了变化，当掺入的颜色达x E v U @ V T t到很大的比例时，人的眼睛就无法感知出来了。

饱和度为 0 的颜色为无彩色，就是黑、白、灰。数值越大，颜色中的灰色越少，颜色越鲜艳。饱和度高的地方给人感觉靠近，而饱和度低的地方则给人的感觉很遥C u | c ~远。高饱和度和低饱和度的色彩都给人坚硬的感觉。

明度（B* 2 = ? Trightness）

明度，指色彩的明暗度，反应的是| o 0 i n a色彩的深浅变化。以自然界为例，一些物体在早晨和晚上的色彩不同。如树木和山; 0 * % + ,脉，早晨色调浅；傍晚因为光线减少了，色调变得偏暗。距光源越近的物体，明度越高，反之，则明度越暗。8 d V u

明度在 UI 设计中扮8 H z演重要的角色，明度运用得好，可以实现好的对比效果。明度达到 100%时，色彩就会变成白色（黑白模r 8 M f X T R式下）；明度是 0%时，就会变成黑色。色彩的明度变化往往会影响到纯度，例如蓝色加入黑色以后明度降低了，同时纯度也f I ~ p % f ;降低了；如果G ` H # 9 W Q & h蓝色加入白色则明度提高了，纯度却降低了。

3. 色彩的搭配

完整的 UI 配M * n b w [ 1 ! c色应包含主色、辅助] p ~ t ` k & V色和中灰色。主色通常与品牌色一致，辅助色一般选择与主色Z a f色调一致且能拉开层次的颜色，强调色选择与主色相对立的互补色。下面我们来学习几种常见的配色方案。

单色

单色是指某个色彩的明度变化，即在色彩上叠加 10%-90%白5 L r o : L ` )色或黑色得到的一组颜色。单色搭配由于彼此之间色彩相同，因此I r % w ? m G [能和谐共处，但因较为朴素也就不容易引人注目，而且^ [ I D c n会给人一种单调的感觉。单色配色在色彩变化上也适合长时间阅读m Z e (，颜色波动较少，比较适合沉浸式交D S X ] Z h b X j互的界面设计。

虾米音– / 0 S ] g乐就是单色搭配的最好例子，它将主色橙色用在主要功能入口、标签栏图标等所有界面的关键元素上，给人非常精致和统一的O – F 7视觉体验。

如若想要在色彩变化上融入一点微妙的变化，可以尝试在色环中选用两侧相近的p ^ t颜色，这样色彩层次丰x c P n e v n v富了而统一感也不会变，称之为“邻近色配色”。Y T ` q { ] –

邻近色

是指在色相环中相邻的两种颜色，在色相环上相距 60，或者相隔五六个数位的两色。它可以在同一个色调中建立起丰富的质感和层次，优点是阳光、活泼、稳定、和谐但不单调，理所当然称为最安全的配色Y ~ v X x J 法则。邻近色色相相近，冷暖性质相近，传递的情感也较为相似。例如，红色，黄色和橙色就是一组邻近色。邻近色表现的情感多为温和稳定，没有太大的视觉冲击。

美颜相机的主色是粉色，将浅粉色和浅紫色作为辅助色，既能信息区分又和谐统一。

互补色

互补色是指在色相环上Y 9 ) O U对立（180）的两个颜色，色相环上夹角呈现一条直线，例如黄色和紫色、橙色C 5 a 2 y = j m _和蓝色、红色和绿色等。互补色有着非常强烈的对比度，在颜色饱和度很高时，可以产生许多十分强烈的视觉效果，就会使这两种颜色都显得更加鲜明，R J r Y Y U v也将视觉冲击力强度提升至峰值。这类配色形式优缺点和对比色很相似。常给人一种潮流、刺激、兴奋的感觉，把互补色放在一起，会给人强烈的排+ ] 9 F ~ B l | 2斥感，搭配不好会很山寨。

Airbnb 的主色为红色，界面设计中使用主色的互补色「墨绿」作为主色调，给人清晰、高效简洁的感觉. m / C。

分裂互补色

分裂互补色是指寻找三种颜色，其中两种互为邻近色，另一种与它们形成互补色，例如黄7 I 9 0 : I | ; 6色和蓝色、洋红。这种搭配既能保持互补色强烈的对比及视觉上的趣味性，又能让颜色变得柔和。

36Kr 将蓝色作为主色，互补色黄色作为辅助色用在图标、标签上，再选择黄色的邻近色红色作为另一辅助色，用在不同的信息上，| e x有助于用户区分产品信息。

对比色

指在色环上相距 120～180之间的两种颜色，也是两种| A j W可以明显区分的色彩，包括颜色三要素的对比、冷暖对比，彩色和消色的对比等。对比色能使色彩效; + C P ! ?果表现更明显，形式多样，极富表现力。需p % ~ 7 % u要注意的是，互补色一定是对比色，但是对比0 K & I . k + L色不一定是互补色。因为对比色的范围更大，包括的要素更多，如冷暖对比、明度对比、纯度对比等。这类配色形式优点是视觉冲击力强烈、富有跳跃性、突出、点缀能力强，比如常用作画面中的点缀色，或与主体固有色成对比关系的背景色，用于突出主体。缺点是大面积使用比较难把控。

马蜂窝的主色是黄色，对比色蓝色作为辅色用在: @ 5 l 5 H w标签、小图8 9 I & s标上，红色作为强调色用在价格N ` ] a I等信息上。

对比色也不单纯是两个颜色之间O # 2 M 1 z ^ U f的对比，而是色调之间的对比！对比色还包括：补色对比、色相对比、明度对比、饱和度对比、冷暖对比，饱和度越高对比越强烈，明度反差越大对比越强烈。

四元色搭配

四元色搭配在色环上形成了i G一个矩形，使用不是一对而是两对互补色。将其P p o 6 F R 8 s中的一个颜色作为主色，其余颜色作为辅色进行搭配可以得出不错的效果。

四元3 ~ 0 0 O色是比较难以平衡的颜色，不过. o Z S搭配好了会非常出彩。不信可以自己用用感受一下，尤其是使用其中一个颜色作为主色，其他的三个颜色作为辅助色的时候。

4. 色彩和光源关系

了解了色彩的基本知识，下面说说色彩和光源的关系。如果想描绘好对象的色彩，那么7 6 X m就必{ @ `须了解对象的固有色、光源? t X + X +色、环境色及它们之间的关系和变化。

固有色

即物体本身的颜[ 0 = ~ o p S .色。是指在光源条件下物体占主导地位的色彩，如红色的罐子、绿色的植物等。物体的固有色并不存在，在绘画过程中为了观察方便经常引入“固有色”这一概念。从实际方面来看，即使日光也是在不停地变化中，何况任何物体的色彩不仅受到投照光的影响，还会受到周围环境中各种反射光的影响。所以物体色并不是固定不变的。

光源色

物体只有在光源的照亮下才能观察到它们的色彩。光源有自然光（太阳、天光）和人造光（灯），这些光源都各自具有不同的颜色。太阳m U , q _ t ;光是偏黄色暖色光，月光是偏青的冷色光，阴天则更多的是蓝灰色的天光，普通灯光是偏黄色的暖色光。光源的颜色对物体的颜e m _ . G { o色影响很大，想象一下一个置于红色D @ 7 #光源照射下的蓝色物体会是什么颜色。

环境色

物体周围环境的颜色就是环境色。环境色对物体的影响非常大，如在红色背景下的o s W H l s A /白色物s G B S ; _ ( g体，由于光源打到红色背景D / M V b @上的背景反射光也会“染”到白色物体上，因此白色物体的部分表面会蒙上一层淡红色的色彩。所以，设计师F 2 T q R Y在用电脑作图时也需要考虑并想象环境色的影响。

5. 色彩空间

Lab

Lab 的全称是 CIELAB，有时候也写成 CIE L*a*b*。最突出的特点是它的生理特性，一是它包括人眼所看到的所有颜色，是目前为止P V h $色域最宽的色W ( E G } V v 4 –彩空间，二是跟人眼一i ! A样，首先看到的是明暗，其次是色彩，可以用数字化的方式描述人的视觉感应，在计算机视觉中广泛应用。

LAB8 ( l 颜色空间中，L 表示亮度，取值[0-100]对应[纯黑—纯白]；A颜色表示从绿色到红色的范围! R I i J 3，取值[-128—+127]对应[绿—洋红]；B表示从蓝色到黄色的V L D ! 3范围，取值[4 1 Z J W g o S-128—+127]对应[蓝-黄]，正是暖色，负是冷色。Lab颜色空间中# = e D v e !亮度和颜色是分开的， L通道没有颜色，a通道和b通道只有颜色。不像在RGB颜色空间中，R通道、G通道、B通道每一个既包含: n W r 1 M =有明度又包含有颜色。

在表达色彩范围上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它弥补了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是说 Lab 模式所定义的色Z ; W ` q K彩最多，且与光线及设备无关，并且处理速度与 RGB 模式同样快，比 CMYK 模式快数倍。

Hsb

HSB 和 H– R OSV 是同一个东西，只是名称不同。在 Photoshop 拾色器上可以看到每个颜色都有一组 HSB 值，H 表示色相、S 表5 l * h ` l M 9示纯度、B 表示明度。色相值为 0～360 度，即圆；纯度和明度值为 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本质。

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

当色相和纯度都为 0 时| 2 $ X % T = @ .，色彩称为中性色，也称为灰度色，即黑白灰。其中，灰不是单指某一种颜色，而是一系列从黑到白的过渡色。

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

此外，灰度色由于没有% I Z v 4任何色相，始终沉着冷静，减少对内容的视觉干扰，因此常用于界面背景色，例如 MOO 音乐的界面设计。

Hsl

HSL 色{ ; N Y V彩模式是工业界的另一种颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。在原理和表现上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（饱和! J t 4 ]度）不一样，L 和 B （明度 ）也不一样。

取一个颜色试试看，先选一个颜色 #0688F9，放入 “HSL Color Picker”，显示 H^ c * | g d 1SL 数值为：Hg W . k K G ; 4 !(208), S(95), L(50)，但是我们放在 Sketch 里x ) x u面看一下，显示的 HSB 数值为，H(208), S(98), B(98) 。

HSL 的 H 代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相U f s q 3 b & `环上，取值范围是 0到 360的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变g ~ p 8 7 j D光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360/0红、60黄、120绿、180青、2P a U d N b d /40蓝、w p n ; M 4 ,300洋红，它们在色相环上按照 60圆心角的间隔排列。

HSL 相比 RGB 的优势

我们来做一个基于 HS9 k s w } n k t L 的调色实践。你可不可以快速说出U u e 7 ( | ? h W“海棠红”所对应的 RGB 色值？如果再Y ^ b , `加一点橙色进去，把亮度提高一点，色值又是多少？想想那应该是一个介于洋红和红色之间的，性感& v J娇艳的颜X { P ]色。H } ^ } 3我们可以假定它在色相环 H 上的角度是 330左右，饱和度较高，: 8 6 X 8 r –亮度适中，看看那是什么颜色？

em…我们想要的颜色应该再接近红色一点，让我们把色相（H）+20到 350，现在好多了。

通过改变色相值 H，我们实现了色相从洋红向海棠红的偏移。 大感觉接近了，| w O p + k k但还是略微有点灰暗，我们可以通过增加饱和度（S）+15%，让这个颜色变得更鲜活，看起来更亮丽。

感觉还是差点，海棠红是属于少女的颜色，应当再嫩一点、通透一点，不会这么强烈; L i o R。那可以通过增加亮度 L，+10%试试看，嗯，这才是我们想要的颜色d | C。

同理? _ ( + g，如果想加点橙色进去， 再亮一点，我们通过心算就大致可以确定色相环的相位和亮度值。在这里，我们需要让 H 增加 20，Lg 1 K 增加 5%。K V 8 h F _ X w ~

在使用 HSL 调色的过程中，^ j H不需要了解复杂的色光混合原理，这是一个自然的、感性的、易于理解的过程。相比之下，RGB 调色方式显得非常笨拙复杂、难以理解，而 HSL 是多么的友好。

• 知识点：

需要提醒一下的是，CS( 7 T H ) j 5 xS 代码里支持的是 HSL，而不是 HSB。如果和前端对接时，UI 给到的是 HSB 的色值，那么最终落地的颜色效果会与设J 4计稿有出入。Photoshop 中的 Hex 和 RGB 颜色可y L P / u y % X /以直接在 C^ 7 e rSS 文件中使用，但是 Photoshop 中的 HSB 模式颜色和S 6 w HSL 是不同的。

Yuv

YUV，是一种颜色编码方法。o p P W常使用在各个影像处理组件z m X中。YUV 在对照片或影C D v片编码时，考虑到人类的感知能力，允许降低色度的带宽。Y 表示明亮度（Luminance 或 LuZ i D : v V 0 nma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示浓度（Chroma）；通常 UV 一起描述影像色彩和饱和度，用于指定像素的颜色。

采用 YUV 色彩空间的重要性是它的亮度信号 Y 和色度信号 U、V 是分离的。如b & E @ I V ^ e果只有 Y 信号分量而没有 U、V 信号分量，那么这样表示的图像就是黑白灰度图像（回想一下W V 4 b S小时候! v m 9 / } C ` g看的黑白电视）。彩色电视采用 YUV 空间正是为了用亮度信号 Y 解决彩色电视) # :机与黑白电视机的兼容问题，使黑白电视机也能接收彩色电视信号。

色彩心理学

色彩心理学是美术知识学习中非常/ { =重要的一部分。他所研究的是/ [ m l B色彩通过对人视觉上的刺激，而引发人情感和感官上的变化，通过日常生活中人们对应用色彩的经% a L J u a H H验积累而归纳W 1 ] 0总结出人类对色彩心理上的o ] c预期感受。在生活中，色彩心理学对人们对颜色的认知有很大的影响。为什么交通信号灯用红色表8 B z ( M j U y s示停止通行而不是绿色呢？为什么大多快餐d J j N t H店用红色或黄d ; D ~ , 0 ~ w色作为品牌的主色？这都是色彩心理学的相关知识。

虽然红、蓝是受到最普遍喜爱的颜色（通过对 App Store 应用流行颜色分类统计得知）。[ * % = D x o但并不意味着这一准则t + 2 ( F –可以套用在所有产品上。产品的属性是什么，用户定位是什么，要传达的产品气质是什么等等，这些都是选择应用v @ V K S Y e图标的颜色时需要考虑的问题。世界上第一间 AirM S Y e Gbnb 房间是在一条叫 Rausch s& N J ^ 9 (treet 的街上诞生的，因此 Airbnb 的主色被命名为「Rausch」的温暖颜色。在挑选主色调的时候，4 名设计师前往世界 13 个城市，只为了更好地理解 Airbnb 的理念：热情、能量和自信v P r U ? l ~，这正是 Rausch 要传递的信息。除了 Rausch 以外，Airbnb 还有其它九种颜色，包括 Kazan、Beach、Tirol、Foggy 等等，它们也都是以 AirO t @ N ? ` lbnb 的社区街道命名的。

下面来讲解每一种颜色都各自带有什么样的性格，只有理解了颜色的性格才能正确的使用它们。

黑色K t o X ~ o k

黑色代表着品质、高端、时尚、低调、权威、严肃、稳重，是一种充满质感的颜色。它是所有色彩中最有力量的，能很快吸引用户的注意力。作为一种无彩色s : 9 O，能让它和其他色彩百搭，黑色+金黄色，给人一种奢华精致的感觉；黑色+银灰色，则给人一种成熟稳重的感觉；黑色+红色，给人一种时尚潮流的感觉。因此黑色是一种永远流行的主要色彩。

白色

白色代4 e s表着纯洁、简单、纯真、朴素、信任、开放、雅致，白色常? @ | N + 1 I ?常被认为是“无色”，d Q y即不是色彩。单一使用白色通常不会引起任何情感，但是当白色与其他颜色配合使用时，白色能很好的衬托，大量的留白让其他元素脱颖而出。在界面设计中，作为无彩色的白色，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面K 7 C W明度，提高文字可读性。

灰色

灰色是代表着睿智、老实、执着、严肃、压抑、沉稳。介4 i k j于黑色和白色之间，也属于无彩色，没有色相也没有纯度，只有明度的变化。它和任何颜色都能很好的搭配，也常常用于背景色或用于突出其他彩色。] e s ( – C灰色不像黑色那么坚硬刺眼，他更有弹性，它比黑色更有深层次的力量。因此在画面中，很少出现纯黑，基本都是用深灰色来代替黑色，也可以用浅灰色来代替` p S 1 t f ^ P o白色。

红色

红色代表着喜庆、热情、4 m 5 P欢乐、斗志、奔放、自信，~ G ^ x是一种充满能量的颜色。这+ c C : s = =是最醒目和强势的j | a E E颜色，一登场即获得全场的关注，甚至能引起一些生理反应，例如心跳呼吸加快等。红色最能烘托气氛，在中国传统节日里都使用热闹的红色来装饰，因此也就不难理解每逢佳节各大电商应用活动页一片红，为的就是发冲动，引人消费。同时红色也代表了警示、告诫。所以在界面设/ / 2 E ^ +计中常用红色的文字和按钮来警示用户慎重8 Y 操作。

橙色

橙色代表着温暖、欢乐、辉煌、健康、阳Q M | +光、年轻、华丽，是一种充满朝气的颜色。橙色并m I v不像红色那样T H P咄咄逼人，而且它烘托出的活跃气氛没有危险的感觉，反而是一种友好。因此越h v Y _ n来越多的应用避开常见的红色和蓝色，而选择橙色的原因。

黄色

黄色代表着信心B : & g a w Z、青春、聪明、尊贵、辉煌、时尚，7 Q Q是一种充! P | ( [ k (满活力的颜色。黄色是明度极高的颜色，] _ * 1 ( } e其鲜亮的色调使它在众多图标阵列中显得尤为突出。尽管在警示效果上没有红色那么明显和强烈，但是/ _ g还是能给人很醒目和危险的感觉（例如道路警示牌）。同时因为过k d : b `于明亮，也是一种非常难以运用的颜色，性格不稳定常有偏差，和别W , Y z a t的颜色配合使用易失去本来的性格。不过黄+黑的搭配很流行，例如站酷N % g v D 7 g和美团外卖。

绿色

绿色代表着健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满A } 1 z希望的颜色。绿色给人无限的安全感，当情绪低落与消极时看一些绿色，能缓解我们焦躁的情绪。绿色在生活 J ( o ; – S k中被广泛运用，如安全出口的颜色就是绿色，i K Q W 8但绿色的饱和度要适当控制，如高饱和度的绿色也会令0 N ? s人兴奋，引起注意。

青色

青色代表着坚强、古朴、活泼、清爽、柔和、优雅、希望，是一种充满灵动的颜色。青色是一种介于绿色与蓝色之间的颜色，如果无法界定一种颜色是蓝色还是绿色K x D v , W s时，这个颜色就可以被称为青色。豆瓣的主色调是青色，很符合豆瓣小清新的气质，带给用户恬静的感受。

蓝色

蓝色代表着冷静、科技、灵性、自由、放松、未来、理x j P z 9智、纯净、商务，是一种充满理性k 8 k的颜色。蓝色是天空的颜色，是大海的颜色。在色彩心理学的测试中发现，几乎没有人对蓝色反感。纯净的蓝色通常让人联想到海洋和天空，可以抚平内心的伤口，让人的内心感到平和，有助于人的头脑变得冷静。例如 twitter 的主色调是蓝色，在社交应F | Y e J用里蓝色是一种很安全的颜色，高纯度的颜色传递了信赖、年轻和沟通的氛围。

紫色

紫色代表着高贵、浪漫、优雅、性感、幸运、梦幻、时尚、创造性，是一种充满神秘的颜色。是小孩子和有创造力的人十分喜欢的颜色。紫色的光波最短，在自然界中较少见到，所以被引申为象征高贵的色彩。紫色的明度在所有有彩色的颜色中是最低的。与不同的颜色结合会展现出不同的风格特色。紫+粉常用于女性化的产品调性5 o Y r , =，黄色是紫色的对比色。

色彩对用户体验的影响

当我们讨论色彩的时候，聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的B r a j c选择，但是实际上，色彩对于用户的心理和行为的影响相对更深，最终s d g m G z 8会反映在用户体验和行为反馈上。

当然，色彩理论是一个相对复杂{ = X的主题。从用户体B . w 7 7 Z验的角度上来说，色彩所涉及到的远; t v不是配色方案这一个维度。~ L k [通常，我们聊得最多的是不同色彩所产生的心理效应，以及多色彩搭配时，相互之间的影响和可访问性上的问题。设计师可以将色彩更好地运用到设计中，而无需重 x 新考虑整个过程。一旦设计师掌握了基础知识，色彩理论中最有意义的部分之一就. Q 3是学习将更多意想不到的色t X 6 D – b e . L彩融入他们的设计中。

1. 色彩心理学和用户体验紧密关联

界面颜色的情感影响不容忽视。尽管有些颜色在 Ui 设计P D 3中是“通用的”（例如，黑色，白色和灰色，实际上几乎所有+ 3 4 t ! ` W w好的设计中都使用了其中的至少一种），但它们j $ U 1 z j P结合使用的颜色可能会对体验设计产生巨大影响。当然，颜色的使用方式也会对颜色的感知产d F 4 p i ( ^ r生巨大影响。以蓝色为例，在简约的q O ,布局当中，大面积使用蓝色作为主色调，和在大面积白底上使用很小的一抹蓝色用来强调 CTA 按钮，所带来体验是截然不同的。

尊重文化差异

人类对于色彩都u C Z = s z +有着共通的认知，但不同国家对于色彩赋予了不同的含义。红色在中国象征着喜庆、财富和爱情，而在西方国家被赋予了( Z N G e Z流血、牺牲、暴力和激进的文化意义，贬义的味道更重一些。而白色与红色相反，M f x x白色在中国代表了死亡、反动和投降，以白色为主的设计常常会被视之为过于「素」，认为不够吉利。而西方国家却认为白色高雅、纯洁和幸运，因此要根据不同的文化背景，使用不同的色彩，才能更好地降低被误解的风险。

另外一方面，随着现代主义运动的普及，白色也拥有了更加现代的特征。在日本，白色甚至和当地文化结合，延伸出更加细腻独特r ? 6 H S u } = R的精神特质，随着日本战后设计领域的发展和崛起，白色在这一地区的含义则更加R w S & ] ? ] ? A丰厚。原研哉在《白》一书当中，针对白色的含义和特征进行r G N : x了非常深入的探讨，之后的《Subtle》一书当中，+ k E { Z ~ 9虽是围绕纸来探讨微妙的体U . U k验，但是也没少提及白色本身的特征。

例如股票交易市场，在国际股票市场通常是绿涨红跌$ o a f h 4 j Q，这是因为红色在西方国家代表着财政赤字，绿色代表着财富；而在中国正好相反是红涨绿跌，这是因为在中国红色象征着财富。

设计师必须根据产品的目标受众来审视其调色板的文化含义，这一点很重要。如果产品要面J t ~ + 1 =向全球受众，请确保在使用的颜色和图像之间取得平衡，以防止负面的文化内涵。如果产品主要只针对特定文化，则设计师可以不用太关心所选F G 1 I 9 n W – %调色板在其他文化中可能产生的影响。

历史W u t Q p %对配色的影响

时间变化对于配色所带来的B M 9 h 8 t I影i j ` c | b y响不仅仅如此。比如中日两国在色彩使用上，还存在一个非常典型的差异，历史上日本在一个很长的L = f周期内是作为中国的属国所存在的，这也使得中国自古以来崇尚饱和度较高的正色，而日本U * G a P则大多使用饱和度偏低的间色，T ~ z ~ 3 c这一特征可以从两国的传统色上体现出来：

△ 中国传统色：https://color.uisdc.com/

△日本传统色：https://color.uisH Y N q % d 7 9 %dc.com/jp.html

性别误区

或许天生如此，女性不喜欢灰色、棕色和橙色。她们钟v E $ 3 & l b爱蓝色、紫色和绿色。而男+ c Y & – v $ &性不喜欢紫色、棕色和橙色。男性喜欢蓝色、绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩，想象下你把运动类应用的界面使用女性色彩n V L X P . g O，结果可想而知。

△男女最喜欢的颜色

△男女最不喜欢的颜色

3. 针对色盲用户群体的设计

你有没有想过你的 APP 使用6 j 6 } ; . E } ;人群中会有视力障碍者？

当人们谈论色盲时，他们通常指的是不能感知某些色彩。 大约 8％的男性和 0.5％的女性患有不同程度的色盲——他们在识别部分或者全部颜色时有困难。面对如此庞大的特殊受众，设计师理应关注他们的需求。

△ 正常人和红绿色盲看到的相同色彩

因为色盲有多重表现形式，例如红绿色盲，蓝黄色f i T S盲和单色色盲。所以运用多样的视觉线索来连接你 APP 的重要状态是很重要的。绝J S ] ]不要仅仅依靠色彩F c X来表示系统状态。 相反，应使用元素（如笔画，指示符，图案，纹理或文本）来描述操作和内容。需要注意的就是不要简单认为色盲就是简单的分不清红绿，色盲用户对色彩的感受差异不仅仅是单独某种的问题，是某些范围色光的敏感程度– ! c问题。

有趣的事实：Faceb) 8 I k Oook 的标志和不怎么讨喜的蓝色配色是特意挑选的。因为 FB 创z T O R 5 } ! 9始人马克扎克伯格是红绿色盲，他对蓝色的识别是最好的。他曾说过，“蓝色是我生c F l J (命中最丰富的颜色，我几乎可以看见这世上所有的蓝色。”

△ facebook

Photoshon ) ^ = } ( S $p 有非常实用的工具来帮助模拟色盲，在「视图」的「校样设置」菜单内选中就可以使用了。这个功) n e x h能让设计师可以看到在色盲用户的眼中你的界面是什么样子的。

△ pinterest登陆页红绿色盲视图

下面以点状图信息图形为例，来说明如何为色盲用户优化信息图：

优化采用了这样一些手段：1.调整配色，将色盲人士容| Z x S S } z I易混淆的红、绿、橙色换为红、蓝、黄色。2.调整明度，使图中几个颜色在明度上差异更明显。3.为不同元素赋予不同形状。所有使用点元素的信息图，都可以 j : K j I C参考这种解决方式。

在实际设计过程中，我们需要在美观和1 & ^ 2 (友好K n n Q V h 0 h之间进行权衡。我们也可以采用一些交互手段，避免同一界面中元素太多太过杂乱的问题。P ) b f

4. 流行趋势对色彩的q K –影响

这i I L是更长维度上的变化，在短时间以内，流行色的趋l R ~ y . r U势变化，对 c Z ^ G于用色也同样存在影响。这种影响在时尚行业有着非常直接的体现，而在I O Z E c R网页和 UI 设计行业，同s P : S ^ l D 1样存在。比如 2020 年的n N C T e 7 ? a潘通年度流行色是「经典蓝」（Classic Blue），也就明白了为什么 iph? t } oone12 今年的主打色是蓝色了。

所以，当你在设计的时候，如果你的目标用户群体有着z : b清晰W * B ! F c A的地域或者性别偏向，你可以有目的地利用这些知识来规避设计陷阱，更好地发挥色彩本身; _ u w e 0 ] M的功能和优势。如果受众广泛，则可以尽量使用通用性更强的色彩来进行设计。

• 知识点：

你知道世界上最受欢迎的颜色是什么吗？

是否存在一种色彩，是不分性别文化，大家都会喜欢的呢？确实有人通过大规模的调研和探索找到了一种世界上最受欢迎的色彩：马尔斯绿（Marrs Green）。来自全世界 100 多个国家 3 万多人响应号召H ` I @ U f i ) 9完成了这项投w h Z S 4票，并且最终选取出来的一款绿色。

色彩在UI设计中的应用

1. 色e n z &彩的应用

人脑对于色彩的记忆度要高于形态，即一个 App 给用户留下深刻印象的往往是界面的色彩。例如说到支付宝，我们可能想不起它的首页长什么样子，标签栏图标是那些，但能马G N c g上记起它的界面主色是蓝色。因此运用好色彩对 UI 设计十分重要，它能直观的呈现产品的气质和性格，能有效的帮助用户组织和阅读信息，与界面设计产生联系和记忆。好的配色往往依靠设计师审美、感觉搭配出来，但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑，下面结合相关案例6 ] # Q 4 T m D为大家讲解色彩运用的几个技巧。

不得x ? s O触碰的禁区

分析研究了X 0 ? t很多优秀设计作品，发现他们在用f ` e ~ ; 1 { v色的时候有一部分区域是不会使用的，也就是我们常说的“配色禁区”。当然，这里的“禁区”是带[ Z : m双引号带的，并没有什么绝对的禁区，只是说这些颜色不易控制，在连基础色都没有驾驭好之前，尽量少碰。

配色禁区大概分为这三种：三角形禁区、矩形禁区、扇形禁区（红色A d Z S D W w I v为禁区），如下图：

综合看来，不管是那种禁区，右下角区域的颜色是很少用的。毕竟他们又脏又y V % L y E深，当然什么@ 2 n颜色都能驾驭的大师请略过。

• 知识点：

在界面设计中，一般主色和辅助色都集中在右上角，次要的和不可点的颜色都集中在中上方，而文字信息和背景色则集中在左侧，右下角禁区是我们要重点避开的对象。

色调一致

在 App 设计之前应先确定界面的主色调，主色! : e o }将占据界面中很大的比例，通常是品牌色，而辅助色、点缀色、背景色等都应以主色调为基准来V J b 6 y搭配，a t 8 5 + N Q这样才能保证X I F l a 7 B Apu , Y z 0 Sp 整体色调的一致。色调一致的界面，能带给用户始终如一的视觉体验。例如马蜂窝将黄色（z i ~ *品牌色）作为主色，以及从主色搭配出的蓝色（对比色）贯穿 App 始终。

60-30-10 原则

60% 30% 10%的原则，是达到色彩平衡的最k O .佳比例。在 60%的空间使用主色，可以运用到导航栏、按钮、图q d Q * 7 2 ! 7 J标等关键的元素中，使之成为整个 App 的视觉焦点和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下 10%的空间为点缀色，可以用在一些不太重要的元素又L a ! g i . O F需要区分的时候。6:3:1 原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。

哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上，蓝色的辅助色用在角标、图标上，还有黄色、红色用在一些小图标、小标签上，主次& & P ]非常N # e # o _ * I T清晰明了。

色不过三

经常很多大神在网上说配色不要超过三种色，其实就是「色不过三」原则，即在一个页面中不要使用超过 3 种颜色搭配，这也和上面说的“60-30-10 原则”类似，即一个主色、一个辅助色和一个点缀色。但在实际 UI 设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不可超过 7 种色相（注意不是 7 种色值），每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。

美团外卖的首页 20 个功能入口大图标的背景用了 9 种不同的色彩，每种色彩又包含一种低饱和度色彩进行彩色渐变，但并没有显得杂I c e c k ) 5乱，而是呈现一种年轻时尚的律动感。这是因为这里虽然使用了 9 种不同的色彩，但# 0 + w 2 L仔细观察发现只使用了 3 种色彩，其他 6 种则是从前者邻近色中提取出来的搭配，再将它们错落放置，呈现出丰富多彩的色彩搭^ = q L 0配，整体和谐统一~ H 0 o 9 8 c。y I J ) S e { 5

远离纯黑色和纯灰色

黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色，是因为它们不存在于现实世界里。尝试在纯黑和纯灰中加入一些色调，会让界面看上去更柔和自然。另外，纯黑色还会与白色产生强烈的对比度，看久了会使人疲劳，让用户产生焦虑的情绪。MONO 的导航栏并n U d不是深黑色，而是加入了蓝色的低饱和度蓝黑i : m色，它的界面背景也是加入了蓝色的的浅色，这样就| , o C % n S r不会让界面看上去死气沉沉的。

遵循色彩心理学

前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行 App 设计时提供依据。这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的草地、黄色的沙漠等等，自然的q a ;色彩，对于我们来说是司空见惯的，但其中却蕴含着丰富的美感，并达到l X { 3 q 1了和谐统一。网易云音乐使用红色作为主色，这种热情奔放6 I c H J的颜色传递A K H s v z Y q Z出一种充满能量、自信的气质。

良好的可读性

良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验，而一个可读性差的界面则会成为用户浏览的障碍。那如何确保界面具有良好的可读7 y l q h ` `性呢？这就需要在界面设计中注意色彩搭配的对比，如在浅色背景上使用深色文t E b & T # K X字，在深色背景上使用浅色文字，使用高对比的度的亮色展示重要的元素，用低对比度的浅色来体现需要弱化和} T 2 0次要的内容。例如苹果 Music 的主要功能入口，标o _ c签栏图标、按钮等都是用了高纯{ z D O ] 4 Z T w度的红色，与其他元素形成鲜明对比，就连深灰色的辅助文= g d字都有着清晰的可读性。

从大自然中获得灵感

配色中尽量使用大众熟悉的色彩，如自g 4 h l + l r h然界中人们常见的色彩等。从大自然中获取的配色灵感可以使你的设计更加切合用户的审美，非常X U S自然。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。我们可以搜集各种与自然风光相L $ R { L P 9关的图片，从中提取色彩运用到设计中，这些几近完美的搭n # K j u ] m配呈现出来的和谐美感能瞬间打动人心。天气应用 Marline 就是一个很好的例子，它的界面背景渐变就参考大自然的变化，随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐& % K O & a变色，打开应用即唤起了用户的快乐情绪。

将 UX 颜色与品牌相匹配

品牌价值在创建调色板中发挥关键作用，但是它们不是唯一重要的因素，行业规范也是关键。使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。配色在品牌视觉中r Z x所发挥的作用是不言而喻的，但是，色彩本身P S w { x P H的内涵和情绪特质并不是全部。比如一个行业当中，很多产品/ r : + 0 都使用了蓝色，那么你的产品继续使用蓝色，可以让用户更快x i a n # d「识别出」你所属的领域，但是本身也存在让人混淆的风险。如果你想要在视觉/ .上脱颖而出，可Z J Q * t以试着使用不{ j H { ( G h D A同的色彩。

△中国区或8 + s y x * I ; @美国区，红色和蓝色都是最流行( / 2 ` p W的颜色。

在进行品牌设计的时候，选择配色的第一步，始终是了解各种颜色或者色相的气质和情感属性。然后，在具体设计的时候，再进一步根据品牌的气质和需v n g求，再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。

从强调色入手

想要让配色方案更加突出，在设计中添加强调色可能是最容易入手的地方。举个例子，一个律师咨询的 App 可能会使用传统的蓝色作为基础配色，但是，如果能够加入柠檬绿作为强调色，会显得独特很多。

冷暖色对比搭配

冷暖对比色是自然平衡的规律，可以在设计中大量使用，这样的配色会使作品非常的出彩，同时不显单调，让用户感觉舒服平和。而且这种搭配方法基本没有啥缺点，使用在设计中，技巧性1 0 ! l $比较多，对设计的细腻a 2 [感受要求比较高，需要多练习。

黑白色搭配5 { j = K z _ H q不过时

黑色是所有中性色中最强的，而K t i b 3白色是最常用的背景颜色。黑色是一个很好的选择，有种高端和永恒? A ~ D v X . 7的感觉，而白色可以带给用户自由，宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。

强交互色彩

交互色彩在执行过程中必须清晰且在界面中保持一致。号召性用语必须相对于背景具有足够的对比度，并且相对于其他组S T i G t G 1件必须具有足够的视觉权重，以便用户可以轻松识别它X U I 7们。Nike 健身应用中，「开& o 1 I Q R 9 l始」按钮以高饱和度的柠檬绿作为主色，从背景中脱引而出。

但是，交互色彩并不总是以最具饱和度5 4 U R l k (或最亮为特征，而是通过色调、形状、大小或T m 8 S 对比度，从屏幕上脱颖而出。因X x P e T :此，交互色彩的有效性$ % : U G将基于用户识别交互区域和执D q (行任务的速度来衡量。同时，次要功能权重要更轻，^ ^ % D Z并在视觉上更接近信息元素。如上图 Nike Training 界面中，“设置”和“声音”按钮只用简单的白色，减轻, z =对主按钮的干扰，也避免了页面中出现多个强交互按钮。

保证良好的可读性

可读性是任何设计中的Y ( 8重要因素。你的颜色应该清晰易读，尤其是在处理文字时。因此对比度对视觉效果的影响就非常关键，对比度过小，就会使得界面出现灰蒙蒙的效果。清晰的对比度T ` 0 N q e，一般会采用色彩的两极，黑纸白字或白纸黑字。而在彩色背景上要让内容清晰可见，就需要搭配纯白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互补色和明度接近的文字，因为这两种搭配会产生一种“震颤效应”，发出光晕的视觉效果。

UIg ^ V 3 1 中的阴影

没有完全纯黑的阴影，阴影的颜色是会受到物体本身a K = 9 2 T固有色的影响，一定要避免使用纯黑色（#000000），使用不太深的灰色，B O ) q Y效果会更好。对于有颜色的元素，好的做法是= = e 2 b T u !为阴影设定与元素相同的颜色，并使其更暗一些。

如果是有颜色的元素，并且它处在黑暗的背景下，一般情况下，是不建议使用阴影的。{ 7 @ y a但是& % b ; X t L t如果你一定要用，把阴影透明度调到小于 10%及以下，并且颜色跟随主色调来。比如按钮为绿色，则可以为按钮设定一个更深的绿色阴影3 G 7 c y z % s，并加上小于 10%的透明度数值。如下图，左侧的按钮阴影很自然，右侧的则有一层模糊发光的效果，显得不[ y _ @ e L = V J够漂亮。

• 知识点：

为什么「超链接文字」要用蓝2 E a b x色？

简单说，因y # n j d V t为在最早期的网站页面中，X R V l ` ~ L r c蓝色能呈现最高的对比度。

Tim Berner J 1 J S ps-Lee——web 的主要开创s ] j g [ . B F者，被认为是最早用蓝色链接的人。

一个很# r G r P # t早期的 web 浏览器 Mosaic，用的是深灰色背景和黑色文字。那时候，能用的非黑色、最深的文字颜色，就是蓝色。所以，让超链接文字突出显示，同时保证可读性，就选定了蓝色。此后超链接文字都用蓝色的传统沿用至今。

2. App 设计中的色彩搭配

App 的! 3 g x f L色彩搭配能直观、快速的反馈到b x 用户的大脑中形成记忆思维。好的色彩搭配可以加深用户对产品的印象；明确界面的视觉层次，让用户分清主次信息；4 . 6 ; F [ c B B同时还能给用户赏心悦目f s C ( ^ p Y的视觉享受。那么，在 UI 设计时该如何进行色彩搭配呢？我们可以从 App 中都包含了那些色彩开始，通常一个 App 中包含了主色、辅助色、点缀* k U色、背景色这 4@ J 0 1 u 类，下面就以微信读书为例进行详细的讲解（个人角度）。

主色

主色是指在配色中处于主导地位的色彩，给用户的第一眼印% 1 d象，通常是产品的品牌色。在 App 设计中，主色一般占有色相色彩的 60%的比例。这里指的是 60%的界面都使用到的主色比例，而不是使用面积（因为通常一个界面_ N # 9 t w J 中使用面积最大的是背景色）。还有就是背景色多为浅灰色或白色，它们都属于无色相色彩，因此不涉及到配色过程中。我们看到微信读书的第一印象，就可以判断它的主色为蓝色，这也是它的品牌色。在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色，使界面看上8 = r去非常和谐一致。

辅助色

辅助色与主色相辅相成，辅助色的功能是帮助主色建立更完整的形象，使界面丰富精彩起来，避免画面过于单一。通常，主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则就| y c 2会使界面看上去花哨分散了主题。根据 6:3:1 原则，辅助色可以占有色相色彩的 30%或更少为宜。

在微信读书中，绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色，它们都是辅助色，主要用于功能图标和栏目分类上。虽然辅助色看起来有点多，但其实都是从主色的邻近色和对比色（及其邻近色）中提取出来的搭配，而且只用在页面中很少I @ C Z C f的地方，这种搭配* l ^ ^ m L ~技巧既可以丰富色彩的搭配，传递出年轻活跃的[ q ~ ? @ ) 1产品气质，又– % X 5 C保证了整体搭配的和谐统一。

点缀色

点缀色是除了主色和辅助色以外的另一种色彩，通常体现在细节上` d 6 j N B @。其作用是，当页面中主色和辅助色不能满足关键信息的提示时，就需要点缀色来吸引用户眼球，还有就是利用点缀色来平衡画面的冷暖色调。点缀色通常都是分散的，使用面积小，颜色非常显眼，能与主色形成强烈的对比。一般点缀色是主色的互补色。在微信读书中，使用了香槟金、梅红和红色作为点缀色。香槟金用在文章分享按钮上，梅红色用在点赞图标上，强调其特殊性，红色用在通知及退出登录提醒上，用于警示。

来康康这三种点缀色与主色之间存在什么样的关系，在色相（H）上，3 种点缀色为邻近色，与主色为互补色；在明度（B）上，3 种点缀色均& % [ g ]为高明度色彩，起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用p v h – H d #户注意力。

背景色

背景色就比较好理解了，通常为了衬托内容，大多数 App 都是用浅灰色作为背景色，以白色作为背景色的对比色，来区分视觉层次) F , K , H ~ f h。建议是K z { N W :可以根据前景色来提取背景色，将其调亮或变暗，这样可以让界面色调更加统一。P ) : t在微信读= ; 8 x书中背景色是偏蓝色调的浅灰色，而不是纯灰色，背景对比色是在白色里加f B r入了蓝色色相，而不是纯白色，整: _ h t体对比较柔和，给人清爽通透的感觉。

• 知识点：

支付宝 Alipay Design 团队提出过一个配色原则：

以同色系, l K M配色为主导，多色搭配为辅。z Z q X F | 0 3

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为j @ ? D } C P T辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务N H + % $属性和情感表达；再搭配中性色黑白灰，L & g 9 w u * . #赋予更多的变化和层次。两种配色通过主次、使用比例~ T Z 0 e = : l C，可灵活运用在业务的各个场景中，具有非常好的延展性。

3. 迷人的渐变色

不同于单一色彩，渐变色不属于任何色彩，它营造出千变万化的L Z K Y b n 2 r视觉效果，却又不会增加视觉负担。相较于单一的色彩，渐变色的复合性质让它在界面设计中具有更强的视觉冲击力，有助于快速抢占视线。如今，这种独一% g o无二的色彩正逐渐成为一种, t G $ r ^ m潮流，究9 # ~ ( N P g q }其原因是目前大量的扁平风格造成 UI 设计的严重同质化，人们需要追求更加u i d V ;个性的视觉语言来满足日益增长的设计需求。下面我们来了解几种常见的渐变的使用技巧。

色相、饱和度、明度的渐变

色相（H）渐变是指由一种色彩向另一种色彩的过^ K K B @渡，这种渐变因跨度大产生的视觉效果非常明显；饱和度（Sz I 0 F 9 A P Z）渐变是指同一种色彩不同纯度的过度，其产生的8 ^ @ 2 ]视觉效果比较和谐单调；明度（B）渐变是同一种色彩不同明暗的过度，这种渐变p E 9 g的视觉效果给人一种沉静的氛围。

渐变的表现形式

在界面设计中经常看多各种各样的渐变表现方式，使用最多的有以下几种：

• 水平渐变

这个很好理解，是指角度为 0 的线性渐变，是最流行的渐变X | 7 – ; : + , D形式。界面设计中多用在导航栏、进度条、按钮等元素上，能让画面变得精致而通透。例如京东使用橙红渐变的设计语言贯穿整个 App，从应用图标到导航栏、按钮、标签，全部都运用了这种由红色到橙色的过渡。仔细观察发现在很多小标签上都使用了水* u % ( | 1平渐变设计手法，使产品看起来更年轻化。

• 知识点：

在水平渐变中，通常把轻（亮）的色彩放在左边，重（暗）的色彩放在右边，这样由左向右的方向感刚好与人的浏览习惯保持一致。而反过来就会与k b p v $ @ v H人的浏览视线相悖，应避免。

垂直渐变

即角度为 90的线性渐变，它通常被用在正方形或竖= i P Y r q o e I条形的元素上，如注册登陆页，个人中心头部等。垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果，上浅下深会让给人一种凸起的立体感，而上深下浅` s P X会给人一种凹陷下去的空间感。例如「g + 9 B纪– ) ! ^ O Y P z念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景，在让整个画面丰富的同时又不会太抢夺主体的色彩，使画面显得清新透气而不沉闷。

角度渐变

角度渐变通常有对角渐变和多角度渐变i W { d : y P &。有角度的渐变相比水平和垂直渐变，它的T f –使用场景更广，如图标背板、启动页、注册登录页、标签等。想让z d A X S q `界面更加绚丽、动感和迷人，这时候我们可以考虑多组渐变搭配使用。

色块渐变

渐C X F #变的颜色不只可以运用在一个色块上，还可以运用在一组色块上。设计师运用一组近似性色彩，将每个菜单项清晰区分开，让界面平衡在一个频率上，: 6 G [ Z这样的画面更q 2 F i * 7 s有节奏感和舒适性。不同于平滑的渐变，色块渐变不再是单纯的背景装饰，在某些地方还具有一定的功能性，比如使用不同的色块来分割的列表样式。Clear Todos 是一款日常任务清单的 APP，它抛弃了传` H 6统的列表样式，使用N C 1了一系列色块来作为列表的分割，非常漂亮和精致。

径向渐变

是指色彩以圆心向四周扩散的渐变，是一种模拟光源照射的视觉效果，因此光源是整个画面的视觉焦点，将关键元素放在光源中心就会成为主角。通常被运用到大背景上，如| 5 M D Y s h启动页、引导页等D : | r Z $ U m。Solar 天气应用的背景就是径向渐变，光源扩散的效果营造出一种梦幻般的美感。

和谐的渐变色

渐变色是由一个色彩走向另一个色彩的过程b 8 9 r & ( i，有着迷人的视觉效果。如果你仔细观察两种色彩的过q { 3 z Q ? V I %渡关系，就会发现不是每次都会得到满意的效果，例如红绿渐变就很糟糕，因为它们两者是互为对立的色彩，C + v { g 7但是如果加入黄色的过渡色就会好很多。原因是当两种色彩之间超过 90 度就会导致其渐变色看上去不太和谐自然，只有控制在 90 度之内才会产生美妙的变化。如何改善超过 90 度的两种色相的渐变呢？这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时，就可以加入紫色作为过渡才能呈现完美的视觉效果。o 1 % 5 f

• 知识点：

在搭配渐变色时，尽量只改变其色相（H）、饱和度（S）、明度（B）中的一项，这样才能创造出和谐的渐变色方案。

创建P l Y U o调色板及配色工具

调色板帮助我们在设计项目中建g } B H 9 & F x V立色彩规范、提高W ~ = 6 $工作效率。通过上文对色彩基础知识的学习，接下来为大家介绍几种简单易用的创建调色板的小技巧，以及 Materia design 配色方法和配色网站推荐。

1. 从设计作品@ r z W A c收集色彩

打开 dribbble，每一幅作品预览页左下角都有一份自动生9 S e ? $ J W成的配色板，很多同学可能不知道这个配色文件是可以下载的。将调色板保存到本地，为自己在创作时提供灵感。在 ps 里的操作步骤是：点击“窗口—色板”，然后在色板的属性面板右上角打开“导入色板”，载入刚下载的色彩文件L T S X g Z即可。

它也有颜色搜索工具，输入或选择颜色值即可搜索相关配色的设计作品。

2. 从图片取色

这种方法也很常用，不需要任何插a i N a 4 ? L a件，丢一张图片到 Ps，然后将c s /图片「马赛克」处理下就可得到一组配& ? i L ] T U P色。例如，我们需要一组同色系的绿色，在网上（建议 unsplash 或 500px 等专业图片网站）找一张树叶的图片，接着将| E . E u V (图片在 Ps 中打开，进入“滤镜—像素化—马赛克”，在打开的窗口里调节单元格大小即可。

同时，建议平时多去收集好看的摄影图片和优秀的配色方案，看的多了就知道什么是好的g | J L Q b { ]什么是 Low 的配色，对提升审美也有很大帮助。

△ pinterest画板

3. 自定义色块叠加

该方法稍微复杂一点，示例步骤如下：第一步绘制一个正方形做底板，填充一个颜色#5354F0；第二步分别在正方j k v 9形的上和下 1/3 处叠加 20%的白色和黑色；第三步分别在正方形中和右 1/3 处叠加 40%、80%的紫红色#DF56FA；最后改变紫红色图层的g N J混合模式为叠加即可得到一组蓝紫色色调的调色板。

4. 色彩系统

MaterC : E Y _ & aia design 调色板

Materia design 从生s x ] 4 _活场景中提炼出 19 个充满活力的色彩，旨在和谐地协同工作，可用于开发品牌调色板d w : 8 H [ q。Materia design 提供了一整套调色板，从原色开始，延伸出其他许多色彩，这些色彩和谐相处，可用于产品设计的品牌色。基础色的饱和度是 500，Google 建议以此作为产品应用的主色调，可以再选择一种辅助色，并在主色的基础上进行饱和度_ a / @，明度变化，构成一套配色方案。

如果上面的色板不能满足你的需求，你可以选择一个主色，Materia design 调色板生成工具会为你生成完整的色板。

主色和强调色

在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，建议选择饱和度为O Z H X j Y T f 500 的基础色作为主色，根据设计需要在主色的基础上增加 1～3 种不同饱和度、明度的色彩建立层次感，再选择一种强调色突出重要内容或0 o w操作，例如 FAB 的背景色。

深/浅背景上的文字~ : S 1 L

Materia design 通过文本的不透明度建立在不同背景上的深浅对比，对于浅色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38M t O O l Z + 8%；而E c u O黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割线不透明度 12%。Ant Design 也定义了一套用于界面文字、背景、分割线的中性色，在落地的时候同样也是按照透明度的方式实现的。

背景

为了提高应用之间的一致性和阅读的可读性，背景色根据设计需要选择纯白色或饱和度依次为 50、100、300 的灰色。w x C ?

5. 配色工具推荐

颜色是一个很难掌握的概念-因为有无限多种可能的颜1 / =色组合，对于很多设计师来说还x P B i {是一件蛮困难的事，为了让设计配色变得容易些，下面推荐几个常用的配色网站，希望能帮助大家在日常工作中节省更多的时间。

Adobe Color

Adobe Color 是一个基于网络的应用程序和创意社区i v b，提供免费的色彩主题，并且在 Adobe 相应的软件中也提供了扩展程序，比如我们常用的 Photoshop 和 Illustra[ 8 , 2 Mtor。

△ https://color.adobe.com/

Adobe Color 通过拖拽色轮或输入自定义色值= T ? @ u L {，可以创造出基于相似、互补、三原色、正方形等不同色彩规则的配色方案。除此之外，还支l X v x持 CMYK、RGB、HSV 多种色彩模式的配色调整。用法很简单$ & o R $ c，点击颜色块上的小三角确定基础色 ^ , Q，就会自动生成 5 个基于你所选色彩规则的配色& e j &方案，拖动下方的颜色条时相应的也会改变配D E , o +色方案。如i 0 z u %果没有灵感可以通过顶部导航进入“探索”页，这里为我们提供了很多提b k g K w ? e ^ q取好的颜色和图片[ K g _ E，有的是摄影作品，有的是设计作品，上方的轮播图提供的一些其他内容，比如潘通流行色、. I p j 2 N mAdobe 社区和手机端的 APP 等等，非常的实用。

Eva Design System

Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。

△ htZ ] 6 % Itps://colors.eva.desc ) w L ? (ign/

Colorhunt

Color Hunt 是由设计师 Gal Shir 创建的开放调色板集合，每天更新丰富的配色方案。颜色卡片下方可以看到更新的时间和喜欢人数。鼠标悬浮在任一色块上显示颜色值，点击颜色卡进入详情页可下载l U M + U和分享，惊喜的是还可以添加到 chrome 浏览器，方便随时e { + q ]随地使用。

△ https://colorhunt.co/

Grabient

Grabient 是一个非常漂亮且实用的渐变配色网站，支持 CSS 样式代码复制、360 度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色n r / S m G块下方自由添加和调整渐变的色系、以及线性渐变方向。

△ https://www.grz h P N ; 2 g }abient.com/

当然，以上这些配色工具只是为我们提供方便的，而不是主导我们的，所以在使用配色工具的时候最好是要有一定的理论基础– f e y {作为支撑，让你的配色有理有据，切忌生搬硬套。

• 知识点：

对于新手设计师来说，颜色越少越容易把控画面。色彩层级越精简，就越容易达w M p r h u到整体色彩平衡，X Z L s掌握好色彩的功能划分必然会让你的配色过程保持思路清晰从而提高效率t $ e A M T g。

同时，不管是 2C 还是 2B，很多大公司都构建了自己的设计系统。如果你想学习别人是如何进行配色布局的，最快的方式就是l G # l研究他们的设计源文件。

6. 关于色彩空间配置(附加内容)

建议设计软件使用 sRGB 作为色彩空间的默认配置，而不要采用未管理（ Sketch 中默认是未管理），若团队协作请提前保持色彩空间配置的统一性。如果有需要针对广色域色彩空间做项目，可以单独设o H 5 { U R置该项目文档的色彩空间为 Display P3 或者 Adobek Y h RGB。

Mac 系统色彩空间配置

建议所有 macOS 用户都在系统偏好设定的显示器颜色设定当中换用 sRGB IEC61966-2.1 这个校色方案，可以极大改善系~ M 3统显示效能。如果有外接显示器，也建议使用外接的默认选项，默认选项一般可以发挥出该显示器的最大色彩性能。

Sketch 色彩空间配置

Sketci M d bh 默认颜色配置是 UnmanO & baged「非托管」， 我们可以在「偏好设置」中为 Sketch 指定默认的! I v Q 8 N色彩空间配置，如此一来每次新建设计 ] y w ! ? & u文档将会默认采用我们的设置作为默认的色彩空间，不用每次新建文档都单独设置一次。

设置方法：Sketch → 偏好设置(Preferences) → 通用(General) q 6 → 颜色描述文件(Color Profile)，修改下拉框选择器的内` , ! K E L B p容为 sRGB IEC61996-2.1。（其他设计软件设置方法类似）

如果要更改已有的文档为 sRGB 色彩配置，可以通过文件——更改颜色配置，在弹出的; % N + ! 5 o对话窗里对文件进行色彩空间的更改即可。

写在最后

其实无论是色彩理论还是配色方法，最本质的东西就那些，更多E = $ m = 3 N G |的还是需要设计师在日后的工作中不断的摸索和积累。这篇文章全部写下来耗费了不少时间（小声 BB：其s ` N 4实每篇都是），抱歉内容确实有i S 6点多U f o v u，但其实已经是= . { p Y n收着点写了。就像大树一样，有很多分枝不断生长，需要% o ^ 4 X p z C了解很多细分出来的深度知识。这也是写这类文章的乐趣，通过不断的查阅资料，把过去很多模糊的概念摸清楚了。果b p ] f O # j j 6然学透一个知识点的最好方式就是把它讲出来才能真正为自己所有。关于色彩的知识先分享到这里，希望对大家有所帮助，文中有不严谨或错误的地方，欢迎大家指正，一起学习成长。

参考文献：

• 这些更细致的色彩知9 ] C识，能让你的设计体验更好` V – j X n p #
• 色生心中：人性化的 HSL 模型
• 面向色盲人士友好的设计G t E : ? | ~解决方案
• 《高级 U[ & S m n UI 设计师之路》
• Material Design 颜色系统

欢迎关注作者微信公众号：「印迹拾光」