今天我們來說下互補(bǔ)色。

對(duì)很多新手來說，可能會(huì)搞不清楚對(duì)比色和互補(bǔ)色這兩個(gè)概念，不知道它們到底有什么區(qū)別。

但是更多的問題可能是，看別人的互補(bǔ)色用起來那叫一個(gè)高大上，到了自己手里怎么就變成了花里胡哨，或者土俗土俗的，是不是有種想砸電腦的感覺？

OK，看完今天的文章，相信肯定能幫助你隨心所欲的駕馭互補(bǔ)色。先來看看什么是互補(bǔ)色。

在上期對(duì)比色的教程中，我們說到，距離越遠(yuǎn)的兩個(gè)色彩，它的反差就越強(qiáng)。很顯然，在一個(gè)圓環(huán)上相距180度就是最遠(yuǎn)的，此時(shí)對(duì)應(yīng)的兩個(gè)色彩，我們把它們叫對(duì)互補(bǔ)色。

展開全文

所以，互補(bǔ)色其實(shí)是屬于對(duì)比色的一種，是最強(qiáng)烈的對(duì)比色。因?yàn)閮蓚€(gè)色彩之間的差異性太大，放在一起看起來很沖，很多時(shí)候又把它叫做撞色。

弄清楚互補(bǔ)色的概念后，我們?cè)賮砜纯椿パa(bǔ)色有什么特點(diǎn)。

上期我們講到，對(duì)比色具有3大特點(diǎn)：

這三項(xiàng)特點(diǎn)互補(bǔ)色也同樣具有，而且更加強(qiáng)烈。

互補(bǔ)色不但能給人突出醒目，強(qiáng)烈有力的感覺，還能起到振奮人心的作用。所以我們看到很多運(yùn)動(dòng)類的設(shè)計(jì)都會(huì)用到互補(bǔ)色。例如美國(guó)NBA的球隊(duì)LOGO設(shè)計(jì)，大多是互補(bǔ)的配色方式。

雖然從色環(huán)上來看，互補(bǔ)色可以有很多組，但實(shí)際上我們?cè)谟蒙倪^程中，最常用的互補(bǔ)色有3組，分別是紅和綠、紫和黃、藍(lán)和橙。

我們來看看每組配色都有什么特點(diǎn)。

紅綠互補(bǔ)

說起紅配綠，估計(jì)能讓不少人望而卻步，所謂紅配綠賽狗屁！這對(duì)組合簡(jiǎn)直就是土氣的代名詞。

由于紅色和綠色在色相上缺乏共性，放在一起會(huì)造成極強(qiáng)的視覺反差，襯得紅色更紅，綠色更綠，搭在一起容易有格格不入、扎眼的感覺。

紅配綠要取得好的視覺效果，則需要使用一些調(diào)和手段，可以在明度、飽和度上中和兩種色彩的突兀，使其形成和諧統(tǒng)一的對(duì)比。

同樣是紅配綠，這樣就好多了：

在平面設(shè)計(jì)中，紅綠互補(bǔ)配色不但醒目，而且沖擊力十足。適當(dāng)?shù)慕档惋柡投群螅蟹N復(fù)古的感覺。

藍(lán)橙互補(bǔ)

藍(lán)橙是一組經(jīng)典的冷暖互補(bǔ)色，能很好的平衡畫面，以及拉開層次感，表現(xiàn)出特殊的視覺對(duì)比與平衡效果，因此，這是一組應(yīng)用最為廣泛的互補(bǔ)色。

在界面設(shè)計(jì)中，用藍(lán)橙互補(bǔ)色可以很好的營(yíng)造出畫面的層次感。

黃紫互補(bǔ)

紫色的明度在所有彩色中是最低的。它給人一種沉悶、神秘的感覺。在紫色中加黃色形成互補(bǔ)色，可使紫色沉悶的性格消失，變得優(yōu)雅而有高級(jí)感。

在房地產(chǎn)，汽車、手表等高端消費(fèi)品行業(yè)，經(jīng)常可以看到紫金的配色。

在體育方面，湖人和科比幾乎成為紫金配色的代言人。

