电商美工配色技巧「网页设计配色搭配」

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

身为设计新手的你，

是不是还在纠结找不到一组完美的配色方案？

今天就与你分享一些实用

并且“错不了”的指导方针，

你可以按照这些原则把握最基本的色彩规律。

学习色彩，最终需要学会配色。

所谓配色，就是通过色彩的色相、

明度和纯度的对比，来控制视觉刺激，

从而达到配色的效果。

色彩的三要素

学习配色必须要了解色彩的三要素即色相、

明度和饱和度（彩度）。

在日常生活中，我们看到的任一彩色光

都是这三种色彩特性的综合效果。

1、色相

色相是色彩的首要特征，是区分各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相也就是由原色、间色和复色来构成的。在色彩学中，最初的基本色相有六种，即红、橙、黄、绿、蓝、紫，不同的色相会给人传递不同的感觉。世间万物的颜色，也都是由这六种基础色调配而成的。

不同的颜色是带有不同的性格特征的，因而不同的颜色对人的情绪影响也是不一样的。

红色：代表着热烈、喜悦、果敢、奋扬。在电商设计中可以体现一种节日气氛，喜庆热闹。

橙色：代表着欢快、活泼。在电商设计中多用于零食和水果等产品的促销海报的制作，容易给人营造一种平易近人的生活感和廉价的促销感。

黄色：代表着年轻、活泼和时尚。在电商设计中，往往用来营造一种文艺而又不失时尚的产品氛围。

绿色：代表着健康、活泼、生气和发展。绿色本身就有“生态环保”的特征，因此在电商设计中常用于家装家居、户外用品及茶饮等产品的视觉表现中。

蓝色：代表着幽静、深远。蓝色也代表天空和大海的颜色，因此在电商设计中，多用于护肤品一类的产品视觉表现，这样既可以营造出一种清爽、干净、生态的产品氛围，又能在某种程度上体现出产品的质感。

紫色：代表着神秘、高贵、脱俗，能消除紧张情绪。在电商设计中多用于女鞋、化妆品等产品的视觉表现，目的是凸显一种优雅高贵气质的同时，营造一种魔幻神秘的产品氛围。

2 明度

明度是指色彩的亮度或者深度，即色彩的深浅和明暗变化，而且不同的颜色明度高低也不同。在无彩色中，明度最高的颜色为白色，明度最低的颜色为黑色，中间存在一个从亮到暗的灰色系列。

在有彩色中，任何一种纯度色都有着自己的明度特征，例如浅蓝、蓝和深蓝都属于蓝色。明度越高，颜色越浅；明度越低，颜色越深。

3 饱和度

饱和度也称纯度，指色彩的鲜艳程度。饱和度越高，颜色越鲜艳，视觉冲击力就越强，反之亦然。

一般情况下，饱和度高低取决于对应颜色中含色成分和消色成分（灰色）比例的比重大小。含色成分的比例越高，饱和度越高；消色成分的比例越高，饱和度越低。高饱和度的色彩搭配在电商海报制作中较为常用，其容易给人以热情、活力、健康和年轻刺激的感觉，而且非常具有视觉冲击力和震撼力，因而也多出现在促销海报的设计当中。

色彩的搭配技巧

色彩作为第一视觉语言，其作用是字体与图像等其他要素所无法替代的。色彩是一种最本能、最普通的美感，同时它对观者的影响也是最为直接的。

色彩搭配就是不同色相之间相互呼应和相互调和的一个过程。色彩之间的关系取决于色彩在色相环上的位置。色相和色相之间距离角度越近，则对比越弱；色相和色相之间距离角度越远，则对比越强。

1 互补色搭配

色轮中相隔180°的两种颜色称为互补色。在12色轮中，相隔180°的一组颜色为互补色。根据红、橙、黄、绿、蓝、紫的顺序，可以将其分为红 绿、橙 蓝、黄 紫这三组常用的互补色搭配色系。

此种搭配方式通常会给人非常强烈的视觉冲击力，表现出一种力量、气势与活力，因此也是现代时尚且常用的搭配方式。

下面我们以一组互补色搭配的电商海报设计为例。在电商设计当中，常用的互补色搭配分为以下几种形式。

