UI 設計知識庫 [03] 色彩 · 配色

目 錄 [隱藏]

1 色彩的特征

1.1 色輪

1.2 色彩關系

1.2.1 色彩層次

1.2.2 明度層次

1.2.3 飽和度層次

1.2.4 色相層次

1.2.5 色彩場景

1.3 冷暖色

1.3.1 冷暖傾向

1.4 色彩膨脹

2 配色理論

3 色彩配比

3.1 配色主旨

3.1.1 單色主導

3.1.2 調和主導

3.1.3 色調主導

3.1.4 強調色主導

3.1.5 對比主導

3.2 配色技巧

3.2.1 自然的漸變層次

3.2.2 畫面渾濁與干凈

4 色彩搭配的心理效應

4.1 暖色青睞

4.2 非自然色吸引力

4.3 側抑制效應與馬赫帶

4.4 文化背景

這是《nullice 的?UI 設計知識庫》的第三篇文章，是“色彩”系列最后一篇 。

前兩篇寫的是關于色彩的一些理論概念的知識，而這篇是具體的配色知識和技巧。

色彩的特征

色輪

色輪又稱為色環、色相環，是根據色彩特征制作的工具，用來輔助色彩的選擇和方便色彩特征的判斷。

各種種類色環

色輪有很多種，比如蒙賽爾色輪、牛頓色環、伊登 12 色相環等等。經常可以看到說色輪中相對的顏色是補色，相鄰的是鄰色，相間的是間色，所以有人會誤解以為 2 種顏色互為補色或者間色是因為在色環上的排列，但是真正的邏輯這正好與這相反，并非是顏色在色環上位置決定了色彩的關系，而是色環上顏色的位置是根據色彩關系人為制定的，知道這個，你就能理想為什么會有不同的色環、不同色環上顏色的顏色位置不一樣了。

12 色相環

一般人們說的 12 色相環是以紅、黃、藍為初始基色，再分別把紅-黃混合得到橙色放在紅-黃之間、藍-紅混合得到紫色放在藍-紅之間，紅-黃混合得到綠色放在紅-黃之間，得到 6 種顏色再這樣混合一次得到 12 色相環，這樣雖然看似合理，但是卻不能很好的反應顏色間真正的距離，比如黃色到藍色之間的綠色本應有更大的范圍，而黃色到紅色的距離應該更小，所以其實這種色相環并不能很好的反應各種色彩間的距離關系。

而要更好的反應各種色彩間的距離關系，RGB 遍歷色相環是一個方便的選擇，這種色相環根據 RGB 色彩模式數值挨個排列，也被稱為 HSB 色環、色輪，也就是列舉所有?HSB 色彩模型的 H （色相）值。（不過這雖然比 12 色相環能更好的反應色彩間的距離關系但是這也不是最精確的，因為沒有考慮人真實的色彩視覺感受，要更加準確的描述色彩間的距離關系需要色貌模型，只是一般設計師不需要用到那么精確。）

RGB 遍歷色環

而人視覺的實際的補色應該是根據色彩感知第二層次，視神經中互相抑制的 2 通道的顏色，也就是 紅-綠，黃-藍互相對抗的關系，而根據這個理論設計的 NCS（自然色彩系統）色環能更好的體現顏色在視覺上的互補關系

NCS 色環

感受實際的補色：盯住圖像看大約一分鐘，將目光集中在十字圖案上。然后，移開視線看白色墻面。您將會看到顏色改變了的視后像。紅色變成綠色，白色變為黑色，藍色變成黃色，這就是視覺上真正的補色。

負后像現象

色彩關系

色輪雖然有各種各樣，但是在描述色彩關系時結果能大體相同，以一種顏色為基準色，最靠近基準色的是相似色，略遠的是相鄰色，更越的、相對的就是對比色。不過要記住視覺上對比度最大的是黃藍和紅綠。

色彩層次

