前言：在做設(shè)計(jì)時(shí)你是否會(huì)遇到配色的難題？不知道怎么選定色板、調(diào)和搭配或配色單調(diào)死板，不能給人眼前一亮的感覺(jué)。本文今天從網(wǎng)頁(yè)配色的范疇入手，通過(guò)理論+案例的組合來(lái)講解設(shè)計(jì)配色的思路和流程。原理相通，網(wǎng)頁(yè)配色的思維你掌握后，遇到其他細(xì)分領(lǐng)域也能套用。

想要理清網(wǎng)頁(yè)配色的流程和思路，首先我們需要分析一下網(wǎng)頁(yè)色彩的組成部分。我們就以這個(gè)網(wǎng)頁(yè)作品來(lái)舉例。

通常一個(gè)網(wǎng)頁(yè)給人直觀的色彩印象就是由主色或主色調(diào)決定的，比如這個(gè)網(wǎng)頁(yè)的藍(lán)色就是主色調(diào)，因此我們?cè)跒榫W(wǎng)頁(yè)配色的時(shí)候一步需要先確定版面的色彩基調(diào)。

但是通常情況下一個(gè)網(wǎng)頁(yè)作品只有一個(gè)主色調(diào)是不夠的，所以在確定完主色調(diào)之后還需要搭配與主色相對(duì)抗或抗衡的對(duì)抗色。針對(duì)于這個(gè)網(wǎng)頁(yè)就是這里的黃色，這樣畫(huà)面的色彩就由單一的色彩印象變成了雙色的色彩對(duì)抗，但是純雙色的搭配會(huì)顯得生硬（并不是說(shuō)純雙色搭配不可以），只不過(guò)大部分情況下都需要加入其他色彩來(lái)調(diào)和，也就是進(jìn)一步豐富畫(huà)面的色彩層次。

這時(shí)候就需要加入與主色或?qū)股嗨频念伾?，以此?lái)呼應(yīng)主色或?qū)股?，所以我們稱之為呼應(yīng)色，比如這個(gè)網(wǎng)頁(yè)中深淺不一的藍(lán)色。主色、對(duì)抗色、呼應(yīng)色這三個(gè)組成部分雖然分析起來(lái)容易，但執(zhí)行起來(lái)并不簡(jiǎn)單，我們需要深入學(xué)習(xí)一下。

首先是確定網(wǎng)頁(yè)畫(huà)面的色彩基調(diào)，也就是選取畫(huà)面的主色或主色調(diào)，以此來(lái)傳遞一個(gè)網(wǎng)頁(yè)的直觀主題印象。

主色或主色調(diào)常用的選取思路就是根據(jù)品牌調(diào)性來(lái)選取。

我們可以根據(jù)品牌的標(biāo)志色來(lái)確定網(wǎng)頁(yè)的主色。比如這個(gè)麥當(dāng)勞的網(wǎng)頁(yè)就是使用的這個(gè)方法，選擇麥當(dāng)勞 logo 的黃色作為整個(gè)網(wǎng)頁(yè)的主色。

除了品牌標(biāo)志色也可以提取產(chǎn)品的包裝色作為網(wǎng)頁(yè)的主色。比如這個(gè)網(wǎng)頁(yè)的主色藍(lán)色就是選取包裝盒上的顏色。無(wú)論是選取品牌標(biāo)志色還是產(chǎn)品包裝色，因?yàn)槎几放票旧砩矢叨汝P(guān)聯(lián)，所以通常不會(huì)有原則上的問(wèn)題，是一個(gè)較為安全的主色選取思路。

二種選取主色的思路就是根據(jù)色彩聯(lián)想來(lái)選取，也就是不同色彩給人的印象，每種基礎(chǔ)色相都分為具象聯(lián)想和抽象聯(lián)想，此外還包括一些適用的行業(yè)。

