常聽人感慨，看了那么多的案例，依然搞不定配色，這真是一個悲傷的故事啊！的確，找到漂亮的網站容易，弄明白為什么漂亮，卻需要從根子上來思考，所以，讀完上篇的基礎分析之后，接下來你需要掌控那些關于配色的概念和思路，這才是真正意義上的授人以漁。上半部分右戳：《配色講道理！THINKFUL網站配色完全學習指南(上)》

優設之前也曾發布過從零開始構建配色方案的文章，先來一發預熱一下：《設計師必備取色技巧！教你在PS里通過照片創建色板》

色彩術語

色彩術語的存在讓我們能夠區分和描述色彩，熟悉并了解這些術語之后，我們能夠靈活地

? 色相(Hue)—即各類色彩的相貌稱謂。
? 色彩飽和度(Saturation)/色度(Chroma)—顏色的整體強度或者亮度
? 明度(Value)—色彩的明暗程度
? 色調(Tone)—是純色和灰色組合產生的顏色，也可以說是一幅畫中畫面色彩的總體傾向
? 色度(Shade)—是純色和不同比例的黑色混合產生的顏色，色彩的純度
? 色彩(Tint)—是純色和白色混合產生的顏色，一種色相(Hue)通過加入不同比例的白色能夠產生不同的顏色

色彩屬性

色彩的很多屬性能直接影響到一個物體的視覺效果。比如飽和度較高的物體比飽和度較低的物體更能吸引人的眼球，而明度較高的物體也有類似的效果。而實際上，色相本身也能傳達出特定的視覺感知。在所有色彩中，下列色彩尤其突出：

1、紅色(最突出)
2、藍色
3、綠色
4、橙色
5、黃色(最不突出)

當你在頁面中使用紅色的時候，整體視覺會更加突出，所以當你需要吸引用戶注意力或者涉及重要操作的時候，可以這么用色。而黃色相對而言更容易融入背景色，并不會像紅色那么抓人眼球。所以，當你在制作配色方案的時候，這些色彩關系和配對方案就顯得尤為重要了。合理地色彩搭配能夠讓你制作出震撼的視覺效果，設計出吸引人的焦點。為了更好的明確色彩之間的關系，設計師和藝術家們常常會借助色輪來進行配色。

色輪

色輪可以說是最實用的色彩管理工具之一，它可以反映不同色彩之間的關系，幫你挑選首選色、搭配色。 在制作配色方案的過程中，色輪是最重要也是最實用的工具之一。色輪最初還是源于牛頓1672年所發布的一個實驗，牛頓使用棱鏡來查看不同波長的光，將折射后的光線投射到一個圓環上。隨后他證明，飽和度最高的色彩位于色輪的外側，而中性色位于中間。牛頓認為，藝術家可以借助他的研究成果來提高藝術作品中的色彩對比。實際上他的色輪模型也確實為設計師們提供來行之有效的配色途徑，創造出更為漂亮的藝術作品。

幾百年后的今天，色輪依然是設計師手中最為得力的配色工具之一，不論是網頁設計還是品牌設計，色輪能賦予你的設計一套富有凝聚力的配色方案。由于色輪本身所承載的色彩數目限制，它所提供的配色方案更多是一個大概，而非最終的方案。

傳統意義上的色輪通常是印刷出來的2～3個紙質環形構成的，中間被固定住，可以旋轉。Adobe的網站Kuler就為你提供了一個不錯的在線版本，并且還能幫你配色。另外一個在線色輪網站是Colorhexa.com，也是不錯的選擇。

配色方案

當你選好基本的顏色之后，你就可以借助色輪來確定配色方案了。

?近似色——你可以使用色輪上位置相鄰的色彩。確定首選色之后，你需要選擇用來搭配的第二和第三種顏色。近似色與你的首選色接近而不同，能與之和諧存在，你可以使用近似色來構建配色方案。

?單色——基于單色的配色方案也不難實現，首選色的色相確定之后，調整它的色度、色調和色彩（讓其與不同比例的黑色、白色和灰色混合），也可以形成一套配色方案。

?三色——三色配色方案借助色輪很容易實現，也就是使用色輪上相互等距離的3種顏色即可。

?互補色——色輪中心對稱的兩邊的顏色就是互補色，兩種色彩相互抵消，色盲的用戶可能分辨不出來部分對比色。所以，如果你想每個人都看清楚網頁的內容，那么請不要使用兩種正好處于相反位置的色彩。（稍微偏一點就好了）

?復合色——確定首選色之后，挑選一個互補色，然后加上一個與首選色同色系的色彩，這樣的三色搭配方案很容易實現，提供了明顯的色彩反差，也不容易被濫用。

?中性色——很多高大上的網站就是這么配色的，就靠中性色黑白灰撐起來的。