雖然互補(bǔ)色活力四射，明亮搶眼，但是實(shí)際在使用的過程中，卻那沒么容易掌握。搭配好了就是色彩大神，用壞了就是花里胡哨，整個(gè)頁(yè)面垮掉。

如何化解互補(bǔ)色之間的沖突感，是將互補(bǔ)色用好的關(guān)鍵所在。下面我給大家分享幾條小技巧，教大家如何將互補(bǔ)色用得恰到好處。

改變比例

由互補(bǔ)色之間反差極大，在使用互補(bǔ)配色時(shí)，我們需要特別注意比例問題。以服飾穿搭為例，如果不是超模的身材，一般是駕馭不了50：50的撞色穿搭的。

大多數(shù)情況下，我們會(huì)選擇一種顏色作為主色調(diào)，大面積使用，然后再用小面積的互補(bǔ)色去提升畫面。也就是我在對(duì)比色的教程中講的“大協(xié)調(diào)，小對(duì)比”原則。具體的比例可以選擇2：8或者3：7，如圖：

下面的海報(bào)就是采用了這樣的比例搭配：

我們也可以用更加保守一點(diǎn)的配色方法，在小面積中加入對(duì)比色，畫面的主要部分是無彩的協(xié)調(diào)色。

這樣整個(gè)畫面既有鮮明的對(duì)比，同時(shí)也不會(huì)顯得很沖。我們一般在界面設(shè)計(jì)中，是這樣應(yīng)用的：

海報(bào)設(shè)計(jì)也可以用類似的配色方法，在色彩比例上當(dāng)然可以微調(diào)：

當(dāng)兩種互補(bǔ)色之間的比例是50：50時(shí)，由于色彩反差大，此時(shí)沖突感是最強(qiáng)烈的，最好有其它辦法來協(xié)調(diào)一下。比如降低畫面的明度或者飽和度等，這就是下面我要講的第二點(diǎn)了。

改變純度

純度是指色彩的飽和度，純度越高色彩越鮮艷，也越刺眼。純度越低看起來更沉穩(wěn)，也更渾濁。

在應(yīng)用互補(bǔ)色的時(shí)候，我們可以考慮降低一方，或者兩方的純度，來減弱它的沖突。

例如下圖，通過降低紫色的純度，讓畫面看起來更加沉穩(wěn)有力。

下圖中，紅色和綠色的純度都比較低，不但讓畫面色彩更加協(xié)調(diào)，也營(yíng)造出了一種復(fù)古氛圍。

下圖則通過降低藍(lán)色部分的純度，讓鞋子的橙色部分更加突出醒目。

改變明度

明度是指色彩的深和淺，不同的顏色所具有的明度也是不一樣的。明度越高的顏色越明亮輕快，明度越低的顏色越深沉厚重。

在應(yīng)用互補(bǔ)色的時(shí)候，我們改變色彩的明度就可以削減它們的沖撞感，多一份輕松與清新，不那么刻意。

例如下圖，通過提高背景上紅色與綠色的明度，很好的弱化了紅綠之間的沖突，讓整個(gè)畫面顯得輕松活潑，少女感十足。

下面的廣告中，通過提升背景上綠色的明度，讓西瓜瓤的紅色看起來更加鮮艷可口。

下面的廣告則是壓暗了藍(lán)色部分的明度，讓畫面更具商務(wù)金融氣質(zhì)，橙色的數(shù)字看起來特別突出醒目。

中性色調(diào)和

所謂中性色，就是指黑白灰這些無彩色?；パa(bǔ)色鮮艷熱烈，而中性色則剛好相反，它們毫無情緒感，中庸冷靜。在對(duì)比色中加入中性色可以很好的調(diào)和畫面的平衡感。

中性色：

用黑白灰來調(diào)和互補(bǔ)色的方式，被大量的應(yīng)用在各類設(shè)計(jì)中。在服飾穿搭上，無論是時(shí)尚T臺(tái)，還是日常著裝，都能看到這樣的配色方式。

