转载自:普象工业设计小站
原标题:红配绿,美还是丑?
上两周,
写了一篇《配色丑?因为你不会对比!》
后台炸了,众多门友各种威逼利诱我赶紧写下一篇!
这个事情已经被监控拍下来了,
自己看视频!
![](http://n.sinaimg.cn/fashion/gif_image/506/w230h276/20210813/1add-32f75a61bd351d48bfdb8c67d1d5ccdb.gif)
(快点写,快点写!案发现场还原)
好了好了,这不来了么!
今天我们来说下互补色。
对很多新手来说,可能会搞不清楚对比色和互补色这两个概念,不知道它们到底有什么区别。
但是更多的问题可能是,看别人的互补色用起来那叫一个高大上,到了自己手里怎么就变成了花里胡哨,或者土俗土俗的,是不是有种想砸电脑的感觉?
![](http://f.sinaimg.cn/fashion/gif_image/568/w224h344/20210813/7ffd-f0efca74afc92cf0928c454a2f3eed02.gif)
OK,看完今天的文章,相信肯定能帮助你随心所欲的驾驭互补色。先来看看什么是互补色。
![](http://n.sinaimg.cn/fashion/crawl/726/w550h176/20210813/f77e-45b47994725ba5eaeaf82ea735f06b51.png)
在上期对比色的教程中,我们说到,距离越远的两个色彩,它的反差就越强。很显然,在一个圆环上相距180度就是最远的,此时对应的两个色彩,我们把它们叫对互补色。
![](http://n.sinaimg.cn/fashion/crawl/303/w550h553/20210813/8f94-93ca0b22e0cf99ae921ed73d8b8a21e4.png)
所以,互补色其实是属于对比色的一种,是最强烈的对比色。因为两个色彩之间的差异性太大,放在一起看起来很冲,很多时候又把它叫做撞色。
弄清楚互补色的概念后,我们再来看看互补色有什么特点。
![](http://n.sinaimg.cn/fashion/crawl/726/w550h176/20210813/54ad-2944a9b5baa4f9ce827d7c42be13e3b0.png)
上期我们讲到,对比色具有3大特点:
![](http://n.sinaimg.cn/fashion/crawl/794/w550h244/20210813/0c33-f5252c7c0e1f6dc51977b7deae0ed033.png)
这三项特点互补色也同样具有,而且更加强烈。
互补色不但能给人突出醒目,强烈有力的感觉,还能起到振奋人心的作用。所以我们看到很多运动类的设计都会用到互补色。例如美国NBA的球队LOGO设计,大多是互补的配色方式。
![](http://n.sinaimg.cn/fashion/crawl/300/w550h550/20210813/62ed-1c76e273ed4dc4cf59ba4a03e2d73d8e.png)
虽然从色环上来看,互补色可以有很多组,但实际上我们在用色的过程中,最常用的互补色有3组,分别是红和绿、紫和黄、蓝和橙。
![](http://n.sinaimg.cn/fashion/crawl/708/w536h172/20210813/7efd-7ef2225e5c114a3e1dcdda9ce31335f7.png)
我们来看看每组配色都有什么特点。
红绿互补
说起红配绿,估计能让不少人望而却步,所谓红配绿赛狗屁!这对组合简直就是土气的代名词。
![](http://n.sinaimg.cn/fashion/crawl/117/w550h367/20210813/3afe-22639c54600cffce4ef2a8b6a237799d.jpg)
由于红色和绿色在色相上缺乏共性,放在一起会造成极强的视觉反差,衬得红色更红,绿色更绿,搭在一起容易有格格不入、扎眼的感觉。
![](http://n.sinaimg.cn/fashion/crawl/6/w550h256/20210813/c230-d63caa0bdfbaa3542ff423c302ffa504.jpg)
红配绿要取得好的视觉效果,则需要使用一些调和手段,可以在明度、饱和度上中和两种色彩的突兀,使其形成和谐统一的对比。
同样是红配绿,这样就好多了:
![](http://n.sinaimg.cn/fashion/crawl/548/w550h798/20210813/0e25-9382ecf0544b9099595674888c5be858.jpg)
在平面设计中,红绿互补配色不但醒目,而且冲击力十足。适当的降低饱和度后,有种复古的感觉。
![](http://n.sinaimg.cn/fashion/crawl/300/w550h550/20210813/aed9-efda0ecb27939df04dc9ce48aafa13a6.jpg)
蓝橙互补
蓝橙是一组经典的冷暖互补色,能很好的平衡画面,以及拉开层次感,表现出特殊的视觉对比与平衡效果,因此,这是一组应用最为广泛的互补色。
![](http://n.sinaimg.cn/fashion/crawl/430/w550h680/20210813/f799-839e3bd8c02b60557be4547f989399fc.png)
在界面设计中,用蓝橙互补色可以很好的营造出画面的层次感。
![](http://n.sinaimg.cn/fashion/crawl/238/w550h488/20210813/4ee6-2371d516bda8e2e4968df106a68e55b4.jpg)
![](http://n.sinaimg.cn/fashion/crawl/15/w550h265/20210813/a2e3-f227d8ed7a3a1bd3c87968b1f813e276.jpg)
黄紫互补
紫色的明度在所有彩色中是最低的。它给人一种沉闷、神秘的感觉。在紫色中加黄色形成互补色,可使紫色沉闷的性格消失,变得优雅而有高级感。
![](http://n.sinaimg.cn/fashion/crawl/173/w550h423/20210813/3fe6-37639ce1f84ce2d8e1589a6e33992f0c.png)
在房地产,汽车、手表等高端消费品行业,经常可以看到紫金的配色。
![](http://n.sinaimg.cn/fashion/crawl/643/w550h893/20210813/15c5-15685203c3d04a7991a52070a4aa4805.jpg)
在体育方面,湖人和科比几乎成为紫金配色的代言人。
![](http://n.sinaimg.cn/fashion/crawl/433/w550h683/20210813/4c18-891144fcc44fece2f2d990442c1d5d29.jpg)
![](http://n.sinaimg.cn/fashion/crawl/726/w550h176/20210813/cb44-667900b0d841943b56d26c092f479cac.png)
虽然互补色活力四射,明亮抢眼,但是实际在使用的过程中,却那没么容易掌握。搭配好了就是色彩大神,用坏了就是花里胡哨,整个页面垮掉。
如何化解互补色之间的冲突感,是将互补色用好的关键所在。下面我给大家分享几条小技巧,教大家如何将互补色用得恰到好处。
改变比例
由互补色之间反差极大,在使用互补配色时,我们需要特别注意比例问题。以服饰穿搭为例,如果不是超模的身材,一般是驾驭不了50:50的撞色穿搭的。
![](http://n.sinaimg.cn/fashion/crawl/292/w550h542/20210813/882f-982898591a18a7909a27e1f11f118c31.png)
大多数情况下,我们会选择一种颜色作为主色调,大面积使用,然后再用小面积的互补色去提升画面。也就是我在对比色的教程中讲的“大协调,小对比”原则。具体的比例可以选择2:8或者3:7,如图:
![](http://n.sinaimg.cn/fashion/crawl/795/w550h245/20210813/7563-3d561354b7c42b1d9ca5bc87cdb62f75.png)
下面的海报就是采用了这样的比例搭配:
![](http://n.sinaimg.cn/fashion/crawl/385/w474h711/20210813/b9b9-2dec66fe97638d6706d4c593eeb95b9b.jpg)
我们也可以用更加保守一点的配色方法,在小面积中加入对比色,画面的主要部分是无彩的协调色。
![](http://n.sinaimg.cn/fashion/crawl/0/w550h250/20210813/d93a-9afad636ebfb1ec924aa92da67869313.png)
这样整个画面既有鲜明的对比,同时也不会显得很冲。我们一般在界面设计中,是这样应用的:
![](http://n.sinaimg.cn/fashion/crawl/163/w550h413/20210813/a9a5-af63e6e834b73f3da8f0699019ea2456.png)
海报设计也可以用类似的配色方法,在色彩比例上当然可以微调:
![](http://n.sinaimg.cn/fashion/crawl/586/w550h836/20210813/e826-aeae9f385e914fc36085399a71025e76.jpg)
当两种互补色之间的比例是50:50时,由于色彩反差大,此时冲突感是最强烈的,最好有其它办法来协调一下。比如降低画面的明度或者饱和度等,这就是下面我要讲的第二点了。
改变纯度
纯度是指色彩的饱和度,纯度越高色彩越鲜艳,也越刺眼。纯度越低看起来更温和,也更浑浊。
![](http://n.sinaimg.cn/fashion/crawl/628/w550h78/20210813/85b5-3152ebf805e49b2b0b9314e537cbcc72.png)
在应用互补色的时候,我们可以考虑降低一方,或者两方的纯度,来减弱它的冲突。
例如下图,通过降低紫色的纯度,让画面看起来更加沉稳有力。
![](http://n.sinaimg.cn/fashion/crawl/106/w550h356/20210813/0fcf-8d434f7a50920450020fe3f2e3b2fbc9.jpg)
下图中,红色和绿色的纯度都比较低,不但让画面色彩更加协调,也营造出了一种复古氛围。
![](http://n.sinaimg.cn/fashion/crawl/477/w550h727/20210813/ba6c-a0bc32b5534bc22327b480b8e7c9634b.jpg)
下图则通过降低蓝色部分的纯度,让鞋子的橙色部分更加突出醒目。
![](http://n.sinaimg.cn/fashion/crawl/8/w550h258/20210813/fe32-2873a6315edb61243fbb1743c3703abb.jpg)
改变明度
明度是指色彩的深和浅,不同的颜色所具有的明度也是不一样的。明度越高的颜色越明亮轻快,明度越低的颜色越深沉厚重。
![](http://n.sinaimg.cn/fashion/crawl/674/w550h124/20210813/25a8-52fe1834aa7c2a07cd425799a70a5a49.png)
在应用互补色的时候,我们改变色彩的明度就可以削减它们的冲撞感,多一份轻松与清新,不那么刻意。
例如下图,通过提高背景上红色与绿色的明度,很好的弱化了红绿之间的冲突,让整个画面显得轻松活泼,少女感十足。
![](http://n.sinaimg.cn/fashion/crawl/474/w550h724/20210813/37c4-35d4680dc2fd2c8d8ee041ead36b4bd7.jpg)
下面的广告中,通过提升背景上绿色的明度,让西瓜瓤的红色看起来更加鲜艳可口。
![](http://n.sinaimg.cn/fashion/crawl/99/w550h349/20210813/fabb-bd417e556d017f5f0c2ae47cf6a7e873.jpg)
下面的广告则是压暗了蓝色部分的明度,让画面更具商务金融气质,橙色的数字看起来特别突出醒目。
![](http://n.sinaimg.cn/fashion/crawl/6/w550h256/20210813/613c-c8c2053038bf16841638d566ff3561de.jpg)
中性色调和
所谓中性色,就是指黑白灰这些无彩色。互补色鲜艳热烈,而中性色则刚好相反,它们毫无情绪感,中庸冷静。在对比色中加入中性色可以很好的调和画面的平衡感。
中性色:
![](http://n.sinaimg.cn/fashion/crawl/686/w550h136/20210813/91cc-9b20c9c713aa73ae1c1265c6ba7102e5.png)
用黑白灰来调和互补色的方式,被大量的应用在各类设计中。在服饰穿搭上,无论是时尚T台,还是日常着装,都能看到这样的配色方式。
![](http://n.sinaimg.cn/fashion/crawl/212/w550h462/20210813/2f21-5e22c1eb42305611462e84c1d7dfb36f.png)
家居装饰设计就更不用说了,高级灰的理念深入人心。中性色+互补色的配色方式无处不在。
![](http://n.sinaimg.cn/fashion/crawl/118/w550h368/20210813/4578-db7971e314458b1c1e95e637e80ac547.png)
如果我们想要跳跃的颜色沉稳就用黑色,如果想要作品透亮就用白色,如果想要保持中性态度,可以用灰色。本身黑白灰的变化也很多,所以这种调和后的结果非常多变。
许多好看的纹理设计也用到了这种配色方式。
![](http://n.sinaimg.cn/fashion/crawl/232/w550h482/20210813/716a-2c66d215df29d261c5a7081e58ea507e.png)
通过中性色的调和,既保持了互补色所带来的丰富的层次感,也避免了互补色之间强烈的冲突。
画面主体是互补色,背景和文字用中性色:
![](http://n.sinaimg.cn/fashion/crawl/123/w550h373/20210813/383c-5d730917c3135e998a1c9d9c528aec21.png)
如果主体是无彩的中性色,则背景可以用互补色来提升画面视觉冲击力。
![](http://n.sinaimg.cn/fashion/crawl/589/w550h839/20210813/d71d-7749148d1b26acc0d3b420ededbcd601.png)
理论部分就讲到这,好不好用还得看实操!
OK,那就动手吧!
![](http://n.sinaimg.cn/fashion/gif_image/430/w226h204/20210813/6909-f2d2b9db05cdccbcfba851996e0faa59.gif)
![](http://n.sinaimg.cn/fashion/crawl/726/w550h176/20210813/c7ff-09d96b47dc2c2f9399298c75ecfc2495.png)
下面我们通过两个不同的案例,看看互补色是如何应用的。
案例一
先来个小案例热热身。第1步,
当然是先抠一张素材图。
![](http://n.sinaimg.cn/fashion/crawl/59/w550h309/20210813/238a-2b87a02fad3e785fe9a6a051de8deeb3.png)
第2步,
我们观察一下素材图,发现她身上的亮点在于内搭的橙色T恤,把它的色彩提取出来,我们反推出它的互补色蓝色。
![](http://n.sinaimg.cn/fashion/crawl/59/w550h309/20210813/8627-d072ab9075159648c4a8ede0955c9463.png)
小tips:人物身上的橙色的饱和度偏低,所以我们选它的互补色蓝色的时候,也可以适当将饱和度降低一点,这样整体看起来比较协调。第3步,
将蓝色作为背景色平铺在后面,与人物形成鲜明的对比。
![](http://n.sinaimg.cn/fashion/crawl/59/w550h309/20210813/8800-85195348a896ebb0c2e168441de2508a.png)
第4步,将文案排版好,在文案上添加一点橙色来呼应一下人物。
![](http://n.sinaimg.cn/fashion/crawl/59/w550h309/20210813/0952-070c294752b7d9224831dfd2f53c3ed0.png)
OK,一个女装广告就完工了!是不是So easy的感觉?
好了,继续下一个。
案例二
接着我们通过一个改稿的案例,来看看互补色是怎么应用的。
先来看看原图:
![](http://n.sinaimg.cn/fashion/crawl/491/w550h741/20210813/c43c-acc34c0144174fbeec19c7c4733aece1.jpg)
原图只能说中规中矩,配色排版都没有什么大问题。画面略显沉闷,而且画面中空白太多,画面主体不够突出,看着没什么点击欲。
好了,看下怎么改。
因为原图不够清晰,所以我另找了一双角度类似的鞋子,先抠出来:
![](http://n.sinaimg.cn/fashion/crawl/113/w550h363/20210813/d3b8-a3d2aadfeeeb903310f48896d9dcc7f4.png)
第1步:
原图的构图方式不够饱满,画面主体并没有被充分的展示出来。所以我们调整一下产品的角度,让它在画面中比例更高一些。
![](http://n.sinaimg.cn/fashion/crawl/477/w550h727/20210813/577f-5675c256f9e328c7725f621dea3bc325.png)
第2步:
我们看到鞋子上有一片蓝色比较突出,可以把它提取出来,作为画面的主色调放到背景上。并给鞋子添加阴影效果,让它看起来更逼真。
![](http://n.sinaimg.cn/fashion/crawl/477/w550h727/20210813/4d77-9b460722ba1972fb0da4d447b0287492.png)
第3步:
给背景添加纹理,丰富一下画面层次感。然后我们选取背景蓝色的互补橙色,作为点缀色放到装饰的条形带元素中。通过互补色的对比,整个画面一下就变得更有活力。
![](http://n.sinaimg.cn/fashion/crawl/477/w550h727/20210813/1e4f-afa581fa53ddf8d104f1fdb815ac716e.png)
添加上文案,这样整个画面的大体结构就完成了。
如果我们希望画面的视觉冲击力更强一些,那么我们可以试试加大互补色的对比面积,制造更强烈的冲突。
![](http://n.sinaimg.cn/fashion/crawl/477/w550h727/20210813/111e-1a13dcee172e9a1d98bcfeaf871917d8.png)
最后,
添加装饰和文字,让画面细节更加丰富。
![](http://n.sinaimg.cn/fashion/crawl/477/w550h727/20210813/ff82-c0ecdf90319182d67df68d1eb2f4fbf3.png)
ok,完工。
最后来一张对比图:
![](http://n.sinaimg.cn/fashion/crawl/87/w550h337/20210813/892c-3cc2795217883885be9ae6182283f7ef.png)
通过互补色的应用,我们成功拯救了一张死气沉沉的电商海报!
案例三
虽说红配绿赛狗屁,但是!配色从来就没有绝对的美和丑,只要处理得当,红配绿一样非常好看。
OK,通过具体的案例来看怎么操作。
第1步,
当然还是先抠一张素材图。
![](http://n.sinaimg.cn/fashion/crawl/575/w550h825/20210813/fc0d-9dd63fbdec42ca05effc366e4ed6727e.png)
第2步,
观察下口红的颜色,发现它刚好自带了红色和绿色,把它们吸出来用在页面上,奠定画面的色彩基调。这里要注意的是,可以适当降低两种色彩的饱和度,这样看起来会更协调。
![](http://n.sinaimg.cn/fashion/crawl/575/w550h825/20210813/246f-63c1811ad324d6d7f758a7b2e4f46928.png)
第3步,给圆形添加一个边框素材,增加细节感,处理好商品与边框的遮挡关系。调整好颜色和商品背后的光影,让画面看起来更真实。
PS:边框素材可以自己做,也可以去网上搜“中国风 边框”。
![](http://n.sinaimg.cn/fashion/crawl/150/w550h400/20210813/0ea8-3a8769ec6101f0a807b34d0fa1e11096.png)
第4步,
将文案排版好,字体选用具有人文气息的岩田仿宋,这样整个画面的内容就差不多了。
![](http://n.sinaimg.cn/fashion/crawl/575/w550h825/20210813/101c-885fa480cdfa66114476ad5a15d43e02.png)
第5步,
接着给画面增加光影等细节,在产品图的背景用红色的小植物点缀一下,丰富画面的层次感。
![](http://n.sinaimg.cn/fashion/crawl/575/w550h825/20210813/d2d6-e106d0a86289c73e10b54b5e1d807a8b.png)
OK,完工!
红配绿土吗?不仅不土,还十分潮!
-END-
![](http://n.sinaimg.cn/default/723ccdcf/20200424/share_banner.jpg)