颜色是视觉设计中十分重要的元素，好的配色不但能传递创作者想要表达的信息，也能让作品能和观众产生共鸣。

HSB色彩模式

H 代表Hue, 色相 S 代表 Saturation, 饱和度 B 代表Brightness, 明亮度。 色相指的是颜色本身，也就是我们知道的红，黄，蓝，绿等色彩， 饱和度指的是颜色的强度，饱和度越高，颜色越鲜艳，反之颜色会变得越淡。明亮度代表颜色的黑暗程度，当明亮度掉到最低时候，颜色就变成了黑色。

打开PS拾色器，你就会看到HSB模式的颜色色盘，

中间这个垂直的色彩，调整的是颜色的色相，而左侧的正方形，横向代表饱和度，纵坐标代表色彩明亮度。

许多其他图片编辑软件也是有色相饱和度明度调整工具，同样也是控制这三个滑竿控制色彩。

不同颜色在作品中占多少比例 —— 60：30：10

60-30-10原则广泛应用在各个设计领域，这个原则认为在一个空间中，主要色彩应该占6成比例，次要辅助色占3成，强调色占1成。如此就能在凸显主题的同时达到色彩平衡。

如何决定占主题色彩6成的主要色彩呢？

这个要取决于你要传达什么情绪和感受给你的观众，在我们的生活经验中，蓝色与天空和海洋色彩相似，所以蓝色通常认为可以带来给人放松和平静的感觉，而红色容易让人联想到火焰，所以红色通常象征热情和勇敢奔放。但同时也有警告和危险的意思。

当然我们也要注意颜色在不同文化中代表的角色，比方说红色在亚洲文化中也代表了祥和喜庆，是一个有悠久传统的吉祥色彩。

饱和度和明亮度的高低也会带给人不同的心理感受。颜色的饱和度和明亮度越高，所产生的情绪也越积极和强烈。而饱和度低，对比弱配色，会产生较柔和和平静的氛围。颜色饱和度降到最低，色彩强度为0，变成中性色时，颜色象征的情绪和意义会变成一种空间感，让观众专注其他视觉焦点。

如何利用身边素材来获得色彩灵感

第一是生活环境，无论是通过直接观察还是网络照片，自然和人文多彩多姿，总是给设计者提供源源不断的色彩灵感。

譬如在https://www.stocksy.com/color 这个网站中，你可以把色彩当成筛选条件，从众多摄影作品中寻找细心的颜色组合。或者在https://www.pinterest.com/ 这个设计师最知名的网站当中，搜索color palette或者特定颜色， 你可以查找到任何需要的颜色组合，生活中找到的配色范例。

如果你手上有现成的照片或者画作，想提取色盘，你可以去 adobe官方色彩网站： https://color.adobe.com/zh/create/image-gradient 这里上传你的图片，就可以做及时的色彩分析，并保存到个人设置当中。

占6成的主要颜色，决定因素是作品想要传达的情感，占3成的次要颜色如何选择，则是决定我们要使用的目的，是要创造氛围还是用颜色来引导观众的视线。无论是前者还是后者我们都可以用色彩学中广泛引用的色相环从主题色提取出我们需要的辅助色。

辅助色如何创造氛围

色轮配色网址：

https://color.adobe.com/zh/create/color-wheel

https://www.canva.com/colors/color-wheel/

氛围是来自一种创造沉浸式的感受。所以在使用色相环时，配色方式使用单色调。单色调模式中，所有颜色都隶属于同一个色相（也就是所有颜色），只有饱和度和明亮度的区别，因为可以产生一种简约的风格和一致性的美感。

比单色调更多一点颜色的方式叫做近似色。近似色就是色相环中位置相邻的色彩。近似色的配置在大自然中随处可见。而由于这些颜色色调相近，给人一种稳重安定的感受。

相对于安定的氛围，我们也可以反其道而行，使用三等分或者四等分的配色方式。这些方式所产生的色彩，由于色相差异大，可创造出一种缤纷与欢乐的氛围。通常用在卡通，玩具，游戏等以儿童为主体的产品。就常常以三等分的方式配色。

除了可以创造氛围，我们可以将辅助颜色当做引导观众视线的工具。用颜色吸引视线，需要颜色之间有足够的对比，这个对比可以来自于色相，也就是色彩理论中互补色的配色方式。这个对比不同于三分法，三分法虽然差异大，但是是为了创造缤纷的氛围。其中每个颜色的定位是平等的。不同于互补色，是为了创建视觉上的焦点。也就是用一个颜色来衬托出另一个色彩。

用明度和饱和度的对比也能在画面中达到区分主宾关系的效果。

60-30-10配色方案中最后的10%强调色通常饱和度较高，与辅助色和主要色形成强烈的视觉对比。强调色有时候要传达一种功能性，传递一种特定讯息，或者是暗示观众要付诸特别行动。因为颜色设计上，强调色会结合一些心理学理论，例如：绿色代表安全和成功，黄色代表要提高注意，红色代表警示和危险等。

如果设计元素中，有使用到文字，文字与背景对比一定要足够，文字可读性要高，才不会造成读者视觉疲劳。有需要的话你可以用PS将图像的颜色暂时去除，比方说ps中调整面板下选择创建新的黑白图层，这样来判断文字和背景是否有足够的明度差异。除此之外，你也可以去adobe 颜色网站上，分别输入相应颜色，来查看对比。

总结