01 红色 绿色。此种颜色搭配要注意控制好画面的色彩比例。一般来说，互补色搭配很容易呈现强烈的视觉效果。因此，为了突出产品主体或我们想要表达的产品主题，通常是将一种颜色作为主色调，然后另一种颜色作为点缀或者辅助色来使用。

02橙色 蓝色。此种颜色搭配需要通过明度或饱和度的调整来控制画面。在电商设计中，为了减少互补色中的两种颜色所产生的对抗性，使其产生一种明暗对比效果，通常是将一种颜色的明度或饱和度降低，然后将另一种颜色的明度或饱和度调高或者保持不变。

03紫色 黄色。此种颜色搭配要通过黑色和白色调和画面。在电商设计中，同样为了减少互补色中的两种颜色所产生的对抗性，有时候我们会选择在画面中加入黑色和白色来进行调和。

这些配色基本规律是需要我们牢记掌握的。在日常的电商设计练习当中，我们要多欣赏一些好的海报，找出其中的配色规律，然后多总结，之后再摸索出一套属于自己的搭配经验。

2邻近色搭配

在12色轮中，相隔90°的一组颜色为邻近色。根据红、橙、黄、绿、蓝、紫的顺序，邻近色一般分为冷色和暖色两大范围，其中绿、蓝、紫属于冷色范围，红、橙、黄属于暖色范围。

对于邻近色来说，它们之间往往存在一种“你中有我，我中有你”的关系，例如朱红 橘黄的搭配，朱红以红色为主，里面含有少量的黄色，橘黄以黄色为主，里面含有少量的红色。虽然邻近色在色相上有很大差别，但在视觉上却比较接近。因而在电商设计当中，其具有视觉上的一致性，也更容易被用户所接受，同时在设计上画面也较好控制一些。

在电商设计当中，常用的邻近色搭配分为以下4种形式。

第1种：红色 橙色。此种搭配方式容易让人感觉到华丽、节庆的气息，因而常被运用于节日活动海报的设计当中。

第2种：橙色 黄色。橙色和黄色由于在色相上与红色相似，因此此种搭配方式与红色 橙色的搭配有着一些相同的特点，属于比较安全、和谐和统一的色彩搭配方式，同时也具有华丽、喜庆的气息，因此也常作为节日活动海报的搭配手法来使用。

第3种：蓝色 绿色。它属于平静、安全的色彩搭配方式，因此在电商设计中常被运用在食品、儿童产品及健康环保家居日用产品的设计当中。

第4种：蓝色 紫色。此种搭配方式可以给人一种舒适、平稳的感觉，画面非常和谐统一，视觉冲击力较弱，因而在电商设计中常常被运用在一些比较高端奢侈的品牌官网设计当中。

3 间隔色搭配

在12色轮中，相隔120°的一组颜色为间隔色。根据红、橙、黄、绿、蓝、紫的顺序，可以将其分为红 黄、蓝 黄、蓝 红和紫 绿这四组常用的间隔色搭配色系。

间隔色因色彩的特征差异，在设计中能造成鲜明的视觉对比，有一种“相映”或“相拒”的力量使之平衡，因而也能产生一定的调和感。

在电商设计中，针对间隔色的搭配主要分为以下4种形式。

第1种：红色 黄色。此种搭配可谓是促销海报设计中常用又经典的色彩搭配手法。其特点是能做到视觉上非常抢眼，同时又具有廉价的促销感。

第2种：蓝色 黄色。此种搭配方式可以让画面显得非常明快和时尚。

如图所示。这里文字采用了白色作为调和色，背景和一些元素采用了蓝色，目的是体现出一种科技的格调。

第3种：蓝色 红色。蓝色是冷色，红色是暖色，冷色趋于后退，暖色趋于迫近，因而在电商设计中，可以利用此关系突出产品主体或想要表达的产品主题。

第4种：绿色 紫色。此种搭配方式最大的特点就是明快，是一种传统的常用电商设计搭配方式。

仔细观察可以发现，在以上的每个电商海报案例中，都添加了白色作为调和色。而在电商设计中，白色和黑色都是万能的调和色。同时在间隔色的搭配中，同样要控制好间隔两色之间的比例，不要让色彩看起来过于均衡。一般来说，主色在画面中占比较大，副色次之；主色在画面中的明度和饱和度较高，副色次之。