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

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

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

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

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

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

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

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

除了品牌標(biāo)志色也可以提取產(chǎn)品的包裝色作為網(wǎng)頁的主色。比如這個網(wǎng)頁的主色藍(lán)色就是選取包裝盒上的顏色。無論是選取品牌標(biāo)志色還是產(chǎn)品包裝色，因為都跟品牌本身色彩高度關(guān)聯(lián)，所以通常不會有原則上的問題，是一個較為安全的主色選取思路。

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

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

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

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

綠色能夠讓人聯(liá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ù)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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