不同的色彩有不同的距離感，一般來說越明亮，越鮮艷的顏色更靠近，反之感覺離人越遠更靠后，這就是不同色彩的層次。不同的顏色組成的層次就有著引導視覺方向的作用，配色中的層次感是對配色效果至關重要的因素。

明度層次

看起來越亮（明度越高）的顏色在視覺上越靠前。明度層次是色彩最基本的層次。

明度層次

飽和度層次

人視覺對色彩是很敏感的，與無色彩（黑白灰）相比，有色彩的層次要更靠前。與飽和度低的色彩相比，飽和度高的色彩更靠前。

飽和度層次

色相層次

不同的色相也有層次之分。從下面這張圖可以很直觀的看到不同色相層次的不同。

色相層次

混合色：黃、青、品紅的色相相比原色：紅、綠、藍 看起來層次更亮更靠前。

因為人視覺形成原理，混合色光能同時刺激多種視錐細胞，比如黃色光能同時刺激專長感受紅色的視錐細胞和專長感受綠色的視錐細胞，所以黃色看起來很亮。另外人視錐細胞不同種類的數量也是不同的，專長感受綠色的視錐細胞數量要遠多于其他 2 種，所以人視覺對綠色的明度感知要比另外 2 種原色紅色、藍色要敏感的多，甚至比綠、藍的混合色：品紅還要敏感一些。而藍色的明度感知是最弱的，所以與綠色有關的混合色：黃色、青色 比與綠色無關的混合色紫色（紅、藍的混色）要更亮。如果進行圖像色彩通道調整的話就會發現調整綠色通道對圖像改變最為明顯。

6 種主要色相的層次：

黃>青>綠>品>紅>藍

三原色：紅、綠、藍視覺感受亮度的比例是（根據常用的標準 CCIR 601 ，更多信息參見：色彩 · 理論 – 常見問題：明度、亮度、輝度）：

紅2.99 ：綠5.87 ：藍1.14

色彩場景

顏色層次而具體到一個場景中哪種層次在視覺上更敏感還需要具體分析。

大體上配色的場合分為：

白\亮 場景

白\亮 場景意味著背景是明亮的顏色，而前景要突出的話，就要比背景明度低。

由于與亮色背景的對比效應，低飽和度、明度下的顏色也有一定突出感，所以高飽和度、明度顏色與其對比并不十分突出，而在暗場景下高飽和度、明度顏色突出會很明顯。

由于人視覺對亮度感知在同一時間范圍是有限的，在主體是明亮的情況下，對低明度的顏色敏感度會降低。

你現在看的網頁就是 白\亮 場景 所以你會感覺左邊 2 種暗色的色差沒有右邊 2 種亮色的色差大，而實際上他們是色彩差別幾乎是一樣

同時白\亮 場景一般還意味著近處顏色鮮亮，遠處顏色暗淡的空間規則（空氣透視），所以要加強白\亮 場景下畫面的對比度和空間感，應該讓近處顏色更鮮亮，遠處顏色更暗淡：

亮場景空間層次

黑\暗 場景

黑\暗 場景 意味著背景是暗淡的顏色，前景要突出的話，就要比背景明度高。

相對于白\亮 場景，由于與暗淡的背景顏色對比，黑\暗 場景下顏色的飽和度、明度看起來都會更高：

而明度層次對比也會變得更加明顯，如在“白\亮 場景” ?文中圖片所示。

也是由于人視覺對亮度感知在同一時間范圍是有限的，在主體是暗淡的情況下，高明度、低飽和度的顏色會顯得更亮，而視覺對其敏感度會降低，所以類似下面這種小清新的配色在黑\暗 場景在難以復現：

同時黑\暗 場景下一般常用反空氣透視的規則，遠處的顏色鮮亮，近處的顏色暗淡，這對增強顏色對比，突出色彩很有效果，而且往往更有空間感：

暗場景 反空氣透視

冷暖色

色彩的冷暖是配色的重要概念，色彩的冷暖對色彩情感的表達有決定性的作用。

暖色有積極、熱情、擴張的情緒效果；冷色有消極、冷靜、收縮的?情緒效果。

