网页banner设计色彩搭配指南 全套攻略请收好

我们通过视觉获取信息，色彩是非常重要的。除了设计的表现形式，我们通过色彩来分别事物的状态和感觉。色彩可以激发情感和感官的元素。今天MAKA小编就来教大家网页banner设计配色。

常用的配色方式

我们在工作当中经常会用到的配色方式：参考配色、产品取色、直觉配色、依据理论4个方式来进行版面的配色。

我们经常会用到参考配色，参考优秀设计案例的配色。

参考优秀案例中背景的颜色、标题颜色、搭配元素颜色来进行我们设计版面的配色。

1、找参考

在进行一个需求设计的时候我们往往都回去找相关的参考这时候就要充分利用到我们的花瓣，平时自己采集的案例找参考，千万不要单单只是去找同性质的参考。我们要扩大领域，只要是优秀的设计我们都可以去参考。

确定主参考

在我们找的参考案例中挑选一个比较符合的参考配色（前期在考虑板式形式的时候也要一起寻找参考，不要只是单一的去找配色参考）其它的案例作为另外考虑。

进行配色

在版面形式确定好之后，我们进行配色从背景到标题的配色。在过程中往往不会一次性的搭配和谐，所以我们要多尝试。不管是颜色的纯度、明度变化，可以适当调整会有一样的效果。

2、产品（模特）取色

根据要出现的产品或模特带有的颜色来进行背景和标题的配色方式，比较实用简单的一种方式。

标题英文的颜色取于模特衣服的颜色，不过要在这个色调上面找到一个舒适纯度的颜色，不要就直接用吸取的颜色。

另外背景的配色浅蓝和模特的衣服黄色真好是对比色所以会舒服，这是我们后面要说到的理论配色。

这个案例中产品上的颜色都充分的运用到标题上面，在深色背景上文案首选白色或亮色 。

这2个直通车案例，配色非常的舒服。饱和度不高背景的颜色有纯度的变化，给人一种很柔的感觉。

案例欣赏：

3、依据理论

根据理论来进行我们版面的配色是非常好的一种方式，在很多优秀的设计上面你会发现里面的颜色与颜色之间的关系。经常用到的理论有对比色、互补色、近似色、三角形搭配。

对比色（三角形搭配是3个颜色互相对比的组合）

通过右边的色相上面三角形来看我们案例中出现的主要色彩，紫色、黄色、青色这三个颜色都在三角形配色的范围里面，所以版面的颜色会比较舒服、生动。要注意的是把什么颜色设为背景色，紫色相对于黄色和青色是不亮也不暗的颜色所以比较合适作为背景色。

在使用三角形搭配的时候一定要选出一种色彩作为主色，另外两种作为辅助色。使用了低饱和度的色彩也不错。

对比色 — 案例欣赏

青色和黄色是对比色。在色相环上相距120度到180 度之间的两种颜色，称为对比色。

紫色、青色、黄色是三角配色，它们各自之间是对比色所以构成了三角配色。在产品色是亮色的情况下，背景色用暗色是一个好的选择！

互补色

互补色色彩之间是强烈的对比造成不稳定感，互补色搭配在正式的设计中比较少见。通过右边的色相上面三角形来看我们案例中出现的主色和辅助色是很明显的红绿互补色，都说红绿配丑到哭。案例中用白色很好的避免了绿色与红色的接触，不是一样生动好看么？

在各种色相搭配中，互补色搭配无疑是一种最突出的搭配，所以如果你想然你的作品特别引人注目，那互补色搭配或许是种最佳选择。

互补色—案例欣赏

紫色和黄色是互补色。在色相环上相距180 度之间的两种颜色，称为互补色。

互补色案例真的是比较少，上面案例中的红配绿，颜色的饱和度不是特别的高，所以还算稳定，对比不是的别的强烈。

近似色/类似色搭配

色环上距离较近的色彩搭配被称为近似色搭配或者类似色搭配，一般这种色彩之间大搭配显得平静而舒服。案例中的橙红色和黄色正式色相环上面的近似色。

近似色搭配在日常设计中比较常见，所以对眼睛来说，这是种最舒适的搭配方式。在使用近似色搭配的时候，一定要适当加强对比，不然可能使画面显得平淡。

近似色—案例欣赏

案例中的洋红、青色、蓝色它们是相近的几个颜色，在版面中比较舒服。黄色作为副标题颜色是因为黄色是蓝色的对比色，所以黄色会比较突出。主标题直接用白色，如果用黄色，黄色面积太大会不舒服。

非常舒服的一个近似色搭配，文案加上了外框避免白色和换色和绿色直接接触，因为同为亮色，亮色和亮色直接接触会不舒服刺眼，所以用了蓝色缓解。

直觉配色

直觉配色就是当我们说冬天你会想到蓝色、说夏天你会想到红色\蓝色、说春天你会想到绿色等等。

也就是说当我们拿到需求文案的时候第一反应会想到的颜色比如食品零食，我们肯定会首先考虑橙色、红色这些让人有食欲的颜色。跟我们主题息息相关的。

从标题“夏日狂欢”中很明显我们配色要清爽、贴近夏天的感觉，那么我们会首先想到蓝色、沙滩大海，然后在确定我们的辅助色进行搭配。在根据主题确定好主色调，然后开始确定辅助色和相关的优秀配色参考。

之前的一个零食营销需求，根据零食所以我就先想到橙色、黄色，然后找类似优秀的参考进行配色，来给自己一个大的感觉。

在根据主题确定好主色调，然后开始确定辅助色和相关的优秀配色参考。

标题“蓝钻特权月”蓝钻嘛当然考虑蓝色搭配，不能说蓝钻弄个黄色背景那不成为黄钻了 。

圣诞节我们会想到绿色、红色，这2种颜色是代表圣诞节的气氛，要是弄个黄色那就没有圣诞节的感觉了。这2种颜色是互补色所以主色和辅助色的面积要控制，尽量要舒服。

每种方式都有自己的好处，自己习惯就好。深色背景配浅色，浅色背景配深色。根据基础理论去配色是个不错的方式。优秀的设计案例还有很多这个需要大家平时的采集和观察。点击MAKA在线制作平台（https://maka.im）在线设计你的优秀banner。