@研習(xí)設(shè)K先生?：說到色彩或配色，其實(shí)無論是方法還是理論都可以算作是規(guī)律的總結(jié)，但是同樣的規(guī)律對于有的人來說吸收起來就比較容易，而對于有的不會(huì)靈活變通的人就只能自己在那研究來研究去，最后還是丈二的和尚摸不著頭腦。不過沒關(guān)系大家也不用灰心，因?yàn)榻裉煳覀円獮榇蠹抑v解的這個(gè)配色規(guī)律非常簡單，簡單到什么程度呢？可以說只要你會(huì)數(shù)數(shù)，能從一數(shù)到三就可以，到底是什么內(nèi)容呢？就是從色彩的數(shù)量著手進(jìn)行配色訓(xùn)練。

相信大家都有過這樣的經(jīng)歷，就是上學(xué)的時(shí)候?qū)W習(xí)英語，最開始學(xué)的是什么？就是先從二十六個(gè)英文字母學(xué)起，因?yàn)橛⑽淖帜甘沁@個(gè)語言的根基。

△ 字母

然后是什么呢？就是由這些字母組成的單詞，也就是讓我們背單詞，相信大家都有過這個(gè)痛苦經(jīng)歷。

△ 單詞

最后再由單詞組成句子，就是這樣一個(gè)順序。

△ 句子

再舉個(gè)例子，比如我們學(xué)習(xí)平面構(gòu)成，最開始都是先學(xué)點(diǎn)，然后由點(diǎn)到線，最后再由線到面。

再比如我們賴以生存的地球上，有動(dòng)物、植物、礦物質(zhì)、山川河流等等，根本說不完。

但是它們能夠和諧共處，這當(dāng)中一定有共同的因素，全世界的科學(xué)家都在找這個(gè)東西，最先找到的是原子，一切都是由原子構(gòu)成的，但是很快就被打破了，原子一打破，里面還有更小的東西。

可是我們的老子就高明多了，它只講四句話：道生一，一生二，二生三，三生萬物，以后就不講了，因?yàn)槭篱g萬物都是這么發(fā)展出來的，所以不需要講。

運(yùn)用到配色中也是同樣的道理，比如我們可以由一個(gè)色彩，延伸出兩個(gè)色彩，再由延伸出來的色彩產(chǎn)生更多的色彩，就像裂變一樣。因?yàn)槊Ｃ６嗟纳饰覀兪遣豢赡茉诙虝r(shí)間內(nèi)研究透的，那我們就抓住配色的重點(diǎn)，就是色彩的數(shù)量。

雖然配色從理論上來說并沒有數(shù)量限制，但是你只要能將單色配色、雙色配色和三色配色做好，其他四色、五色即使再多的色彩，只要掌握一定的技巧和規(guī)律都能夠輕松駕馭，因?yàn)樗母驮硎遣蛔兊摹?/p>

單色

首先我們先來看單色配色，單色配色并不是狹義上的只使用一個(gè)顏色，而是廣義上的單色，使用起來比較簡單，并且很容易產(chǎn)生和諧的配色效果。

? 1. 有彩色+黑白灰

最明顯、最直接的單色配色就是一個(gè)有彩色加上黑白灰。可能有的人會(huì)想，這怎么能算單色，明明好幾個(gè)顏色呢？

因?yàn)楫?dāng)有彩色作為背景的時(shí)候，多數(shù)情況下上方的文字色都是無彩色，所以這種情況的無彩色可以忽略不計(jì)，不算做顏色，畢竟這個(gè)畫面給人最強(qiáng)烈的感覺就是有彩色的屬性，黑白灰只是為了讓人識別信息。

比如這個(gè)海報(bào)就是有彩色粉色作為背景，上方配上黑色的文字，非常簡單直接。

這個(gè)海報(bào)就是有彩色藍(lán)色作為背景色搭配黑白灰。

這個(gè)海報(bào)相反是以灰色為背景，上方的元素使用了有彩色加白色。

? 2. 有彩色+不同純度

第二種形式就是一個(gè)有彩色搭配這個(gè)顏色的不同純度。

這種同色相不同純度的搭配整體效果非常和諧，但是需要注意的一點(diǎn)就是純度的跨度值不能太接近，因?yàn)槿绻咏脑捨淖值淖R別度就會(huì)降低。

這個(gè)海報(bào)的背景色使用的是純度較高的粉色，上方疊加的文字使用的就是降低純度之后的顏色。

這個(gè)海報(bào)的背景色就是由四個(gè)由深到淺不同純度的顏色形成的色塊，整體為藍(lán)色調(diào)。

這個(gè)海報(bào)的背景是純度較低的綠色，上方梯形的顏色純度相對要高一些。

? 3. 有彩色+不同明度

第三種形式的單色配色就是有彩色和它自身不同明度的搭配。