?自定義——拋開上面的配色規則，不再遵循傳統，用更加冒險和激進的方案來裝飾網站。

最后，請記住最后一點，網站配色的目的是要提高網站的體驗和可讀性，不要讓用戶分心。當你設計配色方案的時候，需要保證即使是色盲用戶都能準確而輕松地獲取網站內容，這也就意味著你的配色要保證足夠的視覺反差，而非全部使用對比色。最簡單的驗證方法，就是將飽和度降到最低，如果你依然能看到網站最重要的內容，能看清圖形和圖像，就好了。
?
這樣一來，想必你也對于網頁配色有了更清晰的想法了吧。至少選擇兩種色彩，一主一次，并且兩種色彩足以支撐起網站的視覺。在必要的時候，可以基于這兩種色彩拓展出更多的同色系色彩，令網站色彩更豐富。
?

色調、色度和色彩

配色方案最重要的因素

當你要使用你的配色方案來設計網頁布局的時候，你需要仔細審視整個網站來考慮如何使用這些色彩來引導你的用戶。審視網頁布局，你得先找出哪些地方更重要，哪些地方需要你的用戶點擊，哪個頁面是你希望用戶優先訪問的，確定了這些用戶行為方向之后，你就知道哪些地方的視覺是需要強化的。合理調整配色中顏色的色彩、色度和色調可以讓頁面不同的部分有輕重之分，正確引導用戶。

很多時候，你希望用戶能直接點擊某個按鈕，通常網頁設計中會讓它成為一個“行為召喚按鈕”，讓它隨著鼠標行為而改變顏色。為了吸引用戶，按鈕一般狀態下會使用首選色，那么要如何選擇它的懸停和禁用時候的顏色呢？一般來說，最好是有微小的過度，所以很多設計師會選擇使用同色系的色調或者色度來表示不同的狀態。

比如，假設首選色使用的是#00AEEF：

按鈕一般有四種狀態：normal(一般)，hover(懸停)，pressed(按下)，disabled(禁用)。接下來，你需要做的是基于色板中的色彩，來調整出一套與之適配的用色，而不用引入更多不必要的色彩。

這個時候你可以從首選色#00AEEF開始，加入一定的黑色(Shade)，配出Hover的時候的用色#0077A1。按下狀態下，色彩應該會更深，那么，你可以加入更多的黑色來模擬出那種物理按鈕被按下的狀態。通常當按鈕被禁用的時候，設計師會讓色彩看起來更淺一點，所以，你需要做的就是讓首選色色彩或者色調更淺一點(加入白色或者灰色)，就成了。

案例在此：Code

用戶界面中有許多元素，涉及到各種不同的操作，為了區分它們又得忠于配色方案，靈活調整色彩、色度和色調是非常必要的。

中性色

讓網頁有對比更平衡

在很多網頁中，你會發現網頁的主體通常使用了白色的背景和灰色或者黑色的文字。這種設計上的嘗試早已有之，這種對比度確保了可讀性。

使用中性色的美妙之處在于，它可以和任何配色方案搭配。你可以在配色方案中添加中性色，提高排版效果和可讀性。你也可以在網頁元素中適當地增加灰度，提高信息的層次，并不是網頁中每個元素都非得色彩鮮亮。有了層次，視覺就有了焦點，用戶就不會分心。

正如下面的案例，云托管服務商Digital Ocean的網站，灰色背景讓網站主色調突出，提高了可讀性。

選擇多少色彩才合適

通常能具備主次兩種色調就夠用了，但是也可以通過調整色調、色彩和色度可以靈活創造更多的可能性。

值得一提的是，網站的色彩比例控制為6:3:1最為適宜。色彩比例均勻的話，會讓色彩之間相互沖突，主次不分。6:3:1規則指的是，主色調應該覆蓋6成的網頁和UI元素，輔助色占據3成，而剩下的1成則應該是裝飾色或者強調色，讓網站或者UI更舒適。

Best Buy就是個典型的案例，藍色為主色調，黃色為輔助色，紅色用以強調。

而在這個例子中，色彩使用太過于散亂，各種色彩的比例不明顯，對比混亂。

最后這個網站的配色堪稱是災難性的。典型的反例。

結語

其實，理論學習并不難，讀完收藏也就幾分鐘的事情，但是要融會貫通需要大量的練習，反復的思考，合理的總結。接下來，打開電腦動手吧~

用色彩來定義網站：

色彩中的朋克！
《25個驚人的黃色系網站設計欣賞》

色彩中的暖男！
《20個風格多樣的綠色系網站欣賞》

色彩中的雅痞！
《26個優雅的藍色網站設計欣賞》

原文地址：Thinkful
優設網譯者：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量86萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：