提到紅色，通常會(huì)讓人聯(lián)想到火焰、血液、花朵等等，或者抽象聯(lián)想比如熱情、興奮、暴躁這些。紅色的適用領(lǐng)域很廣，無(wú)論是服裝、餐飲還是文體、時(shí)尚幾乎都能夠見(jiàn)到大量紅色的應(yīng)用。

橙色容易讓人想到的就是橙子或橘子、果汁，或者晚霞、夕陽(yáng)等等，抽象聯(lián)想有溫暖、積極向上、歡快活潑等意象。橙色在餐飲行業(yè)應(yīng)用的比較多，其次就是跟兒童相關(guān)的設(shè)計(jì)。

黃色能夠讓人聯(lián)想到陽(yáng)光、香蕉、檸檬、黃金等等，抽象聯(lián)想有活潑、開(kāi)朗、明亮等。黃色和橙色一樣也被大量應(yīng)用于餐飲行業(yè)，還有就是和兒童、可愛(ài)相關(guān)的主題，同時(shí)黃色也適用于文化和時(shí)尚類設(shè)計(jì)。

綠色能夠讓人聯(lián)想到大自然和植物，具有新鮮、年輕、生命、健康的色彩印象。正因?yàn)檫@些色彩印象，使得綠色被大量應(yīng)用于農(nóng)業(yè)領(lǐng)域和健康相關(guān)的主題，并且在教育業(yè)、出版業(yè)和旅游業(yè)也經(jīng)常使用。

藍(lán)色容易讓人聯(lián)想到的就是天空和大海，具有冷靜、嚴(yán)肅、公正、莊重等色彩印象。適合航空航天、新聞媒體、水產(chǎn)等領(lǐng)域，當(dāng)然相信大家熟知的就是科技和商務(wù)。

紫色的色彩屬性比較特殊和單一，具有華麗、高貴、神秘、憂郁的浪漫氣息。因此在情感、美容、時(shí)尚、動(dòng)漫等領(lǐng)域比較常用。

除了有彩色系，無(wú)彩色系黑白作為主色在網(wǎng)頁(yè)設(shè)計(jì)中也占有很重要的比重。黑色通常會(huì)讓人聯(lián)想到夜晚，能夠體現(xiàn)出力量、厚重、神秘的氣質(zhì)，具有格調(diào)。適用于藝術(shù)、運(yùn)動(dòng)、音樂(lè)、汽車(chē)、時(shí)尚類主題。

白色可以說(shuō)是網(wǎng)頁(yè)配色中多使用的一個(gè)背景主色。具有潔凈、樸素、知性、冷淡的氣質(zhì)，在留白極簡(jiǎn)風(fēng)格的設(shè)計(jì)中格外重要，并且當(dāng)它作為網(wǎng)頁(yè)背景主色時(shí)，能夠很好的統(tǒng)一網(wǎng)頁(yè)中的信息和元素。雖然這里也列舉了一些白色適用的行業(yè)，但其實(shí)白色幾乎適用于所有行業(yè)，具體還要看網(wǎng)頁(yè)想要傳遞什么樣的色彩印象。

此外還可以根據(jù)品牌或產(chǎn)品的受眾偏好來(lái)選取主色。需要注意的是，這些選取主色的思路并非都是分開(kāi)的，它們都是可以相互結(jié)合來(lái)作為參考的。

比如從性別偏好上來(lái)看，男性通常比較容易接受藍(lán)色、青色、綠色等冷色，以及黑色和灰色等無(wú)彩色。

而在色調(diào)的偏好上，男性更偏向于淡濁色調(diào)、濁色調(diào)和暗色調(diào)的色彩。

與男性相反，女性在色相偏好上更喜好紅、橙、紫、粉等暖色。

而在色調(diào)上女性更傾向于淡色調(diào)、明色調(diào)和純色調(diào)等較為艷麗的色彩。

當(dāng)我們確定完主色之后，接下來(lái)就是根據(jù)主色來(lái)選取對(duì)抗色，對(duì)抗色可以是輔助色，也可以是點(diǎn)綴色。