最強烈的暖色是紅、黃，最強烈的冷色是藍、青。你無法判斷青色比藍色更冷，紅色比黃色更暖，這 2 組顏色是產生色彩冷暖感覺的關鍵，而其他顏色的冷暖感覺取決于現對于與這 2 組顏色的距離和色彩對比。

而弱冷色弱暖色的冷暖感覺要通過對比才能更明細的表達。

純綠色一般認為沒有冷暖傾向，靠近青色的綠被認為是弱冷色，靠近黃色的綠被認為認為是弱暖色。同樣紫色也被認為是弱暖色。

弱冷、暖色的視覺感受受對比影響很大，弱暖色與暖色比較體現出冷色的傾向，而與冷色比較才能明顯體現暖色的傾向。弱冷色也是如此。

黃綠色和淡紫色與粉紅對比顯示出冷色的感覺，與淡藍色對比顯示出暖色的感覺。

要注意的事，色溫和色彩的冷暖是不同的概念，而且從結果來看還是完全相反的概念：

色溫越高的光在人視覺中反倒感覺越冷，這說明色彩在視覺的冷暖更多取決于心理效應，即更可能產生自人類對皮膚、血液和食物的認知。

冷暖傾向

冷暖不是絕對的概念，在配色中顏色可能會有冷暖傾向，比如傾向于暖色的藍色調配色。從冷色到暖色的變化的傾向性方向性很強，有增加畫面戲劇沖突的功能，往往有著不錯的視覺效果。

色彩膨脹

不同的顏色在視覺上有不同的面積傾向，鮮艷的暖色有膨脹的視覺傾向，看起來比實際大小相同的暗淡的冷色面積要更大，這就是色彩的膨脹效應。

黃色圓看起來會比黑色、深藍色圓更有擴張感，面積更大，而黑色圓看起最小

明度越高，飽和度越高，越接近暖色越有膨脹感，看起來面積越大。

明度越低，飽和度越低，越接近冷色越有收縮感，看起來面積越小。

這意味著在設計圖表，尤其是類似于餅狀圖的時候要注意顏色膨脹性對表示準確性的影響

三等分的拼圖黃色部分明顯看起來比其他 2 部分更大更明顯

配色理論

配色的目的在于讓畫面產生對比或者調和的效果，對比能增加畫面的豐富度和視覺吸引力，畫面突出重點；而調和則能讓畫面在視覺上更舒適，瀏覽起來更輕松愉悅。

配色的一般過程是：

確定配色范圍

人視覺觀察畫面是有局限性的，不會一眼看到所有內容，所以有層次的畫面需要分層次進行配色，一般而言即是確定是為前景的配色還是為背景配色，確定一個對象配色之后再以此考慮另一部分的配色，這樣能便于調整保證整體的協調

比如一張海報可以先明確是對標題 LOGO 進行配色，在根據標題 LOGO?配色的特點設計背景的配色。

確定主色、輔色、強調色

主色是畫面整體的色彩基調，強調色是畫面最重要的部分，如果是單色調設計只需要主色和強調色，而輔色通常是作用是與主色配合增加畫面對比度和空間感。

所以主色與強調色之間一般都有強烈對比，輔色如果也是與主色對比的話，對比程度不應該強過主色與強調色之間的對比。

色彩配比

一個對象的配色中色彩的數量一般需要控制在 3~4 類以下。這里說的類指定是一定范圍內的顏色，比如同色相，明度相差不大的一組顏色只算作一類：

配色的基本思想是色彩的需要變化，不一定是色相層次的變化，還可以是明度、飽和度層次的變化。

而色彩面積的方向性的變化對畫面有決定性作用：面積最大的主色，比主色面積小的輔色，然后是更小的第二輔色，最后是面積最小的點綴色（強調色）

色彩鮮艷程度的方向性變化：從主色到點綴色，越來越鮮艷，越來越突出。

