我依然清楚地記得老師把一些色彩明亮的繪畫(huà)放在幼小而充滿好奇的我面前的情景，那是我生命中的第一堂色彩課。我依然能回憶起，當(dāng)我第一次把一種“主色”與一種“二級(jí)色”混合在一起時(shí)，自己有多么開(kāi)心。我天真地猜測(cè)，如果兩種不同的顏色混合時(shí)便可以得到另一種鮮艷的新色彩，那么把所有的色彩都混合在一起，產(chǎn)生的色彩豈不是更漂亮嗎！但是當(dāng)我把我所有能用上的色彩都混雜在一塊的時(shí)候，我卻失望地發(fā)現(xiàn)，無(wú)論我如何努力，我能看到的只是一團(tuán)被我叫做“大亂燉”的模糊色塊。

多年以后,作為一個(gè)剛剛?cè)胄械脑O(shè)計(jì)師，我又經(jīng)歷了一次同樣的事。對(duì)一切都充滿渴求的我似乎又不可避免地掉入了一個(gè)陷阱，一個(gè)“用色過(guò)多”或“胡亂配色”的陷阱，其結(jié)果，像童年時(shí)一樣，我得到的只是一鍋“大亂燉”。 

從那時(shí)候起，我便開(kāi)始有意識(shí)地學(xué)習(xí)與網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的配色知識(shí)，我也了解到了許多有趣的色彩理論常識(shí)。我認(rèn)真地讀了對(duì)色彩，色調(diào)，陰影，強(qiáng)度，飽和度，亮度等一系列概念的介紹，對(duì)近似色，單相色，三角型配色，互補(bǔ)型配色和綜合配色技巧也都做了一番研究。 

RGB基本配色圖

但在最開(kāi)始，由于沒(méi)有實(shí)踐做基礎(chǔ)，這些純理論的東西對(duì)我做網(wǎng)頁(yè)設(shè)計(jì)并沒(méi)有提供太大幫助。直到后來(lái)我自己親自嘗試為網(wǎng)頁(yè)選擇配色方案時(shí)，從一步步的教訓(xùn)和經(jīng)驗(yàn)中，我才逐漸真正理解了我所學(xué)習(xí)的那些色彩理論知識(shí)。 

在這個(gè)過(guò)程中，我總結(jié)出6條網(wǎng)頁(yè)配色的“安全守則”，如果時(shí)光能倒流，我真希望自己一開(kāi)始就懂得這些準(zhǔn)則。對(duì)于設(shè)計(jì)新手而言，一套完整的色彩理論知識(shí)可能并不是他們最需要的。一些更具體，指導(dǎo)性更強(qiáng)的“原則”或許比單純的理論探討更有實(shí)際意義。 

你可以把我在這篇文章中分享的這6條“安全守則”作為理解網(wǎng)頁(yè)配色的基礎(chǔ)材料。它們并非什么至高原則，因?yàn)樵谀阕约旱脑O(shè)計(jì)生涯中，你獲得的配色經(jīng)驗(yàn)也許會(huì)與我的完全不同。相反,它們只是一個(gè)起點(diǎn),一些教你如何在投身設(shè)計(jì)行業(yè)的初始階段成功地生存下來(lái)，而不致于讓自己的配色淪為“大亂燉”的經(jīng)驗(yàn)之談。

1 配色是綠葉而非紅花

網(wǎng)頁(yè)設(shè)計(jì)中最為重要的一條原則便是：無(wú)論一個(gè)設(shè)計(jì)本身如何巧妙，耗費(fèi)了你多少心血與心思，它的終極目的依然只是作為陪襯來(lái)抬高真正的主角--內(nèi)容。因此你的網(wǎng)頁(yè)設(shè)計(jì)不應(yīng)該比要呈現(xiàn)的內(nèi)容本身還要“搶眼”。設(shè)計(jì)應(yīng)立足于背景之中，其功能是彰顯網(wǎng)站前景中的內(nèi)容。

巧妙的配色會(huì)將用戶的視線引向網(wǎng)頁(yè)中的圖像

而粗糙的配色則會(huì)將用戶的注意力從內(nèi)容中引開(kāi)---別把這番話當(dāng)戲言,在充滿荒唐的網(wǎng)絡(luò)時(shí)代，真實(shí)的情況就是如此。

在網(wǎng)頁(yè)設(shè)計(jì)中，很多設(shè)計(jì)師都習(xí)慣于將設(shè)計(jì)同內(nèi)容分離看待，他們的設(shè)計(jì)都是在Photoshop或Sketch中單獨(dú)完成的。如果在做網(wǎng)站設(shè)計(jì)時(shí)絲毫不考慮它與內(nèi)容的關(guān)聯(lián)，很可能你的設(shè)計(jì)非常優(yōu)秀，單獨(dú)拿出來(lái)也被客戶所認(rèn)可，但一旦放在網(wǎng)站中，卻會(huì)令用戶感到不舒服。在真實(shí)的案例中，一個(gè)網(wǎng)站的設(shè)計(jì)與內(nèi)容是密不可分的，如果沒(méi)有了內(nèi)容，許多貌似精巧的網(wǎng)站設(shè)計(jì)往往只剩下一個(gè)空架子。

