电商配色技巧「配色设计原理」

今天给大家普及一下电商配色技巧「配色设计原理」相关知识，最近很多在问电商配色技巧「配色设计原理」，希望能帮助到您。

目录1.2. 电商设计配色原理11.2.1.电商色彩三大要素11.2.2.电商色彩对比关系61.2.3.色彩的视觉原理11色彩适应（补偿）11视觉错视111.2.4.电商色彩的情感14色彩的直接心理效应14色彩的间接心理效应14色彩的情感15色彩的表现23

1.2. 电商设计配色原理1.2.1.电商色彩三大要素

色彩面貌上千变万化，但是仔细观察会发现他们之间的主要区别可以归纳三个：色相、明度、纯度。

1、 色相

色相指人们对光谱中某一特定波长的命名，是色彩的首要特征，也是区别各种不同色彩的最准确标准。如黄色、绿色、蓝色等。色相是色彩的灵魂，是色彩的直接代表。在日常生活中，人们有时会忽视色彩的明度与纯度等要素，对色彩最为直接的印象就是色彩的色相表现（图2-1、图2-2）。色彩学专家

图2-1

图2-2

三原色由三种基本原色构成。原色是指不能透过其他颜色的混合调配而得出的"基本色"。

这里我们重点说的是色光,色光混合三原色即：红、绿、蓝（图2-3）。将它们全部混合会产生白色光，人类的眼睛能够敏锐地感受这三种颜色。色光主要应用在电脑手机等电子端的产品上，也是电商的终端载体。要注意的是色料的三原色是红、黄、蓝（图2-4）。由两种混合得到间色，在色相环中间色位于两原色的中间。在色相环中处于相对位置的两个颜色称为补色，其在色彩应用中占据重要的地位图（图2-5）。

图2-3

图-2-4

图2-5

2、 明度

明度是眼睛对光源和物体表面的明暗程度的感觉，主要是由光线强弱决定的一种视觉经验。明度是指从白到灰，再到黑色的相对亮度或暗度。纯度也是具有不同的明度，色相在保持最纯正的情况下具有不同的明度。将黄色和紫色进行对比这一点就显得非常明显，黄色是所有颜色总最亮的，紫色是最暗的。黑色和白色在改变明度时具有非常重要的作用，在一中颜色中添加黑色，可以获得该色的深色调（图2-5）。

图2-5

明度具有较强的独立性,它可以离开色相和纯度而单独存在,而色彩的色相和纯度往往是伴随着明度一起出现的.物体的立体感、空间感大都有赖于正确的明度关系。因此，色彩的表现需要重视明度关系的研究。

在无彩色中，白色为明度最高的，黑色为明度最低的。

有彩色的明度表现有两种情况：一是同一色相不同明度；二是不同色相的明度差异。彩色的明度等级是根据无彩色明度等级确定的。

3、 纯度

纯度是指色彩的鲜艳程度，即色彩的饱和度、彩度、鲜艳度。在色彩中，含有彩色成份越高纯度就越高，颜色显示也就最明亮。如果将黑白灰加入一个纯色中，那么该色的纯度就会降低，颜色也会变成灰暗色。

1.2.2.电商色彩对比关系

根据色相环的不同位置关系可将它们分为：同类色、类似色相、临近色相、对比色相和互补色相（图2-7）。

图2-7

（1） 同类色相对比。在色相环上距离角度15°左右的色彩，色相非常接近，只有通过明度、纯度的差别对比来营造丰富的视觉效果，这样的色相间产生的对比叫做同类色相对比。同类色相对比属于较弱的色相对比，常用来表现雅致含蓄、单纯、统一的视觉情感（图2-8）。

图2-8 15°

（2） 类似色相对比。在色相环上距离角度在45°左右的色彩，色相差别小，但是比同类色相比强度大些，仍需要通过明度、纯度方面的差别对比来产生丰富的视觉效果，产生的对比叫做类似色相对比（图2-9）。

45°

图2-9

（3） 邻近色相对比。在色相环上距离角度在90°左右的色彩，色相差别适中，属于色相对比。色彩差异增强，画面显得丰富。同时，由于色彩并非对立，因而易于做到统一、调和（图2-10）。 90°

图2-10

（4） 对比色相对比。在色相环上，距离角度在120°左右的色彩，色相差异很大，产生的对比叫做对比色相对比。对比色相对比的色彩效果相对鲜明、饱满、强烈，色相感更为丰富，不易单调，有较强的视觉的视觉冲击力图2-11,2-12。

120°

图2-11

图2-12

（5） 互补色相对比。在色相环上距离角度180左右的色彩产生的对比叫做互补色相对比。色相差别最强烈，属于最强色色相对比，画面对比最丰富、最强烈、最刺激，具有超强的视觉冲击力。其需要合理搭配，负责会产生负面效应，因为产生的刺激非常强，缺少优雅含蓄的感觉。需要对补色进行明度和纯度的调整，是画面相对稳定（2-13、2-14）。

2-13

2-14

明白了这些原理，基本的配色时不成问题的，只要按照自己的想法找到适合自己的画面主题的颜色及关系就不会错。还有更高层次的色彩原理马上给大家带来，会令大家脑洞大开，让你成为电商色彩达人。作者：徐超