家居裝飾設(shè)計(jì)就更不用說了，高級(jí)灰的理念深入人心。中性色+互補(bǔ)色的配色方式無處不在。

如果我們想要跳躍的顏色沉穩(wěn)就用黑色，如果想要作品透亮就用白色，如果想要保持中性態(tài)度，可以用灰色。本身黑白灰的變化也很多，所以這種調(diào)和后的結(jié)果非常多變。

許多好看的紋理設(shè)計(jì)也用到了這種配色方式。

通過中性色的調(diào)和，既保持了互補(bǔ)色所帶來的豐富的層次感，也避免了互補(bǔ)色之間強(qiáng)烈的沖突。

畫面主體是互補(bǔ)色，背景和文字用中性色：

如果主體是無彩的中性色，則背景可以用互補(bǔ)色來提升畫面視覺沖擊力。

理論部分就講到這，好不好用還得看實(shí)操！

OK，那就動(dòng)手吧！

下面我們通過兩個(gè)不同的案例，看看互補(bǔ)色是如何應(yīng)用的。

案例一

先來個(gè)小案例熱熱身。

第1步，

當(dāng)然是先摳一張素材圖。

第2步，

我們觀察一下素材圖，發(fā)現(xiàn)她身上的亮點(diǎn)在于內(nèi)搭的橙色T恤，把它的色彩提取出來，我們反推出它的互補(bǔ)色藍(lán)色。

小tips：人物身上的橙色的飽和度偏低，所以我們選它的互補(bǔ)色藍(lán)色的時(shí)候，也可以適當(dāng)將飽和度降低一點(diǎn)，這樣整體看起來比較協(xié)調(diào)。

第3步，

將藍(lán)色作為背景色平鋪在后面，與人物形成鮮明的對(duì)比。

第4步，

將文案排版好，在文案上添加一點(diǎn)橙色來呼應(yīng)一下人物。

OK，一個(gè)女裝廣告就完工了！

是不是So easy的感覺？

好了，繼續(xù)下一個(gè)。

案例二

接著我們通過一個(gè)改稿的案例，來看看互補(bǔ)色是怎么應(yīng)用的。

先來看看原圖：

原圖只能說中規(guī)中矩，配色排版都沒有什么大問題。畫面略顯沉悶，而且畫面中空白太多，畫面主體不夠突出，看著沒什么點(diǎn)擊欲。

好了，看下怎么改。

因?yàn)樵瓐D不夠清晰，所以我另找了一雙角度類似的鞋子，先摳出來：

第1步：

原圖的構(gòu)圖方式不夠飽滿，畫面主體并沒有被充分的展示出來。所以我們調(diào)整一下產(chǎn)品的角度，讓它在畫面中比例更高一些。

第2步：

我們看到鞋子上有一片藍(lán)色比較突出，可以把它提取出來，作為畫面的主色調(diào)放到背景上。并給鞋子添加陰影效果，讓它看起來更逼真。

第3步：

給背景添加紋理，豐富一下畫面層次感。然后我們選取背景藍(lán)色的互補(bǔ)橙色，作為點(diǎn)綴色放到裝飾的條形帶元素中。通過互補(bǔ)色的對(duì)比，整個(gè)畫面一下就變得更有活力。

添加上文案，這樣整個(gè)畫面的大體結(jié)構(gòu)就完成了。

如果我們希望畫面的視覺沖擊力更強(qiáng)一些，那么我們可以試試加大互補(bǔ)色的對(duì)比面積，制造更強(qiáng)烈的沖突。

最后，

添加裝飾和文字，讓畫面細(xì)節(jié)更加豐富。

ok，完工。

最后來一張對(duì)比圖：

通過互補(bǔ)色的應(yīng)用，我們成功拯救了一張死氣沉沉的電商海報(bào)！

好了，這期的內(nèi)容就到這。

我們下期見。

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

往期精華文章導(dǎo)讀：

不是美術(shù)生。

5000份作品！要了老命！

噗~不要什么圖都想P，這樣只會(huì)害了你。

-END-

本文章轉(zhuǎn)載自微信公眾號(hào)：龐門正道