一種可行的方案是，在你開(kāi)始著手設(shè)計(jì)時(shí)，先選取一個(gè)與你要呈現(xiàn)的內(nèi)容接近的模板，可以用設(shè)計(jì)軟件，也可以用代碼，然后整個(gè)后續(xù)的設(shè)計(jì)都以它中心展開(kāi)。如果網(wǎng)站中包含風(fēng)格較為特別的照片或圖像時(shí)，這種方法尤其值得一試，這樣才能保證你最終的設(shè)計(jì)與這些圖像在基調(diào)上保持和諧一致。請(qǐng)把要呈現(xiàn)的網(wǎng)站內(nèi)容想象成一個(gè)獨(dú)特的生命，而你是一個(gè)裁縫，設(shè)計(jì)就是要為他量體裁衣，做出一套最合身的裝束。

2從簡(jiǎn)單的灰度色開(kāi)始

理論上網(wǎng)站主背景和文字有無(wú)限多種顏色可供選擇。但我的建議是從最掌握最易學(xué)的配色開(kāi)始，具體來(lái)說(shuō)就是白色和/或淺灰色的背景搭配深灰色的文字。

如果考察一下當(dāng)今的網(wǎng)站，模板或主題，我們可以發(fā)現(xiàn)這些網(wǎng)站中的大多數(shù)使用的正是深灰色的字體和白色/淺灰色的背景，這樣做是經(jīng)過(guò)精心考慮的。這樣的配色方案會(huì)為用戶提供最佳的可讀性，并且能使文字和圖象以良好的效果凸顯在前景之中。

作為示例，讓我們來(lái)看幾個(gè)以基本灰度色做背景的網(wǎng)站：

一般來(lái)講設(shè)計(jì)師應(yīng)避免把深黑色用作字體顏色，因?yàn)橄啾容^而言，深灰色的文字給用戶的閱讀體驗(yàn)更好一些。從 #333333 到 #666666 便是個(gè)不錯(cuò)的范圍。 

至于網(wǎng)站的背景色彩,全白#FFFFFF對(duì)任何主流的字體都是最保險(xiǎn)的搭配選項(xiàng)。其他網(wǎng)站元素則可以在#FFFFFF到#cccccc之間自由調(diào)整。 

我想再次強(qiáng)調(diào)，你不一定非要按我說(shuō)的那樣去配色，這些經(jīng)驗(yàn)只是為了幫助你順利地展開(kāi)設(shè)計(jì)，避免不必要的錯(cuò)誤。

3高亮顏色 僅限一種

網(wǎng)頁(yè)配色中最常見(jiàn)的一個(gè)錯(cuò)誤就是把若干種色彩統(tǒng)統(tǒng)混在一起。記?。耗闶褂玫念伾蕉啵刂扑鼈兙驮诫y。因此在設(shè)計(jì)的初始階段，如果要高亮顯示鏈接，標(biāo)題，目錄，按鈕等元素時(shí)，較為穩(wěn)妥的方法是只選擇一種顏色。你可以自行選擇藍(lán)，綠，紅或任何一種你喜歡的顏色作為高亮色。

在背景色之上，用你選定的高亮顯示色先畫(huà)一個(gè)框。這樣你便能對(duì)高亮色與其他設(shè)計(jì)元素的關(guān)系有個(gè)較為清晰的概念。然后打開(kāi)拾色器，點(diǎn)擊拾色器右上部區(qū)域（約占整個(gè)取色器四分之一大小）的中心點(diǎn)。

上下移動(dòng)滑塊，選擇一種適用于你的設(shè)計(jì)的顏色。

至此，你已經(jīng)至少在設(shè)計(jì)中使用了三種不同的色彩：背景顯示一種，文字一種，高亮顯示一種。在將來(lái)，你可以選擇更多的顏色用于高亮顯示，但在起始階段，就像雜耍中的拋球訓(xùn)練一樣，你目前能拋接的只有三個(gè)球，所以不妨先把這三個(gè)球練得順手，以后再逐漸增加球的數(shù)量。

小結(jié): 

到這一步，你已經(jīng)學(xué)會(huì)了如何選取“色相”。簡(jiǎn)單來(lái)說(shuō)，色相就是指某種基色。在拾色器中，當(dāng)你上下移動(dòng)滑塊時(shí)，你能看到一個(gè)字母“H”。 