這種搭配效果跟同一顏色的不同純度看上去差不多，也是需要注意兩種色彩之間的明度關(guān)系，不能過小以免影響識別。

這個(gè)海報(bào)上層的色彩使用的就是明度高的黃色，下層帶肌理的黃色明度偏低。

這個(gè)海報(bào)中人物的剪影雖然帶有微弱的漸變，但是整體還是明度較低的，而文字的藍(lán)色明度較高。

這個(gè)海報(bào)的背景色是低明度的深綠色，上方的信息除了非常少的白色就是明度較高的綠色。

? 4. 有彩色+不同色調(diào)

還有一種形式就是有彩色加不同色調(diào)。在具體配色的時(shí)候通常不需要去單獨(dú)調(diào)整純度明度，可以直接調(diào)整色調(diào)，更加方便快捷。

使用同一個(gè)色相的不同色調(diào)往往操作性更強(qiáng)，因?yàn)橄拗票容^少可能性會(huì)更多。可以根據(jù)版面的配色效果來調(diào)整純度和明度，但是需要注意的是具體使用什么色相，這個(gè)要根據(jù)你的設(shè)計(jì)內(nèi)容和氣質(zhì)來決定。

這個(gè)海報(bào)就屬于單色配色的形式，整體為綠色調(diào)，通過不同色調(diào)來豐富畫面的層次。

這個(gè)海報(bào)同樣也是，插圖和圖片使用的都是黃色的不同色調(diào)。

這個(gè)海報(bào)單色的效果更明顯，使用的是藍(lán)色的不同色調(diào)。

雙色

接著我們再來看雙色，配色難度相對來說提升了一個(gè)等級。

? 1. 黑白

最簡單的雙色就是白加黑，相信很多人在做設(shè)計(jì)的時(shí)候通常都是先用黑白來代替，最后再配色。

黑白沒有太多的情感屬性，更多的就是白色和黑色自身的特質(zhì)，至于整體的感覺是什么，那就要看是黑色的面積大一些還是白色的面積大一些了。

這個(gè)海報(bào)就是黑底白字，上方的元素通過黑白來展現(xiàn)層次，沒有使用其他顏色。

這個(gè)海報(bào)也是黑色背景，人物圖片也處理成黑色調(diào)，結(jié)合白色塊和交替的黑白文字來豐富畫面。

這個(gè)海報(bào)使用的就是純白色背景，上方黑色文字，可以說非常純粹了。

這個(gè)和上一個(gè)差不多也是白底黑字，只不過文字的數(shù)量比較多而已。

? 2. 同類色

而有彩色的雙色可以根據(jù)色相關(guān)系來劃分，如果大家看過我們之前的教程應(yīng)該都耳熟能詳了。

對比最弱的雙色搭配就是同類色，也就是在色相環(huán)上距離15°左右的顏色。雖然是最弱的雙色搭配，但是可以通過拉開純度和明度的差異來增強(qiáng)對比。

這個(gè)海報(bào)就是同類色雙色搭配，背景色為橙黃色，上方人物圖形為黃色。

這個(gè)海報(bào)也是同類色雙色搭配，但是背景看上去跟上方的深色對比很強(qiáng)，這是因?yàn)檎{(diào)整了純度和明度。

這個(gè)海報(bào)的文字色并沒有使用同一個(gè)色相的不同色調(diào)，而是在色相上稍微有些差異，也就是同類色。

? 3. 近似色

比同類色對比稍強(qiáng)的雙色搭配就是近似色，也就是在色相環(huán)上位置大約在45°左右的顏色。

近似色所產(chǎn)生的配色效果相對來說也是比較和諧統(tǒng)一的。

這個(gè)海報(bào)的背景色和上方的線條色使用的就是近似色，只不過線條的黃色降低了明度增加了對比，但是線條的形態(tài)又適當(dāng)?shù)臏p弱了對比。

這個(gè)海報(bào)的背景色是橙色，上方的文字色是黃色，保證了識別度的同時(shí)又讓整體的效果協(xié)調(diào)統(tǒng)一。

這個(gè)海報(bào)和上一個(gè)海報(bào)類似，也是紅黃兩色的搭配，但是這里又使用了不同色調(diào)。

? 4. 中差色

中差色，也就是選取在色相環(huán)上位置大約在90°左右的兩個(gè)色彩。

中差色的對比強(qiáng)度位于中間位置，屬于比較中性、安全的雙色搭配，既有足夠的色彩對比，又不會(huì)過于刺激強(qiáng)烈，還具有一定的和諧性。

這個(gè)海報(bào)中圖形的綠色和背景的藍(lán)色就屬于中差色對比，上方文字的深藍(lán)色是在背景藍(lán)色的基礎(chǔ)上通過增加純度降低明度所得到的，這也是一個(gè)雙色配色的小技巧。

