电商设计之配色和取色技巧一

目录

一.色彩三要素

1.色相

2.饱和度

3.明度

---------------------------------------------

二。色彩搭配方法

1.三角形配色

2.分裂互补配色

3.四方形配色

4.常见配色方法

--------------------------------------------------

三.配色分析

1.综合演练

2.整体质量把控

3.如何取色用色

--------------------------------------------------------------

四。案例实战

分享者：清客族

色彩搭配方法

（对比色、补色、三角形、四方形）

三原色：红、黄、蓝

所有颜色的源头被称为三原色，三原色指的是红色、黄色、蓝色

如果我们谈论的是屏幕的显示颜色，比如显示器，三原色分别是红色、绿色、

蓝也就是我们熟悉的RGB，

间色、复色（三级颜色）

如果将红色和黄色、黄色和蓝色、蓝色和红色均匀混合，就会创建三种间色：

橙色、绿色、紫色

将这些颜色应用进项目中，可以提供很强烈的对比。

三次色来源于间色与原色的混合，主要有：红紫色、蓝紫色、蓝绿色、黄绿色、

橙红色和橙黄色

同类色/邻近色

同类色指色相性质相同，但色度有深浅之分。（色相环中15'夹角内的颜色）

近似色

近似色指色相性质相同，色度深浅比较明显。（是指色相环中夹角50'左右的两

种近似色）

对比色

对比色是人的视觉感官所产生的一种生理现象，是视网膜对色彩的平衡作用，指针24色相环上相距120度到180度之间的两种颜色，称为对比色。

补色

又称互补色，余色，亦称强度比色，就是两种颜色（等量）混合后呈黑灰色，那么这两种颜色一定互为补色。色环的任何直径亮点相对之色都称为互补色。

冷、暖、中性色

色彩学上根据心理感受，把颜色分为暖色调（红、橙、黄）、冷色调（青、蓝）

和中性色调（紫、绿、黑、灰、白）

冷色

青色，蓝色，蓝紫色等等都属于冷色系列。冷水一般跟白色调和可以达到很好

的视觉效果，

冷色一般应用于一些高科技、高品质、理性类页面设计中。

暖色

黄色、橙色、红色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果，暖色一般应用于女性，儿童，食品类等，

也可以体现商品的玲琅满目，热情活泼，温馨等。

同类色和近似色搭配

如黄绿色、黄色和桔色等。近似色的搭配给人的视觉效果很舒适，很自然。所

以近似色在设计中极为常见。

（注：在用近似色时，要是的价钱对比，不然会使画面显得平淡）

对比色和补色搭配

最突出，最引人注目的搭配，有强烈视觉冲击！！

（注：互补色之间的强烈对比，会引起色彩的颤动和不稳定感，处理不好会使

页面冲突，破坏整体感，

对于互补色，调整一下互补色的亮度，或者调整互补色的使用面积，有时候是

一种很好的搭配）

三角形搭配

使得画面生动的搭配方式，在使用三角形搭配方式时，一定要选出一种色彩作

为主色，另外两种作为辅色

分裂互补色搭配

这是互补搭配的遍体，本质是用类似色来代替互补色中的一个颜色，以达到既

有互补色对比强烈的优点

又袮补了不稳定不安的缺点，对初学者来说是非常好用的搭配方式，画面对比

强烈又不容易产生混乱。

四方色/四方补色

四方色是在色轮上面一个正方形，取四个角的颜色，这个颜色超棒，尤其是使用其中一个颜色作为主色，其他的三个颜色作为辅助色的时候

四方补色和四方色的差别在于四方补色采用的是一个矩形，通过一组互补色两

旁的颜色建立的色彩组合。

什么样的画面方便识别（明度、对比度、清晰度）

色相变化

优秀页面配色分享

（色彩搭配综合技巧）

案例分析：

观察1

观察食品页面的色彩搭配方式、色相、明度、饱和度的应用

一个Banner通常由以下组成：

产品

标题

副标题

活动详情

背景图案