各種顏色面積的比例無需精確調制，一般只需明確 主色 ≥ 輔色 + 強調色 即可。所以常用的主色、輔色、強調色比是 4:3:1，主色 = 輔色+ 強調色。

配色主旨

配色主旨是在配色時根據需求的特點決定顏色搭配的方向。

一般有：單色主導、色調主導、強調色主導、對比主導、調和主導 5 種配色的主旨。

比如在為一個網頁中廣告圖片進行配色時，使用對比主導的配色能讓廣告圖片在網頁中更加顯眼，而且不用考慮對比主導的配色長時間觀看時視覺疲勞的副作用。而為網頁首頁標題圖片時使用強調色主導的配色更能突出想要突出的標題。

單色主導

由一種顏色（主要是色相和冷暖特征）或相近似的顏色起主導作用的配色，統一畫面的色彩的整體印象和冷暖性或冷暖傾向。

色相跨度小，明度、飽和度跨度大。

簡單自然，整體感強。

單調乏味，缺少戲劇性。

單色主導配色例子 – 來源 ui.cn

調和主導

以畫面協調自然，不易視覺疲勞為目的的配色，常使用臨近色搭配，用由于色相跨度小，常增加明度、飽和度跨度增強畫面的對比度和層次感，是最常用和最“安全”的配色。

色相跨度小，明度、飽和度跨度大。

視覺感受自然舒適不易疲勞，整體性強而不單調。

缺少對比，畫面吸引力不足。

調和主導例子

色調主導

相對色相特征明度和飽和度特征起主導作用的配色，能突出畫面的氣氛，常用于背景的配色。

色相跨度大，明度、飽和度跨度小。

整體感強，氣氛突出。

單調乏味，缺乏層次感、方向性。

色調主導配色例子 –?

強調色主導

以突出強調色為目的的配色，少量強調色用在最重要的地方，其他顏色以強調色的對比色為主，增強與強調色的對比。

色相跨度大，明度、飽和度跨度大。

目標明確，重點突出。

整體性弱。

強調色主導例子 –?

對比主導

以高對比度營造戲劇沖突，增強畫面吸引力為主旨的配色方法。

與對比強調色主導的不同之處是：強調色主導的配色中對比最強的調色只使用在很少的范圍內，而對比主導整個畫面都充滿對比。強調色主導更適合大場面的設計，比如軟件界面主體、網頁中的大標題圖片。而對比主導配色更適合用在需要在一堆同類中脫穎而出的對象上，如封面、圖標、廣告入口圖片。

色相跨度大，明度、飽和度跨度小。

畫面視覺吸引力大，視覺刺激強烈。

長時間觀看易疲勞，重點不易突出。

對比主導例子 –?

配色技巧

自然的漸變層次

普通的顏色漸變是同一個色相改變明度或飽和度，這樣的漸變雖然數值上很規整但顏色很單調也不自然，自然環境中同一顏色的不同明度變化往往伴隨著色相的微妙變化，如果在明度、亮度變化的同時偏移一些色相會更討眼球也更自然。

普通的漸變

有色相偏移的漸變 –?

要人配色更自然，就需要考慮亮度、飽和度變化時色相的變化，如下面這個例子，2 邊的按鈕的基礎顏色都是同樣的橙色，但是左邊的按鈕高光部分僅僅只是調整了明度、飽和度，色相沒有變化，而右邊按鈕在高光部分的漸變色相向黃色偏移了（加入了黃色），顯得更加自然和飽滿，相近之下左邊的按鈕則顯得生硬暗淡多了。

另外在陰影部分由于無色彩的灰色在暖色的對比下會顯的有冷色傾向，看起來泛藍很有違和感，所以右邊按鈕的陰影顏色增加了暖色的傾向，看起來更協調。

畫面渾濁與干凈

極端渾濁的配色

畫面渾濁也被說成是畫面臟，渾濁的畫面讓人看著就不舒服，也無法突出畫面內容。

曖昧而又暗淡的配色有渾濁和臟的感覺。