這個(gè)海報(bào)的配色也是中差色對比，在大面積深藍(lán)色背景上使用綠色，由于是中差色對比并且還有無彩色白色做調(diào)和讓整個(gè)版面的配色美觀協(xié)調(diào)。

這個(gè)海報(bào)也是藍(lán)色和綠色的中差色。其實(shí)大家不難發(fā)現(xiàn)，并不是色彩越多就越好，只要配色合理都可以得到很美觀的效果。

? 5. 對比色

對比色，也就是在色相環(huán)上大約120°左右的色彩。

對比色的對比效果強(qiáng)烈，屬于使用較多的雙色搭配，最常見的就是紅配綠，還有就是紅配藍(lán)也是典型的對比色。

這個(gè)海報(bào)的標(biāo)題文字使用的就是對比色，只不過調(diào)整了純度和明度。所以大家不要一想到對比色就是那種大紅大綠的，完全可以通過調(diào)整來減弱對比。

這個(gè)海報(bào)通過紫紅色和藍(lán)色的對比色關(guān)系以及相等的面積對比來強(qiáng)調(diào)色彩印象。

這個(gè)海報(bào)同樣也是使用了對比色。

? 6. 互補(bǔ)色

最后是對比最強(qiáng)的雙色搭配，也就是互補(bǔ)色配色，互補(bǔ)色在色相環(huán)上的距離大約在180°左右。

互補(bǔ)色的對比效果最強(qiáng)烈，形成的配色效果非常刺激并且具有沖擊力，合理的運(yùn)用在相關(guān)的設(shè)計(jì)內(nèi)容上可以極大的引起注意力，給人眼前一亮的感覺。

這個(gè)海報(bào)使用的配色就是紅色和青色的互補(bǔ)色對比，但是降低了純度，背景的白色空間起到了緩沖作用，互補(bǔ)色的疊印又豐富了畫面的層次。

這個(gè)海報(bào)使用的雙色也是互補(bǔ)色關(guān)系，通過純度和明度的調(diào)整也可以產(chǎn)生很和諧的效果。

這個(gè)海報(bào)的圖片色是黃色，上方的文字色使用的是藍(lán)色，也是一種互補(bǔ)關(guān)系。

三色

雙色之后再升一個(gè)難度就是三色，三色搭配也有很多種，這里總結(jié)了四種比較具有代表性的。

? 1. 黑白灰

首先第一種就是黑、白、灰。理論上來講黑白灰的配色可以看作是單色，也可以看作是雙色，也可以看成三色，都對，為了便于大家理解這里給它們劃分的更具體一些。

如果說黑白配色給人的印象是強(qiáng)烈、直接，那么黑白灰的配色會(huì)緩和許多，給人更多的是一種層次感和遞進(jìn)關(guān)系。

這個(gè)海報(bào)整體分為三個(gè)層次，最底層是黑色，然后是灰色，最上層是白色。

這個(gè)海報(bào)跟上一個(gè)差不多也是黑白灰配色，只不過背景換成了白色。

這個(gè)海報(bào)的黑白灰不像前兩個(gè)那么直接，而是通過圖形和圖像的色調(diào)來表現(xiàn)的，但是整體上也是黑白灰配色。

? 2. 近似三色

有彩色的第一種三色形式，近似三色。

顧名思義，近似三色就是三個(gè)近似色組合在一起的色彩搭配，比如畫面中的這幾組配色都是近似三色。

這個(gè)海報(bào)的背景是綠色，上方插圖的顏色使用了紅色和黃色，整體的配色屬于近似三色。

這個(gè)海報(bào)中的圖形使用的也是近似三色，既能很好的區(qū)分色塊，同時(shí)又能達(dá)成整體協(xié)調(diào)統(tǒng)一的效果。

這個(gè)海報(bào)屬于純文字版式，通過色塊來增加變化，使用的配色類型也是近似三色。

? 3. 對比三色

對比三色，也是使用比較多的三色搭配。

三個(gè)對比色組合在一起對比效果強(qiáng)烈鮮明，通常給人的第一印象很搶眼。但是當(dāng)色彩使用數(shù)量從三色往上開始，我們就要注意一個(gè)我們之前講過的色彩概念了，就是調(diào)和，因?yàn)閷Ρ葟?qiáng)烈，所以色彩的純度和明度就顯得格外重要。

這個(gè)海報(bào)中使用的三個(gè)顏色就是典型的對比三色，紅綠藍(lán)。

這個(gè)海報(bào)也是紅綠藍(lán)的對比三色，但是跟上一個(gè)海報(bào)相比色調(diào)要更亮一些。

這個(gè)海報(bào)有些復(fù)古的感覺，顏色上也是使用的對比三色，有些鬼魅的感覺，跟主題也是相符的。

? 4. 分裂互補(bǔ)

