设计基础--配色篇

最近在重新整理自己的UI设计知识，梳理了整个学习体系。这是平面设计里的第一部分，关于配色。文章是学习笔记，随性，从自己理解的角度分析编写，用词偏向于通俗易懂型。能用简单的话解释清楚为什么要把它复杂化呢？

em~先来点看起来专业的

1.色彩原理

三原色：红  绿  蓝 ， 这就是传说中的R（red） G（green） B（blue）。

注：“红黄蓝”是绘画的三原色，主要用于绘画，印刷，是表现在纸上的。 “红绿蓝”是光谱的三原色，主要用于电视、电脑等屏幕成像，是视觉的三原色。

色环

下面我们来看看色彩的三要素：色相（H）、饱和度（S）、明度（B）

视觉色彩三要素模型

色相（H）：就是颜色的名称，是颜色区分的主要依据，如色环图中的红色、橙色、黄色等。注意：淡黄色和黄色是同一色相，在色环图中，名称区域内的都是同一色相；黑白灰无色相，因此从这个角度来说黑白灰不是颜色。

饱和度（S）：就是颜色的鲜艳程度，即颜色的浓淡，例如：黄色、淡黄色。饱和度越大，颜色就越鲜艳。

明度（B）：就是颜色的明暗，也即深浅差别。例如：粉红、大红、深红。

这是PS颜色面板里的色彩三要素分布图

2.配色基础原则：不要超过三种色彩（这里指的是大范围大面积用色）

色环

1.单色调：同种颜色组合，不同明度或不同纯度变化的对比

2.近似色：相邻颜色 ，和谐，有关联

3.互补色：一条直线 ，对比强烈，强调色

4.分裂互补色：互补色的两边，如：蓝色跟红色或黄色就是分裂互补色，对比强烈 ，视觉冲击强

5.原色 间色：共性，和谐。切记使用该配色方案时不可大面积叠加使用，可小面积间隔开使用，如按钮。

3.颜色的味道

我们其实是根据生活中经常出现的事物而惯性去记忆每种颜色的，也会因为这种记忆让我们对颜色有一种味蕾。

4.颜色的气质

不同颜色适合于不同的场景氛围。

红色：热情洋溢、温暖、让人兴奋、激动、紧张，但看久了容易让人产生视觉疲劳。

黄色：活力四射、高傲、张扬，但看久了容易让人产生视觉疲劳。

蓝色：压抑、伤感、专业、科技感。

绿色：健康、生机勃勃、柔顺、平和。

紫色：沉闷、神秘、高贵优雅。

5.颜色的冷暖

颜色的冷暖色调

除了不同色相的冷暖不同外，同一色相也有相对色温，相对冷暖。单色系的相对冷暖一般是运用在场景笼罩着某个事物的身上的高光阴影和反光部分，塑造出物体的立体感。

6.我要的是什么颜色？

知道了上面这些，可是我还是不会配色啊，那我该怎么选择颜色呢？

当自己不清楚用什么颜色时，找找能承载你情感寄托的媒介物，如冬天你会想到梅花，夏天你会想到荷花；

可以通过关键字找到对应的照片，图片，服装，任何可能的东西，只要能表达出你想要的感受，都是可以模仿的对；

他们代替你说出了你想要的感觉，通过对这些媒介物的分析和提取，能找到对应的色彩。

7.用什么颜色来搭配？

引用第2点配色基础原则所述：

不要大范围为大面使用超过三种颜色。

1.单色调：同种颜色，不同明度或不同纯度变化的对比

2.近似色：相邻颜色 ，和谐，有关联

3.互补色：一条直线 ，对比强烈，强调色

4.分裂互补色：互补色的两边，如：蓝色跟红色或黄色就是分裂互补色，对比强烈 ，视觉冲击强

5.原色 间色：共性，和谐。切记使用该配色方案时不可大面积叠加使用，可小面积间隔开使用，如按钮。

8.颜色有了如何搭配？

例：一个活动页面中通常由以下元素组成（五角星代表重要性）

标题（★★★）

产品（★★★★）

副标题（★★）

活动详情（★）

背景图案

对第1重要的：用强烈色相对比（互补色或对比色）+强烈明暗的对比

对第2重要的：用稍弱的色相对比（相近色）+强烈明暗对比

对第3重要的：可以只用明暗对比且无色相差异的颜色

9.配色口诀：近实远虚

设计中的层级

设计跟绘画一样，必须遵循近实远虚的原则，也只有这样设计出来的作品才有层次。近处的渔船，艳丽的人物就是你要突出的东西，后面灰蒙蒙的山水就是你的背景。

成功的配色方案是理智与情感的结合

写了改改了又改，终于完成了第一稿，还有很多不完善的，后面根据经验总结再逐步完善吧~ 大家有什么不同的意见可以相互讨论一下，互相学习，共同进步啊！