選取對(duì)抗色直接有效的方式就是使用一對(duì)互補(bǔ)色，因?yàn)榛パa(bǔ)色的色相對(duì)比為強(qiáng)烈，所以搭配在一起對(duì)抗效果也為明顯。當(dāng)然對(duì)比強(qiáng)度其次的對(duì)比色也是可以使用的，而其他的同類色、近似色等由于過(guò)于接近，搭配在一起并不能形成很好的對(duì)抗效果。

二種形式就是冷暖色對(duì)抗，冷暖色對(duì)抗和互補(bǔ)色對(duì)抗會(huì)有重合的部分，但是它的局限性要更小，不像尋找互補(bǔ)色那么嚴(yán)格，只要選擇一冷一暖來(lái)搭配，就可以形成很好的對(duì)抗色關(guān)系。

如果只想讓畫(huà)面保持一種色彩印象，這時(shí)候就可以使用深淺色或濃淡色的對(duì)抗，也就是在主色的基礎(chǔ)上，通過(guò)調(diào)整純度和明度來(lái)得到相應(yīng)的色彩，這樣既能夠豐富畫(huà)面的色彩層次，同時(shí)又能形成和諧的配色效果。

接著是有彩色與無(wú)彩色的對(duì)抗，如果主色是大面積無(wú)彩色黑白灰的話，那么網(wǎng)頁(yè)上的元素就可以選擇有彩色來(lái)搭配；相反如果主色是大面積有彩色的話，那么其余元素就可以選擇無(wú)彩色，這樣就會(huì)有對(duì)比，而且不至于混亂。

還有就是花色與純色的對(duì)抗。比如這個(gè)網(wǎng)頁(yè)為了表現(xiàn)出靈動(dòng)活潑的畫(huà)面氛圍，元素使用了不同的色相以及富有變化的造型，整體就形成了花色的印象，而背景使用純色就會(huì)形成很好的動(dòng)靜對(duì)比，試想一下，如果背景也是花色，那么這個(gè)頁(yè)面必然會(huì)很混亂。

如果主色和對(duì)抗色的面積相當(dāng)，那么就是雙主色的作品，如果你想保持主色的地位不變，就需要通過(guò)面積的大小來(lái)調(diào)節(jié)，這樣既有色彩的對(duì)抗關(guān)系，同時(shí)又有很好的主次關(guān)系。

主色和對(duì)抗色的選取，我們已經(jīng)提供了思路，就是為主色或?qū)股x取相應(yīng)的呼應(yīng)色。

首先就是從色相上形成呼應(yīng)，這個(gè)網(wǎng)頁(yè)的主色是藍(lán)色，但是主色并非都是大面積的背景色，也可以是這種在分散的元素上不斷地使用主色形成呼應(yīng)和強(qiáng)化。當(dāng)然對(duì)抗色也可以有呼應(yīng)，這就好比一部電影，要有正派和反派，但是如果正反兩派只有一個(gè)人顯然是不夠的，它們都需要一些小弟。

如果是這種色相較多的情況就要考慮到色調(diào)，將色相不同的顏色調(diào)整成相似的色調(diào)，雖然色相不同，但是整體上也會(huì)產(chǎn)生和諧的效果。

色彩設(shè)計(jì)無(wú)法脫離設(shè)計(jì)本身而存在，所以設(shè)計(jì)的形式也是需要注意的一點(diǎn)，比如組合神似的色彩呼應(yīng)。它有兩種情況，一種是固定色彩組合，固定造型，比如這個(gè)網(wǎng)頁(yè)，它的單元型是一樣的保持不變，變的只是文字信息和圖片，再結(jié)合紅色的圓點(diǎn)，整體上就會(huì)給人統(tǒng)一的印象。

還有一種形式就是固定色彩組合，但是造型不固定，比如這個(gè)網(wǎng)頁(yè)，它的單元型造型是不一樣的，靈活多變，但是藍(lán)色和橙色的這個(gè)組合并沒(méi)有變，通過(guò)不斷的重復(fù)形成呼應(yīng)效果。