前面我們講過互補(bǔ)色就是在色相環(huán)上距離180°左右的色彩，而分裂補(bǔ)色就是一個(gè)顏色和它對應(yīng)的補(bǔ)色兩側(cè)相鄰的顏色搭配。

這種配色既有補(bǔ)色的對比同時(shí)又通過分裂出的補(bǔ)色來緩和這種對比，可以起到適當(dāng)?shù)闹泻妥饔茫ǔＥ渖Ч己芎谩?/p>

這個(gè)海報(bào)使用的三個(gè)顏色就是分裂補(bǔ)色，整體色調(diào)統(tǒng)一配色效果非常和諧。

這個(gè)海報(bào)的背景使用了灰色，在上方使用了分裂補(bǔ)色的有彩色，通過面積的分布來做調(diào)和。

這個(gè)海報(bào)雖然使用了不同色調(diào)，紅色的純度和明度比較高，但是整體分裂補(bǔ)色的配色特征還是有的。

關(guān)于單色、雙色、三色的幾種最常見的形式已經(jīng)介紹完了，這些都是最基本、最實(shí)用的方法。至于四色、五色，甚至更多的色彩，其實(shí)已經(jīng)跟色相的關(guān)系不大了，更多的是使用色彩調(diào)和，通過色相的對比以及調(diào)和的緩沖來達(dá)成協(xié)調(diào)美觀的配色效果。

案例演示

最后我們來看看案例演示。

這次我們設(shè)計(jì)一個(gè)品牌時(shí)裝的網(wǎng)頁首屏，首先創(chuàng)建版面拉出網(wǎng)格，這里我們使用的十六欄網(wǎng)格。

先用黑白灰創(chuàng)建版面，填充色塊。

然后將文字內(nèi)容編排到版面上方，根據(jù)網(wǎng)格約束擺放位置，提取關(guān)鍵信息放大處理編排到版面下方。

因?yàn)橐褂玫綀D片，所以要留出圖片的空間，先用色塊來代替大致的擺放位置。

然后向下移做一些出血處理，并且增加圖片的大小對比，打破版面呆板的布局。

將圖片填充到色塊位置。

下方底層文字由于被圖片遮擋影響識別，所以我們可以在空白處做一個(gè)重復(fù)編排。

最后將其余信息依次編排進(jìn)來，這個(gè)版面就設(shè)計(jì)完成了，這個(gè)黑白效果還是不錯(cuò)的。這里教大家一個(gè)小技巧，就是你在設(shè)計(jì)的時(shí)候先用黑白灰來填充顏色，如果這個(gè)版面在黑白灰的狀態(tài)下看上去都很美觀，那么其實(shí)你之后的配色只要不是太差基本上都不會(huì)出問題，而如果你的版面在黑白灰的狀態(tài)下看上去都很別扭，那么一方面可能是色彩面積和布局的問題，另一面可能就是版式的問題，這個(gè)小技巧可以幫助大家做自我檢查。

版式我們設(shè)計(jì)完了，接下來我將本期教程中的所有配色方法都用在了這個(gè)版式上。

? 1. 單色應(yīng)用

首先是單色中的第一種方法，有彩色加黑白灰。

有彩色加不同純度：

有彩色加不同明度：

有彩色加不同色調(diào)：

? 2. 雙色應(yīng)用

然后我們再來看雙色，首先是黑白配色。

然后是同類色：

近似色：

中差色：

對比色：

互補(bǔ)色：

? 3. 三色應(yīng)用

最后是三色，首先是黑白灰。

然后是近似三色：

接下來是對比三色：

最后是分裂補(bǔ)色：

這就是我們所謂的彩虹稿，開個(gè)玩笑，不過大家自己在做配色練習(xí)的時(shí)候，還是有必要多去嘗試的。至于在實(shí)際工作中具體選擇什么樣的配色，還要根據(jù)色相的氣質(zhì)來決定，比如我設(shè)計(jì)的這個(gè)頁面是關(guān)于女性和春裝的，所以綠色、粉色、黃色都是可以的。

本期教程到這里就結(jié)束了，主要為大家講解了配色訓(xùn)練的一個(gè)流程，就是從色彩的數(shù)量出發(fā)，先從單色開始練習(xí)，然后是雙色，最后是三色，如果這幾種數(shù)量的配色沒問題的話，下個(gè)階段就可以練習(xí)更多的配色，四色、五色甚至是多色。其實(shí)無論是多少種顏色只要你了解了色彩之間的關(guān)系以及配色的規(guī)律，那么在你眼中都是一樣的，并且在自己練習(xí)的過程中也可以收集相關(guān)的設(shè)計(jì)作品，長此以往的做這些收集和配色訓(xùn)練，你的配色能力一定會(huì)有所提高。

歡迎關(guān)注研習(xí)設(shè)的微信公眾號：「Yanxishe2017」