“H”代表英文的“Hue”(色相)，當(dāng)你選定一個(gè)高亮顯示色時(shí)，方框中出現(xiàn)的數(shù)字便是與它對(duì)應(yīng)的色相。

4無(wú)法決定時(shí)請(qǐng)選藍(lán)色

如果你對(duì)選擇什么顏色做高亮色拿不準(zhǔn)，請(qǐng)直接選藍(lán)色。我可不是在開(kāi)玩笑。藍(lán)色是一種極其靈活的色彩，各種類型的網(wǎng)站中都能見(jiàn)到它的影子。紫色和黃色也是相當(dāng)不錯(cuò)的選項(xiàng)，但如果運(yùn)用不好的話，效果可能會(huì)令人無(wú)法直視。

而藍(lán)色則不一樣，當(dāng)需要高亮顯示色時(shí)，你無(wú)論怎么用藍(lán)色都不會(huì)錯(cuò)，就算錯(cuò)也不會(huì)錯(cuò)太多。當(dāng)你開(kāi)始學(xué)習(xí)色彩搭配，卻不知從何開(kāi)始，或困惑于在一個(gè)新項(xiàng)目中究竟該選用哪種顏色做高亮顯示時(shí)，請(qǐng)考慮藍(lán)色吧。從海軍藍(lán)（色相235）到深藍(lán)（色相190）的諸多不同藍(lán)色都可以放心大膽地使用。

在我舉的例子中我使用了色相為205的藍(lán)色。一旦你選定了某種顏色做高亮顯示色，就不要再猶豫，盡管把它用在設(shè)計(jì)中需要出現(xiàn)的地方。不過(guò)，當(dāng)你在選項(xiàng)按鈕或任何有文字出現(xiàn)的地方使用高亮顯示色時(shí)，你需要修改一下文字的色彩。在我的例子中，我把高亮顯示區(qū)的文字改成了白色。

5讓高亮顯示色更豐富

當(dāng)你選定了高亮顯示色之后，請(qǐng)把滑塊（色相條）置于未移動(dòng)之前的位置。此時(shí)你可以為自己的設(shè)計(jì)再添加一些色彩，但為便捷起見(jiàn)，建議你選擇與高亮顯示色色相一致，但又略有不同的色彩。

在色彩拾取器內(nèi)拖拽光標(biāo)，可以得到不同的顏色。

你可以在下列情形中使用這些由高亮顯示色衍生的顏色：

懸停效果 

邊緣

高亮顯示區(qū)的文字顯示 

漸層

光影效果

6遠(yuǎn)離拾色器的右上角

拾色器的右上角是濃艷色彩的匯聚之地。這個(gè)區(qū)域的色彩好像F1方程式賽車，它們擁有令人艷羨和心動(dòng)的優(yōu)越性能，但需要有豐富的經(jīng)驗(yàn)才能駕馭。經(jīng)驗(yàn)不足而貿(mào)然行事而可能導(dǎo)致嚴(yán)重的事故，對(duì)于剛?cè)胄械脑O(shè)計(jì)師來(lái)說(shuō)，最好還是先從色彩不那么強(qiáng)烈的顏色開(kāi)始。

這就是為什么在這篇文章的第三部分，在選擇高亮色彩之前，我要求設(shè)計(jì)師先點(diǎn)擊一下拾色區(qū)域右上部分的中心點(diǎn),這樣做是為了保證選取的顏色不過(guò)于鮮艷。 

為了說(shuō)明這一點(diǎn)，請(qǐng)看如果不點(diǎn)擊拾色區(qū)域，只是改變一下設(shè)計(jì)中配色的色相，會(huì)發(fā)生什么。

它看上去仍然很不錯(cuò)，對(duì)嗎？但當(dāng)把光標(biāo)拖到拾色器的右上角的時(shí)候，一切便忽然變得不那么美妙了。

當(dāng)心你的眼睛!如果你不打算把網(wǎng)站用戶的視網(wǎng)膜燒焦，還是聽(tīng)聽(tīng)我的建議，先不要碰拾色器的右上角吧。

小結(jié): 

在上文的最后兩節(jié)，我們介紹了一些將色彩理論運(yùn)用于實(shí)際設(shè)計(jì)中的策略。至此你已應(yīng)該學(xué)會(huì)如何使用:

飽和度和亮度

當(dāng)你在拾色器的取色區(qū)域內(nèi)拖動(dòng)光標(biāo)時(shí)，你或許會(huì)留意到“S”值和“B”值也在發(fā)生變化，其中字母S代表的是“Saturation(飽和度)”，B代表的是"Brightness"（亮度）。與此同時(shí)色相值并未發(fā)生變化。因此，要選擇色相相同但色彩略有變化的顏色，只需選擇一種顏色，然后改變它的飽和度和亮度即可。 

飽和度和淺色澤

