想要理清網頁配色的流程和思路，首先我們需要分析一下網頁色彩的組成部分。

我們就以這個網頁作品來舉例。

通常一個網頁給人最直觀的色彩印象就是由主色或主色調決定的，比如這個網頁的藍色就是主色調，因此我們在為網頁配色的時候第一步需要先確定版面的色彩基調。

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

這時候就需要加入與主色或對抗色相似的顏色，以此來呼應主色或對抗色，所以我們稱之為呼應色，比如這個網頁中深淺不一的藍色。主色、對抗色、呼應色這三個組成部分雖然分析起來容易，但執行起來并不簡單，我們需要深入學習一下。

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

主色或主色調最常用的選取思路就是根據品牌調性來選取。

我們可以根據品牌的標志色來確定網頁的主色。比如這個麥當勞的網頁就是使用的這個方法，選擇麥當勞logo的黃色作為整個網頁的主色。

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

第二種選取主色的思路就是根據色彩聯想來選取，也就是不同色彩給人的印象，每種基礎色相都分為具象聯想和抽象聯想，此外還包括一些適用的行業。

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

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

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

綠色能夠讓人聯想到大自然和植物，具有新鮮、年輕、生命、健康的色彩印象。正因為這些色彩印象，使得綠色被大量應用于農業領域和健康相關的主題，并且在教育業、出版業和旅游業也經常使用。

藍色最容易讓人聯想到的就是天空和大海，具有冷靜、嚴肅、公正、莊重等色彩印象。適合航空航天、新聞媒體、水產等領域，當然相信大家最熟知的就是科技和商務。

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

除了有彩色系，無彩色系黑白作為主色在網頁設計中也占有很重要的比重。黑色通常會讓人聯想到夜晚，能夠體現出力量、厚重、神秘的氣質，具有高級格調。適用于藝術、運動、音樂、汽車、時尚類主題。

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

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

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

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

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

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

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

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

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

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

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

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

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

主色和對抗色的選取，我們已經提供了思路，最后就是為主色或對抗色選取相應的呼應色。

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

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

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

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

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

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

這時候就已經出現了對抗關系，也就是玫紅色和藍色的冷暖色對抗。但是現在只看首屏，色彩上并不能區分出誰是主色誰是對抗色，因為它們的面積相當，所以在接下來的設計配色中需要注意就是如何區分出主色或對抗色。

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

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

而這個部分同樣使用左右分割的色彩造型，形成組合神似的色彩呼應。

接下來的配色就比較容易了，只需要按照我們確定好的這個思路執行就可以了。

這兩個按鈕區域依然使用主色和對抗色，其他部分繼續延續之前確定好的色彩關系，

那么這個網頁的配色就完成了。

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

作者:研習設K先生  如翼推薦