所謂曖昧就缺乏對比和設計意圖，而顏色暗淡即使明度和飽和度都偏低。與渾濁相對的是干凈，畫面的干凈一般意味著畫面層次分明、對比適中、配色意圖明顯。如果畫面渾濁，可以使用對比色，和增加畫面顏色的明度、飽和度，使畫面顏色對比更加明顯，更富有變化，并且明確畫面中各內容的層次。

色彩搭配的心理效應

暖色青睞

暖色是有積極的心理效應的。在于食物有關的配色中暖色也是引發食欲的關鍵，所以餐廳尤其是快餐店的裝潢大都是暖色調，在設計與飲食有關的配色時使畫面呈現暖色調或暖色傾向是大多數情況下的必選項（順帶一提黑色是與飲食配色的百搭色），而冷色調和冷色傾向會使人喪失食欲。

暖色與欲望也有著心理上的聯系，暖色積極心理效應不是空口說的，例如在網頁按鈕上使用暖色可以顯著提升點擊率?（參考：對轉化率最好的顏色是什么?）。在多個實驗中都證明使用紅色按鈕會比綠色點擊率高，而綠色要比藍色高。

Hubspot 在超過 2000 人次的樣本測試中，紅色方案的點擊率超過綠色方案的點擊率 21%

暖色這種受青睞的特性在引導用戶上有著重要的作用，你可以發現從淘寶到亞馬遜再到雅虎，絕大多數購物網站的購買按鈕都是暖色調的。

買買買

但是使用暖色的時候也要注意暖色另一個作用：使人對時間的感知加速，也就是使人焦躁，在網頁上這會使用戶的當頁停留時間減少.快餐店大量使用暖色很大程度也是基于這個原因，據稱在暖色裝潢的餐廳要比冷色裝潢客戶停留時間要減少 20~30% 。

非自然色吸引力

不常見的色彩對人有一種吸引力，人種會格外注意新奇的事物。著名的例子有?Tiffany 藍，這種生活中不常見的顏色被?Tiffany 采用并曾風靡一時，即使現在對人也有很大的吸引力，顯得時尚而獨特。使用非常見色是增強畫面特點的好辦法，而什么才是非常見色要看觀眾的身份，和配色使用的場合。

而在實際設計中使用與多數同類競爭對手不同的色彩會更能讓用戶注意到，并產生嘗試的想法。

側抑制效應與馬赫帶

在看配色圖片時會發現一個色塊的看起來似乎不是同樣的顏色，如下圖同一個色塊左邊要更亮且泛黃光，而右邊顏色則更深，而用拾色器測試這會發現這只是個錯覺，同一個色塊視覺上相同的顏色。

這被稱為側抑制效應（Lateral inhibition），在不同明度的灰塊的交界處，顏色深者更深，而淺色相對更淺，產生一種交界有處陰影的感覺，這種感覺會增加相鄰色塊的視覺上對比度，也被稱為馬赫帶（Mach bands）。

這種效應配色越暗越不明顯。

文化背景

色彩受文化的影響是很深的，極端的例子是如今代表女孩子的顏色：粉色在 20 世紀初還是代表男孩的顏色，當時認為粉色代表肌肉和力量是男性的象征，而藍色暗示圣母瑪利亞的堅貞和忠誠象征著女性的氣質，而到如今這種觀點完全逆轉了。

雖然世界范圍內文化越來越趨同，但在一些色彩的心理感受上各個文化圈還是有不同的地方，比如上面這張圖是三部分是中文圈對粉色的印象，而下部是英文圈對粉色的印象。而且不同年齡段、職業、受教育程度、收入水平對色彩的偏好都不一樣。

更多的例子還有，在文化圈的股市中代表漲跌的顏色往往不同，中國和日本是↓綠跌↑紅漲；而美國、英國、香港等地是↑綠漲↓紅跌。

值得一說的是受藝術教育的人比如設計師往往喜歡中低飽和度的顏色，而大眾對飽和度的偏好要比設計師想象的要高一些。

你覺得上方飽和度低的配色更好看還是下方飽和度更高的好看？