飽和度 是用來(lái)描述色彩鮮艷程度的概念。例如我們可以說(shuō)，“我的襯衣被灑出來(lái)的紅酒浸透（飽和）了”。在典型的拾色器中，飽和度由白色調(diào)與純色的混合程度決定。一種色彩中白色調(diào)越少，飽和度便越大。

當(dāng)你將光標(biāo)拖至拾色區(qū)的右半部分時(shí)，色彩中的白色調(diào)便逐次減少，飽和度，亦即S值便相應(yīng)增加。當(dāng)把光標(biāo)向白色調(diào)區(qū)域一側(cè)拖動(dòng)時(shí)，飽和度亦即S值也隨之減小。 

“淺色澤”（tint）的概念源于傳統(tǒng)藝術(shù)中將白色顏料與彩色顏料調(diào)配的現(xiàn)象。

亮度和陰影

亮度是描述黑色調(diào)與純色組合的概念。一種色彩中黑色調(diào)越少，飽和度便越大。在拾色器的取色區(qū)中,光標(biāo)向上移動(dòng)時(shí),黑色調(diào)隨之減少,飽和度增大,可以看到取色器中的B值也相應(yīng)增加。當(dāng)光標(biāo)向下移動(dòng)時(shí)，黑色調(diào)增加，B值也相應(yīng)減少。

黑色調(diào)與純色的組合也被稱作“暗色澤”（shade，或譯作“陰影”）。這個(gè)概念源于傳統(tǒng)藝術(shù)中將黑色顏料與彩色顏料調(diào)配的現(xiàn)象。

色值

色值（Tone）是描述灰色調(diào)與純色相組合的概念。當(dāng)我們像在上文描述過(guò)的那樣,將光標(biāo)移出拾色器右上角的取色區(qū)時(shí),色彩的飽和度和亮度都會(huì)逐漸降低,這是便產(chǎn)生了一個(gè)色值。所以,一般來(lái)說(shuō),當(dāng)一種色彩的飽和度和亮度都低于100%時(shí),我們認(rèn)為它有一個(gè)色值。

同樣,這個(gè)概念也是源于傳統(tǒng)藝術(shù)中將灰色顏料與彩色顏料調(diào)配的現(xiàn)象。這也是"tone things down(意為“使...緩和”，“使...含蓄”---譯注)"這個(gè)短語(yǔ)的由來(lái)。聽(tīng)起來(lái)很酷吧?

單色配色法

所謂的單色配色是指在一個(gè)基準(zhǔn)色之上因淺色澤，暗色澤及色值等不同而衍生出的一系列色彩。在這篇文章里，事實(shí)上我們已經(jīng)接觸過(guò)這些概念了。例如，當(dāng)你選擇一種高亮顯示色及其衍生色時(shí)，我們便是在真正使用一種“單色配色方案”。

接下來(lái)......

請(qǐng)?jiān)谧约阂院蟮木W(wǎng)頁(yè)設(shè)計(jì)中積極運(yùn)用灰色度背景+單色配色方案的策略,直至你能熟練掌握。請(qǐng)變換高亮顯示色的色相,看看選擇不同的色相時(shí),飽和度和亮度如何改變。

熟悉一種顏色之后,你也可以嘗試去添加完全不同的高亮顯示色。我建議先從橙色-藍(lán)色這對(duì)組合開(kāi)始,因?yàn)槌壬?藍(lán)色組合的色彩相對(duì)而言比較容易控制。然后可以嘗試一下綠色-藍(lán)色組合,以我的經(jīng)驗(yàn),這是第二容易控制的色彩。這兩對(duì)色彩組合也最易得到客戶的認(rèn)可。 

為了加深對(duì)網(wǎng)頁(yè)設(shè)計(jì)中配色方案的理解,還有一件事情是你絕對(duì)值得一試的。你可以下載一個(gè)Colorzilla之類的瀏覽器擴(kuò)展應(yīng)用,用它來(lái)學(xué)習(xí)有經(jīng)驗(yàn)的設(shè)計(jì)師們是如何搭配色彩的。這樣當(dāng)你在瀏覽網(wǎng)頁(yè)時(shí)，如果看到某個(gè)網(wǎng)站的配色方案十分迷人，你可以立即打開(kāi)下載的擴(kuò)展應(yīng)用（取色器）來(lái)查看該網(wǎng)頁(yè)所使用的所有色彩。一定要對(duì)取色器采集到的每種色彩的飽和度和亮度都要了解一下。還要特別注意網(wǎng)頁(yè)中不同的色彩是如何組合的。

如果在今后的網(wǎng)頁(yè)設(shè)計(jì)中涉及到配色的地方你遇到任何困惑，隨時(shí)都記得復(fù)習(xí)一下我總結(jié)的6條“安全守則”，也許不能讓你百分之百的成功，但至少可以保證讓你呈現(xiàn)給用戶的不再是一鍋“色彩亂燉”！