后，我們用一個(gè)模擬的案例來(lái)演示一下。首先是導(dǎo)航欄和首屏，我們先將形象圖片置入進(jìn)來(lái)，然后是文字的編排。因?yàn)閳D片尺寸大小的關(guān)系首屏被一分為二，所以左側(cè)的背景我們就可以填充顏色，而首先需要考慮的就是主色。

針對(duì)于這個(gè)美瞳品牌我們事先進(jìn)行了調(diào)研，它的 logo 是黑色的，產(chǎn)品包裝有很多種顏色，沒(méi)有具體的色彩傾向。所以我們需要根據(jù)色彩聯(lián)想和受眾偏好來(lái)決定它的主色，當(dāng)然這個(gè)主色是有很多選擇的，而我這里就選擇了一款偏向女性主題的玫紅色。

這時(shí)候就已經(jīng)出現(xiàn)了對(duì)抗關(guān)系，也就是玫紅色和藍(lán)色的冷暖色對(duì)抗。但是現(xiàn)在只看首屏，色彩上并不能區(qū)分出誰(shuí)是主色誰(shuí)是對(duì)抗色，因?yàn)樗鼈兊拿娣e相當(dāng)，所以在接下來(lái)的設(shè)計(jì)配色中需要注意就是如何區(qū)分出主色或?qū)股?/p>

這里同樣還是使用這兩個(gè)顏色，左右位置互換，強(qiáng)化對(duì)抗關(guān)系，同時(shí)，這里又加入了色彩面積大小的對(duì)抗。但進(jìn)行到了這里其實(shí)還是沒(méi)法分辨出主色，畫(huà)面依然是雙主色的形式。

下面是具體產(chǎn)品的介紹以及模特的展示部分，針對(duì)于這部分的配色，我們就可以使用深淺色、濃淡色的對(duì)抗，而為了加強(qiáng)主色的地位，我們選擇了主色的深淺色、濃淡色，而呼應(yīng)色上使用的是色相一致的色彩呼應(yīng)。

而這個(gè)部分同樣使用左右分割的色彩造型，形成組合神似的色彩呼應(yīng)。接下來(lái)的配色就比較容易了，只需要按照我們確定好的這個(gè)思路執(zhí)行就可以了。

這兩個(gè)按鈕區(qū)域依然使用主色和對(duì)抗色，其他部分繼續(xù)延續(xù)之前確定好的色彩關(guān)系，那么這個(gè)網(wǎng)頁(yè)的配色就完成了。

我們來(lái)回顧一下這個(gè)案例，順便總結(jié)一下本期教程的知識(shí)點(diǎn)。首先主色的選取上我們結(jié)合色彩聯(lián)想和受眾偏好選擇了一款玫紅色。其次對(duì)抗色的選取思路是以首屏圖片為依據(jù)提取的一款藍(lán)色，從而形成冷暖色的對(duì)抗關(guān)系。而為了強(qiáng)化主色其他色彩選擇了主色的深淺色、濃淡色。版面中的白色文字和白色塊與背景又形成了有彩色與無(wú)彩色的對(duì)抗增加了透氣感。圖片與背景自然而然地形成了花色與純色的對(duì)抗。而整個(gè)網(wǎng)頁(yè)雖然使用的色彩數(shù)量不多，但是有色彩面積大小的對(duì)比，增加了變化。呼應(yīng)色上由于色相數(shù)量只有兩種，所以并沒(méi)有刻意去統(tǒng)一它們的色調(diào)，主要還是重復(fù)使用相同的色相來(lái)形成色相一致的色彩呼應(yīng)以及組合神似的色彩呼應(yīng)。

本期教程就先到這里，感謝大家的耐心觀看，希望這個(gè)網(wǎng)頁(yè)配色的思路能夠幫助到大家。

作者 | 研習(xí)設(shè)