色彩是影響用戶最簡單和最重要的一個因素。研究表明，人們只需 90 秒就能對一種產(chǎn)品做出下意識的判斷，而其中高達 60%以上的判斷僅基于顏色。因此，選擇合適的顏色對于改進產(chǎn)品的轉(zhuǎn)換率和提高產(chǎn)品的可用性是非常有用的。在沒有文字的場景中，顏色的搭配非常重要。如何配色可以使設(shè)計感更強，如何配色更好看，哪些配色不好看，解決這些問題就需要學(xué)習(xí)色彩理論。

色彩基礎(chǔ)知識

我們身處在一個多彩的世界中，物體的不同顏色，會讓我們產(chǎn)生不同的情緒。色彩，即光從物體反射到人的眼睛所引起的一種視覺心理感受，按字面含義上理解可分為色和彩?！干故侵溉藢M入眼睛的光傳至大腦時所產(chǎn)生的感覺，「彩」則指多色的意思，是人對光變化的理解。色彩的基本理論雖然老生常談，但在 UI 設(shè)計中具體怎么運用，還有關(guān)于色彩的性格和含義，都是我們需要了解的。因此在學(xué)習(xí) UI 配色之前我們先來了解色彩的基礎(chǔ)知識。

1. 色彩常識

原色

所有的色彩都源自“紅黃藍”三種原色，很多人誤以為三原色是“紅綠藍”，其實不是。紅綠藍是顯示上的三原色，計算機屏幕的顯示是色光三原色（紅 red，綠 green，藍 blue）即 RGB 組成的，每一個像素的顏色都用三原色值來顯示，與美術(shù)上的三原色不一樣。原色是其他顏色調(diào)配不出來的。把原色相互混合，可以調(diào)和出其他種顏色。

雖然 RGB 在顯示設(shè)備上表現(xiàn)良好，但并不夠人性化。因為人們判斷顏色，往往是通過：這是什么顏色？是不是太艷了？是太亮了還是太暗了？這樣的感官維度，而很難通過紅綠藍的亮度層級去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。

印刷三原色為青（Cyan)、品紅（Magenta)、黃（Yellow)。是減色模式，混合為深灰色，并不能產(chǎn)生黑，所以在印刷時加上黑色油墨，才能產(chǎn)生純正的黑，就是 CMYK 顏色模式。

間色

又叫“二次色”。它是由三原色兩兩混合調(diào)配出來的顏色。紅與黃調(diào)配出橙色；黃與藍調(diào)配出綠色；紅與藍調(diào)配出紫色，橙、綠、紫三種顏色又叫“三間色”。在調(diào)配時，由于原色在份量多少上有所不同，所以能產(chǎn)生豐富的間色變化。

復(fù)色

也叫“復(fù)合色”。復(fù)色是用原色與間色相調(diào)或用間色與間色相調(diào)而成的“三次色”復(fù)色是最豐富的色彩家族，千變?nèi)f化，豐富異常，復(fù)色包括了除原色和間色以外的所有顏色。例如，黃色與橙色混合得到橙黃，紅色與紫色混合得到紫紅。

冷暖色

最后由三種原色、三種間色和六種復(fù)色組成的系統(tǒng)就稱為十二色環(huán)，從紫色至黃綠為冷色，黃色至紫色為暖色。冷色令人聯(lián)想到天空、海洋、冰雪等，產(chǎn)生寒冷、理智、寧靜等感覺；暖色則令人聯(lián)想到太陽、火焰、熱血等，產(chǎn)生溫暖、熱烈、危險等感覺。

雖然可以用「冷」、「暖」色系來劃分色彩，但配色的變化卻有千種萬種。借著色彩的組合方式，從「非常冷」到「涼爽」到「暖和」再到「炎熱」都可以用不同的配色組來表現(xiàn)色彩的印象。

• 知識點：

不同的色輪由不同的人發(fā)明，他們對于色彩的見解不一樣，因此創(chuàng)建出來的色輪用途也不一樣。比如：伊頓色輪又被稱之為美術(shù)三原色，是由顏料的三原色混合疊加而成；RGB 色輪主要運用于電腦、手機、平板等一系列科技產(chǎn)品，RGB 的三原色是光的三原色；CMYK 色輪主要用于印刷領(lǐng)域。

2. 色彩三屬性

豐富多樣的顏色可以分成兩大類，即有彩色系和無彩色系。彩色系的顏色具有三個基本特征：色相、明度和飽和度，在色彩學(xué)上被稱為色彩三大要素或色彩三屬性。

色相（Hue）

色相是自然狀態(tài)下的色彩，是色彩的相貌。簡言之，色環(huán)上沒有改變明暗的色彩。色相是色彩的首要特征，是區(qū)別各種不同色彩的標(biāo)準(zhǔn)。例如紅、橙、黃、綠、青、藍、紫就是其中不同的基本色相。黑色是沒有色相的中性色。不同的色相在人眼中的差異是色相本身對應(yīng)光的波長不同而造成的。紅色波長最長，紫色的波長最短。

飽和度（Saturation）

飽和度是色彩的純度，他表示顏色中所含有色成分的比例。增加飽和度，色彩會變得更強烈、鮮艷生動；降低飽和度，顏色中灰色成分越大，色彩會變得暗淡乏味。當(dāng)一種顏色摻入黑、白或其他色彩時，純度就產(chǎn)生了變化，當(dāng)摻入的顏色達到很大的比例時，人的眼睛就無法感知出來了。

飽和度為 0 的顏色為無彩色，就是黑、白、灰。數(shù)值越大，顏色中的灰色越少，顏色越鮮艷。飽和度高的地方給人感覺靠近，而飽和度低的地方則給人的感覺很遙遠。高飽和度和低飽和度的色彩都給人堅硬的感覺。

明度（Brightness）

明度，指色彩的明暗度，反應(yīng)的是色彩的深淺變化。以自然界為例，一些物體在早晨和晚上的色彩不同。如樹木和山脈，早晨色調(diào)淺；傍晚因為光線減少了，色調(diào)變得偏暗。距光源越近的物體，明度越高，反之，則明度越暗。

明度在 UI 設(shè)計中扮演重要的角色，明度運用得好，可以實現(xiàn)好的對比效果。明度達到 100%時，色彩就會變成白色（黑白模式下）；明度是 0%時，就會變成黑色。色彩的明度變化往往會影響到純度，例如藍色加入黑色以后明度降低了，同時純度也降低了；如果藍色加入白色則明度提高了，純度卻降低了。

3. 色彩的搭配

完整的 UI 配色應(yīng)包含主色、輔助色和中灰色。主色通常與品牌色一致，輔助色一般選擇與主色色調(diào)一致且能拉開層次的顏色，強調(diào)色選擇與主色相對立的互補色。下面我們來學(xué)習(xí)幾種常見的配色方案。

單色

單色是指某個色彩的明度變化，即在色彩上疊加 10%-90%白色或黑色得到的一組顏色。單色搭配由于彼此之間色彩相同，因此能和諧共處，但因較為樸素也就不容易引人注目，而且會給人一種單調(diào)的感覺。單色配色在色彩變化上也適合長時間閱讀，顏色波動較少，比較適合沉浸式交互的界面設(shè)計。

蝦米音樂就是單色搭配的最好例子，它將主色橙色用在主要功能入口、標(biāo)簽欄圖標(biāo)等所有界面的關(guān)鍵元素上，給人非常精致和統(tǒng)一的視覺體驗。

如若想要在色彩變化上融入一點微妙的變化，可以嘗試在色環(huán)中選用兩側(cè)相近的顏色，這樣色彩層次豐富了而統(tǒng)一感也不會變，稱之為“鄰近色配色”。

鄰近色

是指在色相環(huán)中相鄰的兩種顏色，在色相環(huán)上相距 60°，或者相隔五六個數(shù)位的兩色。它可以在同一個色調(diào)中建立起豐富的質(zhì)感和層次，優(yōu)點是陽光、活潑、穩(wěn)定、和諧但不單調(diào)，理所當(dāng)然稱為最安全的配色法則。鄰近色色相相近，冷暖性質(zhì)相近，傳遞的情感也較為相似。例如，紅色，黃色和橙色就是一組鄰近色。鄰近色表現(xiàn)的情感多為溫和穩(wěn)定，沒有太大的視覺沖擊。

美顏相機的主色是粉色，將淺粉色和淺紫色作為輔助色，既能信息區(qū)分又和諧統(tǒng)一。

互補色

互補色是指在色相環(huán)上對立（180°）的兩個顏色，色相環(huán)上夾角呈現(xiàn)一條直線，例如黃色和紫色、橙色和藍色、紅色和綠色等?；パa色有著非常強烈的對比度，在顏色飽和度很高時，可以產(chǎn)生許多十分強烈的視覺效果，就會使這兩種顏色都顯得更加鮮明，也將視覺沖擊力強度提升至峰值。這類配色形式優(yōu)缺點和對比色很相似。常給人一種潮流、刺激、興奮的感覺，把互補色放在一起，會給人強烈的排斥感，搭配不好會很山寨。

Airbnb 的主色為紅色，界面設(shè)計中使用主色的互補色「墨綠」作為主色調(diào)，給人清晰、簡潔的感覺。

分裂互補色

分裂互補色是指尋找三種顏色，其中兩種互為鄰近色，另一種與它們形成互補色，例如黃色和藍色、洋紅。這種搭配既能保持互補色強烈的對比及視覺上的趣味性，又能讓顏色變得柔和。

36Kr 將藍色作為主色，互補色黃色作為輔助色用在圖標(biāo)、標(biāo)簽上，再選擇黃色的鄰近色紅色作為另一輔助色，用在不同的信息上，有助于用戶區(qū)分產(chǎn)品信息。

對比色

指在色環(huán)上相距 120°～180°之間的兩種顏色，也是兩種可以明顯區(qū)分的色彩，包括顏色三要素的對比、冷暖對比，彩色和消色的對比等。對比色能使色彩效果表現(xiàn)更明顯，形式多樣，極富表現(xiàn)力。需要注意的是，互補色一定是對比色，但是對比色不一定是互補色。因為對比色的范圍更大，包括的要素更多，如冷暖對比、明度對比、純度對比等。這類配色形式優(yōu)點是視覺沖擊力強烈、富有跳躍性、突出、點綴能力強，比如常用作畫面中的點綴色，或與主體固有色成對比關(guān)系的背景色，用于突出主體。缺點是大面積使用比較難把控。

馬蜂窩的主色是黃色，對比色藍色作為輔色用在標(biāo)簽、小圖標(biāo)上，紅色作為強調(diào)色用在價格等信息上。

對比色也不單純是兩個顏色之間的對比，而是色調(diào)之間的對比！對比色還包括：補色對比、色相對比、明度對比、飽和度對比、冷暖對比，飽和度越高對比越強烈，明度反差越大對比越強烈。

四元色搭配

四元色搭配在色環(huán)上形成了一個矩形，使用不是一對而是兩對互補色。將其中的一個顏色作為主色，其余顏色作為輔色進行搭配可以得出不錯的效果。

四元色是比較難以平衡的顏色，不過搭配好了會非常出彩。不信可以自己用用感受一下，尤其是使用其中一個顏色作為主色，其他的三個顏色作為輔助色的時候。

4. 色彩和光源關(guān)系

了解了色彩的基本知識，下面說說色彩和光源的關(guān)系。如果想描繪好對象的色彩，那么就必須了解對象的固有色、光源色、環(huán)境色及它們之間的關(guān)系和變化。

固有色

即物體本身的顏色。是指在光源條件下物體占主導(dǎo)地位的色彩，如紅色的罐子、綠色的植物等。物體的固有色并不存在，在繪畫過程中為了觀察方便經(jīng)常引入“固有色”這一概念。從實際方面來看，即使日光也是在不停地變化中，何況任何物體的色彩不僅受到投照光的影響，還會受到周圍環(huán)境中各種反射光的影響。所以物體色并不是固定不變的。

光源色

物體只有在光源的照亮下才能觀察到它們的色彩。光源有自然光（太陽、天光）和人造光（燈），這些光源都各自具有不同的顏色。太陽光是偏黃色暖色光，月光是偏青的冷色光，陰天則更多的是藍灰色的天光，普通燈光是偏黃色的暖色光。光源的顏色對物體的顏色影響很大，想象一下一個置于紅色光源照射下的藍色物體會是什么顏色。

環(huán)境色

物體周圍環(huán)境的顏色就是環(huán)境色。環(huán)境色對物體的影響非常大，如在紅色背景下的白色物體，由于光源打到紅色背景上的背景反射光也會“染”到白色物體上，因此白色物體的部分表面會蒙上一層淡紅色的色彩。所以，設(shè)計師在用電腦作圖時也需要考慮并想象環(huán)境色的影響。

5. 色彩空間

Lab

Lab 的全稱是 CIELAB，有時候也寫成 CIE L*a*b*。最突出的特點是它的生理特性，一是它包括人眼所看到的所有顏色，是目前為止色域最寬的色彩空間，二是跟人眼一樣，首先看到的是明暗，其次是色彩，可以用數(shù)字化的方式描述人的視覺感應(yīng)，在計算機視覺中廣泛應(yīng)用。

LAB 顏色空間中，L 表示亮度，取值[0-100]對應(yīng)[純黑—純白]；A顏色表示從綠色到紅色的范圍，取值[-128—+127]對應(yīng)[綠—洋紅]；B表示從藍色到黃色的范圍，取值[-128—+127]對應(yīng)[藍-黃]，正是暖色，負是冷色。Lab顏色空間中亮度和顏色是分開的， L通道沒有顏色，a通道和b通道只有顏色。不像在RGB顏色空間中，R通道、G通道、B通道每一個既包含有明度又包含有顏色。

在表達色彩范圍上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它彌補了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是說 Lab 模式所定義的色彩最多，且與光線及設(shè)備無關(guān)，并且處理速度與 RGB 模式同樣快，比 CMYK 模式快數(shù)倍。

Hsb

HSB 和 HSV 是同一個東西，只是名稱不同。在 Photoshop 拾色器上可以看到每個顏色都有一組 HSB 值，H 表示色相、S 表示純度、B 表示明度。色相值為 0～360 度，即圓；純度和明度值為 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本質(zhì)。

當(dāng)我們需要調(diào)配同色系色彩，保持色相不變，只需要改變純度和明度即可。如下圖所示的 3 種同色系綠色，他們的色相（H152）都一致，僅在純度和明度上有所變化。

當(dāng)色相和純度都為 0 時，色彩稱為中性色，也稱為灰度色，即黑白灰。其中，灰不是單指某一種顏色，而是一系列從黑到白的過渡色。

灰度色多用于文字，通常一個應(yīng)用中的文字不應(yīng)超過 3 種灰度色。深黑用于標(biāo)題、正文等主要文字；淺黑或深灰用于輔助、提示性文字；淺灰用于禁用、失效等狀態(tài)文字；純白用于深色按鈕文字。

此外，灰度色由于沒有任何色相，始終沉著冷靜，減少對內(nèi)容的視覺干擾，因此常用于界面背景色，例如 MOO 音樂的界面設(shè)計。

Hsl

HSL 色彩模式是工業(yè)界的另一種顏色標(biāo)準(zhǔn)，是通過對色相(H)、飽和度(S)、亮度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。在原理和表現(xiàn)上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（飽和度）不一樣，L 和 B （明度 ）也不一樣。

取一個顏色試試看，先選一個顏色 #0688F9，放入 “HSL Color Picker”，顯示 HSL 數(shù)值為：H(208), S(95), L(50)，但是我們放在 Sketch 里面看一下，顯示的 HSB 數(shù)值為，H(208), S(98), B(98) 。

HSL 的 H 代表的是人眼所能感知的顏色范圍，這些顏色分布在一個平面的色相環(huán)上，取值范圍是 0°到 360°的圓心角，每個角度可以代表一種顏色。色相值的意義在于，我們可以在不改變光感的情況下，通過旋轉(zhuǎn)色相環(huán)來改變顏色。在實際應(yīng)用中，我們需要記住色相環(huán)上的六大主色，用作基本參照：360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅，它們在色相環(huán)上按照 60°圓心角的間隔排列。

HSL 相比 RGB 的優(yōu)勢

我們來做一個基于 HSL 的調(diào)色實踐。你可不可以快速說出“海棠紅”所對應(yīng)的 RGB 色值？如果再加一點橙色進去，把亮度提高一點，色值又是多少？想想那應(yīng)該是一個介于洋紅和紅色之間的，性感嬌艷的顏色。我們可以假定它在色相環(huán) H 上的角度是 330°左右，飽和度較高，亮度適中，看看那是什么顏色？

em…我們想要的顏色應(yīng)該再接近紅色一點，讓我們把色相（H）+20°到 350°，現(xiàn)在好多了。

通過改變色相值 H，我們實現(xiàn)了色相從洋紅向海棠紅的偏移。 大感覺接近了，但還是略微有點灰暗，我們可以通過增加飽和度（S）+15%，讓這個顏色變得更鮮活，看起來更亮麗。

感覺還是差點，海棠紅是屬于少女的顏色，應(yīng)當(dāng)再嫩一點、通透一點，不會這么強烈。那可以通過增加亮度 L，+10%試試看，嗯，這才是我們想要的顏色。

同理，如果想加點橙色進去， 再亮一點，我們通過心算就大致可以確定色相環(huán)的相位和亮度值。在這里，我們需要讓 H 增加 20°，L 增加 5%。

在使用 HSL 調(diào)色的過程中，不需要了解復(fù)雜的色光混合原理，這是一個自然的、感性的、易于理解的過程。相比之下，RGB 調(diào)色方式顯得非常笨拙復(fù)雜、難以理解，而 HSL 是多么的友好。

• 知識點：

需要提醒一下的是，CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對接時，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會與設(shè)計稿有出入。Photoshop 中的 Hex 和 RGB 顏色可以直接在 CSS 文件中使用，但是 Photoshop 中的 HSB 模式顏色和 HSL 是不同的。

Yuv

YUV，是一種顏色編碼方法。常使用在各個影像處理組件中。YUV 在對照片或影片編碼時，考慮到人類的感知能力，允許降低色度的帶寬。Y 表示明亮度（Luminance 或 Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示濃度（Chroma）；通常 UV 一起描述影像色彩和飽和度，用于指定像素的顏色。

采用 YUV 色彩空間的重要性是它的亮度信號 Y 和色度信號 U、V 是分離的。如果只有 Y 信號分量而沒有 U、V 信號分量，那么這樣表示的圖像就是黑白灰度圖像（回想一下小時候看的黑白電視）。彩色電視采用 YUV 空間正是為了用亮度信號 Y 解決彩色電視機與黑白電視機的兼容問題，使黑白電視機也能接收彩色電視信號。

色彩心理學(xué)

色彩心理學(xué)是美術(shù)知識學(xué)習(xí)中非常重要的一部分。他所研究的是色彩通過對人視覺上的刺激，而引發(fā)人情感和感官上的變化，通過日常生活中人們對應(yīng)用色彩的經(jīng)驗積累而歸納總結(jié)出人類對色彩心理上的預(yù)期感受。在生活中，色彩心理學(xué)對人們對顏色的認知有很大的影響。為什么交通信號燈用紅色表示停止通行而不是綠色呢？為什么大多快餐店用紅色或黃色作為品牌的主色？這都是色彩心理學(xué)的相關(guān)知識。

雖然紅、藍是受到最普遍喜愛的顏色（通過對 App Store 應(yīng)用流行顏色分類統(tǒng)計得知）。但并不意味著這一準(zhǔn)則可以套用在所有產(chǎn)品上。產(chǎn)品的屬性是什么，用戶定位是什么，要傳達的產(chǎn)品氣質(zhì)是什么等等，這些都是選擇應(yīng)用圖標(biāo)的顏色時需要考慮的問題。世界上第一間 Airbnb 房間是在一條叫 Rausch street 的街上誕生的，因此 Airbnb 的主色被命名為「Rausch」的溫暖顏色。在挑選主色調(diào)的時候，4 名設(shè)計師前往世界 13 個城市，只為了更好地理解 Airbnb 的理念：熱情、能量和自信，這正是 Rausch 要傳遞的信息。除了 Rausch 以外，Airbnb 還有其它九種顏色，包括 Kazan、Beach、Tirol、Foggy 等等，它們也都是以 Airbnb 的社區(qū)街道命名的。

下面來講解每一種顏色都各自帶有什么樣的性格，只有理解了顏色的性格才能正確的使用它們。

黑色

黑色代表著品質(zhì)、高端、時尚、低調(diào)、權(quán)威、嚴(yán)肅、穩(wěn)重，是一種充滿質(zhì)感的顏色。它是所有色彩中最有力量的，能很快吸引用戶的注意力。作為一種無彩色，能讓它和其他色彩百搭，黑色+金黃色，給人一種奢華精致的感覺；黑色+銀灰色，則給人一種成熟穩(wěn)重的感覺；黑色+紅色，給人一種時尚潮流的感覺。因此黑色是一種永遠流行的主要色彩。

白色

白色代表著純潔、簡單、純真、樸素、信任、開放、雅致，白色常常被認為是“無色”，即不是色彩。單一使用白色通常不會引起任何情感，但是當(dāng)白色與其他顏色配合使用時，白色能很好的襯托，大量的留白讓其他元素脫穎而出。在界面設(shè)計中，作為無彩色的白色，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。

灰色

灰色是代表著睿智、老實、執(zhí)著、嚴(yán)肅、壓抑、沉穩(wěn)。介于黑色和白色之間，也屬于無彩色，沒有色相也沒有純度，只有明度的變化。它和任何顏色都能很好的搭配，也常常用于背景色或用于突出其他彩色?；疑幌窈谏敲磮杂泊萄郏袕椥?，它比黑色更有深層次的力量。因此在畫面中，很少出現(xiàn)純黑，基本都是用深灰色來代替黑色，也可以用淺灰色來代替白色。

紅色

紅色代表著喜慶、熱情、歡樂、斗志、奔放、自信，是一種充滿能量的顏色。這是最醒目和強勢的顏色，一登場即獲得全場的關(guān)注，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。紅色最能烘托氣氛，在中國傳統(tǒng)節(jié)日里都使用熱鬧的紅色來裝飾，因此也就不難理解每逢佳節(jié)各大電商應(yīng)用活動頁一片紅，為的就是發(fā)沖動，引人消費。同時紅色也代表了警示、告誡。所以在界面設(shè)計中常用紅色的文字和按鈕來警示用戶慎重操作。

橙色

橙色代表著溫暖、歡樂、輝煌、健康、陽光、年輕、華麗，是一種充滿朝氣的顏色。橙色并不像紅色那樣咄咄逼人，而且它烘托出的活躍氣氛沒有危險的感覺，反而是一種友好。因此越來越多的應(yīng)用避開常見的紅色和藍色，而選擇橙色的原因。

黃色

黃色代表著信心、青春、聰明、尊貴、輝煌、時尚，是一種充滿活力的顏色。黃色是明度極高的顏色，其鮮亮的色調(diào)使它在眾多圖標(biāo)陣列中顯得尤為突出。盡管在警示效果上沒有紅色那么明顯和強烈，但是還是能給人很醒目和危險的感覺（例如道路警示牌）。同時因為過于明亮，也是一種非常難以運用的顏色，性格不穩(wěn)定常有偏差，和別的顏色配合使用易失去本來的性格。不過黃+黑的搭配很流行，例如站酷和美團外賣。

綠色

綠色代表著健康、生命、青春、寧靜、自然、和平、安全、舒適，是一種充滿希望的顏色。綠色給人無限的安全感，當(dāng)情緒低落與消極時看一些綠色，能緩解我們焦躁的情緒。綠色在生活中被廣泛運用，如安全出口的顏色就是綠色，但綠色的飽和度要適當(dāng)控制，如高飽和度的綠色也會令人興奮，引起注意。

青色

青色代表著堅強、古樸、活潑、清爽、柔和、優(yōu)雅、希望，是一種充滿靈動的顏色。青色是一種介于綠色與藍色之間的顏色，如果無法界定一種顏色是藍色還是綠色時，這個顏色就可以被稱為青色。豆瓣的主色調(diào)是青色，很符合豆瓣小清新的氣質(zhì)，帶給用戶恬靜的感受。

藍色

藍色代表著冷靜、科技、靈性、自由、放松、未來、理智、純凈、商務(wù)，是一種充滿理性的顏色。藍色是天空的顏色，是大海的顏色。在色彩心理學(xué)的測試中發(fā)現(xiàn)，幾乎沒有人對藍色反感。純凈的藍色通常讓人聯(lián)想到海洋和天空，可以撫平內(nèi)心的傷口，讓人的內(nèi)心感到平和，有助于人的頭腦變得冷靜。例如 twitter 的主色調(diào)是藍色，在社交應(yīng)用里藍色是一種很安全的顏色，高純度的顏色傳遞了信賴、年輕和溝通的氛圍。

紫色

紫色代表著高貴、浪漫、優(yōu)雅、性感、幸運、夢幻、時尚、創(chuàng)造性，是一種充滿神秘的顏色。是小孩子和有創(chuàng)造力的人十分喜歡的顏色。紫色的光波最短，在自然界中較少見到，所以被引申為象征高貴的色彩。紫色的明度在所有有彩色的顏色中是的。與不同的顏色結(jié)合會展現(xiàn)出不同的風(fēng)格特色。紫+粉常用于女性化的產(chǎn)品調(diào)性，黃色是紫色的對比色。

色彩對用戶體驗的影響

當(dāng)我們討論色彩的時候，聊的更多的是色彩的搭配。雖然有些設(shè)計師認為有些色彩是一些純粹的美學(xué)上的選擇，但是實際上，色彩對于用戶的心理和行為的影響相對更深，最終會反映在用戶體驗和行為反饋上。

當(dāng)然，色彩理論是一個相對復(fù)雜的主題。從用戶體驗的角度上來說，色彩所涉及到的遠不是配色方案這一個維度。通常，我們聊得最多的是不同色彩所產(chǎn)生的心理效應(yīng)，以及多色彩搭配時，相互之間的影響和可訪問性上的問題。設(shè)計師可以將色彩更好地運用到設(shè)計中，而無需重新考慮整個過程。一旦設(shè)計師掌握了基礎(chǔ)知識，色彩理論中最有意義的部分之一就是學(xué)習(xí)將更多意想不到的色彩融入他們的設(shè)計中。

1. 色彩心理學(xué)和用戶體驗緊密關(guān)聯(lián)

界面顏色的情感影響不容忽視。盡管有些顏色在 Ui 設(shè)計中是“通用的”（例如，黑色，白色和灰色，實際上幾乎所有好的設(shè)計中都使用了其中的至少一種），但它們結(jié)合使用的顏色可能會對體驗設(shè)計產(chǎn)生巨大影響。當(dāng)然，顏色的使用方式也會對顏色的感知產(chǎn)生巨大影響。以藍色為例，在簡約的布局當(dāng)中，大面積使用藍色作為主色調(diào)，和在大面積白底上使用很小的一抹藍色用來強調(diào) CTA 按鈕，所帶來體驗是截然不同的。

尊重文化差異

人類對于色彩都有著共通的認知，但不同國家對于色彩賦予了不同的含義。紅色在中國象征著喜慶、財富和愛情，而在西方國家被賦予了流血、犧牲、暴力和激進的文化意義，貶義的味道更重一些。而白色與紅色相反，白色在中國代表了死亡、反動和投降，以白色為主的設(shè)計常常會被視之為過于「素」，認為不夠吉利。而西方國家卻認為白色高雅、純潔和幸運，因此要根據(jù)不同的文化背景，使用不同的色彩，才能更好地降低被誤解的風(fēng)險。

另外一方面，隨著現(xiàn)代主義運動的普及，白色也擁有了更加現(xiàn)代的特征。在日本，白色甚至和當(dāng)?shù)匚幕Y(jié)合，延伸出更加細膩獨特的精神特質(zhì)，隨著日本戰(zhàn)后設(shè)計領(lǐng)域的發(fā)展和崛起，白色在這一地區(qū)的含義則更加豐厚。原研哉在《白》一書當(dāng)中，針對白色的含義和特征進行了非常深入的探討，之后的《Subtle》一書當(dāng)中，雖是圍繞紙來探討微妙的體驗，但是也沒少提及白色本身的特征。

例如股票交易市場，在國際股票市場通常是綠漲紅跌，這是因為紅色在西方國家代表著財政赤字，綠色代表著財富；而在中國正好相反是紅漲綠跌，這是因為在中國紅色象征著財富。

設(shè)計師必須根據(jù)產(chǎn)品的目標(biāo)受眾來審視其調(diào)色板的文化含義，這一點很重要。如果產(chǎn)品要面向全球受眾，請確保在使用的顏色和圖像之間取得平衡，以防止負面的文化內(nèi)涵。如果產(chǎn)品主要只針對特定文化，則設(shè)計師可以不用太關(guān)心所選調(diào)色板在其他文化中可能產(chǎn)生的影響。

歷史對配色的影響

時間變化對于配色所帶來的影響不僅僅如此。比如中日兩國在色彩使用上，還存在一個非常典型的差異，歷史上日本在一個很長的周期內(nèi)是作為中國的屬國所存在的，這也使得中國自古以來崇尚飽和度較高的正色，而日本則大多使用飽和度偏低的間色，這一特征可以從兩國的傳統(tǒng)色上體現(xiàn)出來：

△ 中國傳統(tǒng)色：https://color.uisdc.com/

△ 日本傳統(tǒng)色：https://color.uisdc.com/jp.html

性別誤區(qū)

或許天生如此，女性不喜歡灰色、棕色和橙色。她們鐘愛藍色、紫色和綠色。而男性不喜歡紫色、棕色和橙色。男性喜歡藍色、綠色和黑色。只要記住，當(dāng)你的產(chǎn)品目標(biāo)用戶群是男性時，選擇能傳達男性氣概的色彩，想象下你把運動類應(yīng)用的界面使用女性色彩，結(jié)果可想而知。

△ 男女最喜歡的顏色

△ 男女最不喜歡的顏色

3. 針對色盲用戶群體的設(shè)計

你有沒有想過你的 APP 使用人群中會有視力障礙者？

當(dāng)人們談?wù)撋r，他們通常指的是不能感知某些色彩。 大約 8％的男性和 0.5％的女性患有不同程度的色盲——他們在識別部分或者全部顏色時有困難。面對如此龐大的特殊受眾，設(shè)計師理應(yīng)關(guān)注他們的需求。

△ 正常人和紅綠色盲看到的相同色彩

因為色盲有多重表現(xiàn)形式，例如紅綠色盲，藍黃色盲和單色色盲。所以運用多樣的視覺線索來連接你 APP 的重要狀態(tài)是很重要的。絕不要僅僅依靠色彩來表示系統(tǒng)狀態(tài)。 相反，應(yīng)使用元素（如筆畫，指示符，圖案，紋理或文本）來描述操作和內(nèi)容。需要注意的就是不要簡單認為色盲就是簡單的分不清紅綠，色盲用戶對色彩的感受差異不僅僅是單獨某種的問題，是某些范圍色光的敏感程度問題。

有趣的事實：Facebook 的標(biāo)志和不怎么討喜的藍色配色是特意挑選的。因為 FB 創(chuàng)始人馬克·扎克伯格是紅綠色盲，他對藍色的識別是最好的。他曾說過，“藍色是我生命中最豐富的顏色，我?guī)缀蹩梢钥匆娺@世上所有的藍色。”

△ facebook

Photoshop 有非常實用的工具來幫助模擬色盲，在「視圖」的「校樣設(shè)置」菜單內(nèi)選中就可以使用了。這個功能讓設(shè)計師可以看到在色盲用戶的眼中你的界面是什么樣子的。

△ pinterest登陸頁紅綠色盲視圖

下面以點狀圖信息圖形為例，來說明如何為色盲用戶優(yōu)化信息圖：

優(yōu)化采用了這樣一些手段：1.調(diào)整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍、黃色。2.調(diào)整明度，使圖中幾個顏色在明度上差異更明顯。3.為不同元素賦予不同形狀。所有使用點元素的信息圖，都可以參考這種解決方式。

在實際設(shè)計過程中，我們需要在美觀和友好之間進行權(quán)衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。

4. 流行趨勢對色彩的影響

這是更長維度上的變化，在短時間以內(nèi)，流行色的趨勢變化，對于用色也同樣存在影響。這種影響在時尚行業(yè)有著非常直接的體現(xiàn)，而在網(wǎng)頁和 UI 設(shè)計行業(yè)，同樣存在。比如 2020 年的潘通年度流行色是「經(jīng)典藍」（Classic Blue），也就明白了為什么 iphone12 今年的主打色是藍色了。

所以，當(dāng)你在設(shè)計的時候，如果你的目標(biāo)用戶群體有著清晰的地域或者性別偏向，你可以有目的地利用這些知識來規(guī)避設(shè)計陷阱，更好地發(fā)揮色彩本身的功能和優(yōu)勢。如果受眾廣泛，則可以盡量使用通用性更強的色彩來進行設(shè)計。

• 知識點：

你知道世界上的顏色是什么嗎？

是否存在一種色彩，是不分性別文化，大家都會喜歡的呢？確實有人通過大規(guī)模的調(diào)研和探索找到了一種世界上的色彩：馬爾斯綠（Marrs Green）。來自全世界 100 多個國家 3 萬多人響應(yīng)號召完成了這項投票，并且最終選取出來的一款綠色。

色彩在UI設(shè)計中的應(yīng)用

1. 色彩的應(yīng)用

人腦對于色彩的記憶度要高于形態(tài)，即一個 App 給用戶留下深刻印象的往往是界面的色彩。例如說到支付寶，我們可能想不起它的首頁長什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍色。因此運用好色彩對 UI 設(shè)計十分重要，它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格，能有效的幫助用戶組織和閱讀信息，與界面設(shè)計產(chǎn)生聯(lián)系和記憶。好的配色往往依靠設(shè)計師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐，下面結(jié)合相關(guān)案例為大家講解色彩運用的幾個技巧。

不得觸碰的禁區(qū)

分析研究了很多優(yōu)秀設(shè)計作品，發(fā)現(xiàn)他們在用色的時候有一部分區(qū)域是不會使用的，也就是我們常說的“配色禁區(qū)”。當(dāng)然，這里的“禁區(qū)”是帶雙引號帶的，并沒有什么絕對的禁區(qū)，只是說這些顏色不易控制，在連基礎(chǔ)色都沒有駕馭好之前，盡量少碰。

配色禁區(qū)大概分為這三種：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)（紅色為禁區(qū)），如下圖：

綜合看來，不管是那種禁區(qū)，右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師請略過。

• 知識點：

在界面設(shè)計中，一般主色和輔助色都集中在右上角，次要的和不可點的顏色都集中在中上方，而文字信息和背景色則集中在左側(cè)，右下角禁區(qū)是我們要重點避開的對象。

色調(diào)一致

在 App 設(shè)計之前應(yīng)先確定界面的主色調(diào)，主色將占據(jù)界面中很大的比例，通常是品牌色，而輔助色、點綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配，這樣才能保證 App 整體色調(diào)的一致。色調(diào)一致的界面，能帶給用戶始終如一的視覺體驗。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍色（對比色）貫穿 App 始終。

60-30-10 原則

60% 30% 10%的原則，是達到色彩平衡的最佳比例。在 60%的空間使用主色，可以運用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個 App 的視覺焦點和色彩關(guān)系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10%的空間為點綴色，可以用在一些不太重要的元素又需要區(qū)分的時候。6:3:1 原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。

嗶哩嗶哩將粉色運用到頁簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上，藍色的輔助色用在角標(biāo)、圖標(biāo)上，還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上，主次非常清晰明了。

色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，其實就是「色不過三」原則，即在一個頁面中不要使用超過 3 種顏色搭配，這也和上面說的“60-30-10 原則”類似，即一個主色、一個輔助色和一個點綴色。但在實際 UI 設(shè)計中，迫于產(chǎn)品的需要可能會使用更多數(shù)量的色彩，但切記不可超過 7 種色相（注意不是 7 種色值），每個色相還可以運用其飽和度、明度的變化分解出豐富的色彩搭配。

美團外賣的首頁 20 個功能入口大圖標(biāo)的背景用了 9 種不同的色彩，每種色彩又包含一種低飽和度色彩進行彩色漸變，但并沒有顯得雜亂，而是呈現(xiàn)一種年輕時尚的律動感。這是因為這里雖然使用了 9 種不同的色彩，但仔細觀察發(fā)現(xiàn)只使用了 3 種色彩，其他 6 種則是從前者鄰近色中提取出來的搭配，再將它們錯落放置，呈現(xiàn)出豐富多彩的色彩搭配，整體和諧統(tǒng)一。

遠離純黑色和純灰色

黑色就像沒有生命力的深淵，使用戶陷入冷冷的負面情緒中。遠離純黑色和純灰色，是因為它們不存在于現(xiàn)實世界里。嘗試在純黑和純灰中加入一些色調(diào)，會讓界面看上去更柔和自然。另外，純黑色還會與白色產(chǎn)生強烈的對比度，看久了會使人疲勞，讓用戶產(chǎn)生焦慮的情緒。MONO 的導(dǎo)航欄并不是深黑色，而是加入了藍色的低飽和度藍黑色，它的界面背景也是加入了藍色的的淺色，這樣就不會讓界面看上去死氣沉沉的。

遵循色彩心理學(xué)

前文我們已經(jīng)了解過各種色彩的心理學(xué)知識，就是為了我們在進行 App 設(shè)計時提供依據(jù)。這些色彩都是源于人類對大自然最原始的感受，藍色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對于我們來說是司空見慣的，但其中卻蘊含著豐富的美感，并達到了和諧統(tǒng)一。網(wǎng)易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。

良好的可讀性

良好的可讀性在界面設(shè)計中能為用戶提供主次分明、層次清晰的閱讀體驗，而一個可讀性差的界面則會成為用戶瀏覽的障礙。那如何確保界面具有良好的可讀性呢？這就需要在界面設(shè)計中注意色彩搭配的對比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對比的度的亮色展示重要的元素，用低對比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容。例如蘋果 Music 的主要功能入口，標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色，與其他元素形成鮮明對比，就連深灰色的輔助文字都有著清晰的可讀性。

從大自然中獲得靈感

配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等。從大自然中獲取的配色靈感可以使你的設(shè)計更加切合用戶的審美，非常自然。而藝術(shù)是對自然的直接反映，是非常寶貴的資源，值得好好利用。我們可以搜集各種與自然風(fēng)光相關(guān)的圖片，從中提取色彩運用到設(shè)計中，這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動人心。天氣應(yīng)用 Marline 就是一個很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應(yīng)用即喚起了用戶的快樂情緒。

將 UX 顏色與品牌相匹配

品牌價值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用，但是它們不是唯一重要的因素，行業(yè)規(guī)范也是關(guān)鍵。使用與品牌主要競爭產(chǎn)品幾乎相同的配色方案不失一種好方法。配色在品牌視覺中所發(fā)揮的作用是不言而喻的，但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部。比如一個行業(yè)當(dāng)中，很多產(chǎn)品都使用了藍色，那么你的產(chǎn)品繼續(xù)使用藍色，可以讓用戶更快「識別出」你所屬的領(lǐng)域，但是本身也存在讓人混淆的風(fēng)險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。

△中國區(qū)或美國區(qū)，紅色和藍色都是最流行的顏色。

在進行品牌設(shè)計的時候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質(zhì)和情感屬性。然后，在具體設(shè)計的時候，再進一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。

從強調(diào)色入手

想要讓配色方案更加突出，在設(shè)計中添加強調(diào)色可能是最容易入手的地方。舉個例子，一個律師咨詢的 App 可能會使用傳統(tǒng)的藍色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強調(diào)色，會顯得獨特很多。

冷暖色對比搭配

冷暖對比色是自然平衡的規(guī)律，可以在設(shè)計中大量使用，這樣的配色會使作品非常的出彩，同時不顯單調(diào)，讓用戶感覺舒服平和。而且這種搭配方法基本沒有啥缺點，使用在設(shè)計中，技巧性比較多，對設(shè)計的細膩感受要求比較高，需要多練習(xí)。

黑白色搭配不過時

黑色是所有中性色中最強的，而白色是最常用的背景顏色。黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優(yōu)雅的氛圍。

強交互色彩

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺權(quán)重，以便用戶可以輕松識別它們。Nike 健身應(yīng)用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。

但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調(diào)、形狀、大小或?qū)Ρ榷龋瑥钠聊簧厦摲f而出。因此，交互色彩的有效性將基于用戶識別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。同時，次要功能權(quán)重要更輕，并在視覺上更接近信息元素。如上圖 Nike Training 界面中，“設(shè)置”和“聲音”按鈕只用簡單的白色，減輕對主按鈕的干擾，也避免了頁面中出現(xiàn)多個強交互按鈕。

保證良好的可讀性

可讀性是任何設(shè)計中的重要因素。你的顏色應(yīng)該清晰易讀，尤其是在處理文字時。因此對比度對視覺效果的影響就非常關(guān)鍵，對比度過小，就會使得界面出現(xiàn)灰蒙蒙的效果。清晰的對比度，一般會采用色彩的兩極，黑紙白字或白紙黑字。而在彩色背景上要讓內(nèi)容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互補色和明度接近的文字，因為這兩種搭配會產(chǎn)生一種“震顫效應(yīng)”，發(fā)出光暈的視覺效果。

UI 中的陰影

沒有完全純黑的陰影，陰影的顏色是會受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會更好。對于有顏色的元素，好的做法是為陰影設(shè)定與元素相同的顏色，并使其更暗一些。

如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的。但是如果你一定要用，把陰影透明度調(diào)到小于 10%及以下，并且顏色跟隨主色調(diào)來。比如按鈕為綠色，則可以為按鈕設(shè)定一個更深的綠色陰影，并加上小于 10%的透明度數(shù)值。如下圖，左側(cè)的按鈕陰影很自然，右側(cè)的則有一層模糊發(fā)光的效果，顯得不夠漂亮。

• 知識點：

為什么「超鏈接文字」要用藍色？

簡單說，因為在最早期的網(wǎng)站頁面中，藍色能呈現(xiàn)最高的對比度。

Tim Berners-Lee——web 的主要開創(chuàng)者，被認為是最早用藍色鏈接的人。

一個很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字。那時候，能用的非黑色、最深的文字顏色，就是藍色。所以，讓超鏈接文字突出顯示，同時保證可讀性，就選定了藍色。此后超鏈接文字都用藍色的傳統(tǒng)沿用至今。

2. App 設(shè)計中的色彩搭配

App 的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維。好的色彩搭配可以加深用戶對產(chǎn)品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時還能給用戶賞心悅目的視覺享受。那么，在 UI 設(shè)計時該如何進行色彩搭配呢？我們可以從 App 中都包含了那些色彩開始，通常一個 App 中包含了主色、輔助色、點綴色、背景色這 4 類，下面就以微信讀書為例進行詳細的講解（個人角度）。

主色

主色是指在配色中處于主導(dǎo)地位的色彩，給用戶的第一眼印象，通常是產(chǎn)品的品牌色。在 App 設(shè)計中，主色一般占有色相色彩的 60%的比例。這里指的是 60%的界面都使用到的主色比例，而不是使用面積（因為通常一個界面中使用面積最大的是背景色）。還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。我們看到微信讀書的第一印象，就可以判斷它的主色為藍色，這也是它的品牌色。在標(biāo)簽欄、按鈕、圖標(biāo)、注冊登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。

輔助色

輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。通常，主色的鄰近色、互補色、分散互補色和三角對立色都可以成為優(yōu)秀的輔助色，但注意輔助色不宜過多，否則就會使界面看上去花哨分散了主題。根據(jù) 6:3:1 原則，輔助色可以占有色相色彩的 30%或更少為宜。

在微信讀書中，綠色、橙色、梅紅、藍紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標(biāo)和欄目分類上。雖然輔助色看起來有點多，但其實都是從主色的鄰近色和對比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產(chǎn)品氣質(zhì)，又保證了整體搭配的和諧統(tǒng)一。

點綴色

點綴色是除了主色和輔助色以外的另一種色彩，通常體現(xiàn)在細節(jié)上。其作用是，當(dāng)頁面中主色和輔助色不能滿足關(guān)鍵信息的提示時，就需要點綴色來吸引用戶眼球，還有就是利用點綴色來平衡畫面的冷暖色調(diào)。點綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強烈的對比。一般點綴色是主色的互補色。在微信讀書中，使用了香檳金、梅紅和紅色作為點綴色。香檳金用在文章分享按鈕上，梅紅色用在點贊圖標(biāo)上，強調(diào)其特殊性，紅色用在通知及退出登錄提醒上，用于警示。

來康康這三種點綴色與主色之間存在什么樣的關(guān)系，在色相（H）上，3 種點綴色為鄰近色，與主色為互補色；在明度（B）上，3 種點綴色均為高明度色彩，起到強提醒的作用。這種強對比的互補色的點綴色可以快速引起用戶注意力。

背景色

背景色就比較好理解了，通常為了襯托內(nèi)容，大多數(shù) App 都是用淺灰色作為背景色，以白色作為背景色的對比色，來區(qū)分視覺層次。建議是可以根據(jù)前景色來提取背景色，將其調(diào)亮或變暗，這樣可以讓界面色調(diào)更加統(tǒng)一。在微信讀書中背景色是偏藍色調(diào)的淺灰色，而不是純灰色，背景對比色是在白色里加入了藍色色相，而不是純白色，整體對比較柔和，給人清爽通透的感覺。

• 知識點：

支付寶 Alipay Design 團隊提出過一個配色原則：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業(yè)務(wù)的各個場景中，具有非常好的延展性。

3. 迷人的漸變色

不同于單一色彩，漸變色不屬于任何色彩，它營造出千變?nèi)f化的視覺效果，卻又不會增加視覺負擔(dān)。相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計中具有更強的視覺沖擊力，有助于快速搶占視線。如今，這種的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風(fēng)格造成 UI 設(shè)計的嚴(yán)重同質(zhì)化，人們需要追求更加個性的視覺語言來滿足日益增長的設(shè)計需求。下面我們來了解幾種常見的漸變的使用技巧。

色相、飽和度、明度的漸變

色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產(chǎn)生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產(chǎn)生的視覺效果比較和諧單調(diào)；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。

漸變的表現(xiàn)形式

在界面設(shè)計中經(jīng)?？炊喔鞣N各樣的漸變表現(xiàn)方式，使用最多的有以下幾種：

• 水平漸變

這個很好理解，是指角度為 0 的線性漸變，是最流行的漸變形式。界面設(shè)計中多用在導(dǎo)航欄、進度條、按鈕等元素上，能讓畫面變得精致而通透。例如京東使用橙紅漸變的設(shè)計語言貫穿整個 App，從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽，全部都運用了這種由紅色到橙色的過渡。仔細觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變設(shè)計手法，使產(chǎn)品看起來更年輕化。

• 知識點：

在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致。而反過來就會與人的瀏覽視線相悖，應(yīng)避免。

垂直漸變

即角度為 90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊登陸頁，個人中心頭部等。垂直漸變中上下兩種色彩的深淺變化會產(chǎn)生截然不同的視覺效果，上淺下深會讓給人一種凸起的立體感，而上深下淺會給人一種凹陷下去的空間感。例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個畫面豐富的同時又不會太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。

角度漸變

角度漸變通常有對角漸變和多角度漸變。有角度的漸變相比水平和垂直漸變，它的使用場景更廣，如圖標(biāo)背板、啟動頁、注冊登錄頁、標(biāo)簽等。想讓界面更加絢麗、動感和迷人，這時候我們可以考慮多組漸變搭配使用。

色塊漸變

漸變的顏色不只可以運用在一個色塊上，還可以運用在一組色塊上。設(shè)計師運用一組近似性色彩，將每個菜單項清晰區(qū)分開，讓界面平衡在一個頻率上，這樣的畫面更有節(jié)奏感和舒適性。不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式。Clear Todos 是一款日常任務(wù)清單的 APP，它拋棄了傳統(tǒng)的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。

徑向漸變

是指色彩以圓心向四周擴散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個畫面的視覺焦點，將關(guān)鍵元素放在光源中心就會成為主角。通常被運用到大背景上，如啟動頁、引導(dǎo)頁等。Solar 天氣應(yīng)用的背景就是徑向漸變，光源擴散的效果營造出一種夢幻般的美感。

和諧的漸變色

漸變色是由一個色彩走向另一個色彩的過程，有著迷人的視覺效果。如果你仔細觀察兩種色彩的過渡關(guān)系，就會發(fā)現(xiàn)不是每次都會得到滿意的效果，例如紅綠漸變就很糟糕，因為它們兩者是互為對立的色彩，但是如果加入黃色的過渡色就會好很多。原因是當(dāng)兩種色彩之間超過 90 度就會導(dǎo)致其漸變色看上去不太和諧自然，只有控制在 90 度之內(nèi)才會產(chǎn)生美妙的變化。如何改善超過 90 度的兩種色相的漸變呢？這時候可以在兩色之間加入過渡色進行調(diào)和。例如當(dāng)從黃色到藍色漸變時，就可以加入紫色作為過渡才能呈現(xiàn)完美的視覺效果。

• 知識點：

在搭配漸變色時，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項，這樣才能創(chuàng)造出和諧的漸變色方案。

創(chuàng)建調(diào)色板及配色工具

調(diào)色板幫助我們在設(shè)計項目中建立色彩規(guī)范、提高工作效率。通過上文對色彩基礎(chǔ)知識的學(xué)習(xí)，接下來為大家介紹幾種簡單易用的創(chuàng)建調(diào)色板的小技巧，以及 Materia design 配色方法和配色網(wǎng)站推薦。

1. 從設(shè)計作品收集色彩

打開 dribbble，每一幅作品預(yù)覽頁左下角都有一份自動生成的配色板，很多同學(xué)可能不知道這個配色文件是可以下載的。將調(diào)色板保存到本地，為自己在創(chuàng)作時提供靈感。在 ps 里的操作步驟是：點擊“窗口—色板”，然后在色板的屬性面板右上角打開“導(dǎo)入色板”，載入剛下載的色彩文件即可。

它也有顏色搜索工具，輸入或選擇顏色值即可搜索相關(guān)配色的設(shè)計作品。

2. 從圖片取色

這種方法也很常用，不需要任何插件，丟一張圖片到 Ps，然后將圖片「馬賽克」處理下就可得到一組配色。例如，我們需要一組同色系的綠色，在網(wǎng)上（建議 unsplash 或 500px 等專業(yè)圖片網(wǎng)站）找一張樹葉的圖片，接著將圖片在 Ps 中打開，進入“濾鏡—像素化—馬賽克”，在打開的窗口里調(diào)節(jié)單元格大小即可。

同時，建議平時多去收集好看的攝影圖片和優(yōu)秀的配色方案，看的多了就知道什么是好的什么是 Low 的配色，對提升審美也有很大幫助。

△ pinterest畫板

3. 自定義色塊疊加

該方法稍微復(fù)雜一點，示例步驟如下：第一步繪制一個正方形做底板，填充一個顏色#5354F0；第二步分別在正方形的上和下 1/3 處疊加 20%的白色和黑色；第三步分別在正方形中和右 1/3 處疊加 40%、80%的紫紅色#DF56FA；最后改變紫紅色圖層的混合模式為疊加即可得到一組藍紫色色調(diào)的調(diào)色板。

4. 色彩系統(tǒng)

Materia design 調(diào)色板

Materia design 從生活場景中提煉出 19 個充滿活力的色彩，旨在和諧地協(xié)同工作，可用于開發(fā)品牌調(diào)色板。Materia design 提供了一整套調(diào)色板，從原色開始，延伸出其他許多色彩，這些色彩和諧相處，可用于產(chǎn)品設(shè)計的品牌色?；A(chǔ)色的飽和度是 500，Google 建議以此作為產(chǎn)品應(yīng)用的主色調(diào)，可以再選擇一種輔助色，并在主色的基礎(chǔ)上進行飽和度，明度變化，構(gòu)成一套配色方案。

如果上面的色板不能滿足你的需求，你可以選擇一個主色，Materia design 調(diào)色板生成工具會為你生成完整的色板。

主色和強調(diào)色

在色彩選取時，需要先明確品牌色在界面中的使用場景及范圍。在基礎(chǔ)色板中選擇主色，建議選擇飽和度為 500 的基礎(chǔ)色作為主色，根據(jù)設(shè)計需要在主色的基礎(chǔ)上增加 1～3 種不同飽和度、明度的色彩建立層次感，再選擇一種強調(diào)色突出重要內(nèi)容或操作，例如 FAB 的背景色。

深/淺背景上的文字

Materia design 通過文本的不透明度建立在不同背景上的深淺對比，對于淺色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38%；而黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割線不透明度 12%。Ant Design 也定義了一套用于界面文字、背景、分割線的中性色，在落地的時候同樣也是按照透明度的方式實現(xiàn)的。

背景

為了提高應(yīng)用之間的一致性和閱讀的可讀性，背景色根據(jù)設(shè)計需要選擇純白色或飽和度依次為 50、100、300 的灰色。

5. 配色工具推薦

顏色是一個很難掌握的概念-因為有無限多種可能的顏色組合，對于很多設(shè)計師來說還是一件蠻困難的事，為了讓設(shè)計配色變得容易些，下面推薦幾個常用的配色網(wǎng)站，希望能幫助大家在日常工作中節(jié)省更多的時間。

Adobe Color

Adobe Color 是一個基于網(wǎng)絡(luò)的應(yīng)用程序和創(chuàng)意社區(qū)，提供免費的色彩主題，并且在 Adobe 相應(yīng)的軟件中也提供了擴展程序，比如我們常用的 Photoshop 和 Illustrator。

△ https://color.adobe.com/

Adobe Color 通過拖拽色輪或輸入自定義色值，可以創(chuàng)造出基于相似、互補、三原色、正方形等不同色彩規(guī)則的配色方案。除此之外，還支持 CMYK、RGB、HSV 多種色彩模式的配色調(diào)整。用法很簡單，點擊顏色塊上的小三角確定基礎(chǔ)色，就會自動生成 5 個基于你所選色彩規(guī)則的配色方案，拖動下方的顏色條時相應(yīng)的也會改變配色方案。如果沒有靈感可以通過頂部導(dǎo)航進入“探索”頁，這里為我們提供了很多提取好的顏色和圖片，有的是攝影作品，有的是設(shè)計作品，上方的輪播圖提供的一些其他內(nèi)容，比如潘通流行色、Adobe 社區(qū)和手機端的 APP 等等，非常的實用。

Eva Design System

Eva Design System 是一個基于深度學(xué)習(xí)算法的配色網(wǎng)站。適用于給我們的產(chǎn)品或品牌生成一個系統(tǒng)的配色方案。右上角可以切換淺色模式和深色模式的對比。

△ https://colors.eva.design/

Colorhunt

Color Hunt 是由設(shè)計師 Gal Shir 創(chuàng)建的開放調(diào)色板集合，每天更新豐富的配色方案。顏色卡片下方可以看到更新的時間和喜歡人數(shù)。鼠標(biāo)懸浮在任一色塊上顯示顏色值，點擊顏色卡進入詳情頁可下載和分享，驚喜的是還可以添加到 chrome 瀏覽器，方便隨時隨地使用。

△ https://colorhunt.co/

Grabient

Grabient 是一個非常漂亮且實用的漸變配色網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360 度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。設(shè)計師可以在色塊下方自由添加和調(diào)整漸變的色系、以及線性漸變方向。

△ https://www.grabient.com/

當(dāng)然，以上這些配色工具只是為我們提供方便的，而不是主導(dǎo)我們的，所以在使用配色工具的時候最好是要有一定的理論基礎(chǔ)作為支撐，讓你的配色有理有據(jù)，切忌生搬硬套。

• 知識點：

對于新手設(shè)計師來說，顏色越少越容易把控畫面。色彩層級越精簡，就越容易達到整體色彩平衡，掌握好色彩的功能劃分必然會讓你的配色過程保持思路清晰從而提率。

同時，不管是 2C 還是 2B，很多大公司都構(gòu)建了自己的設(shè)計系統(tǒng)。如果你想學(xué)習(xí)別人是如何進行配色布局的，最快的方式就是研究他們的設(shè)計源文件。

6. 關(guān)于色彩空間配置(附加內(nèi)容)

建議設(shè)計軟件使用 sRGB 作為色彩空間的默認配置，而不要采用未管理（ Sketch 中默認是未管理），若團隊協(xié)作請?zhí)崆氨３稚士臻g配置的統(tǒng)一性。如果有需要針對廣色域色彩空間做項目，可以單獨設(shè)置該項目文檔的色彩空間為 Display P3 或者 Adobe RGB。

Mac 系統(tǒng)色彩空間配置

建議所有 macOS 用戶都在系統(tǒng)偏好設(shè)定的顯示器顏色設(shè)定當(dāng)中換用 sRGB IEC61966-2.1 這個校色方案，可以極大改善系統(tǒng)顯示效能。如果有外接顯示器，也建議使用外接的默認選項，默認選項一般可以發(fā)揮出該顯示器的最大色彩性能。

Sketch 色彩空間配置

Sketch 默認顏色配置是 Unmanaged「非托管」， 我們可以在「偏好設(shè)置」中為 Sketch 指定默認的色彩空間配置，如此一來每次新建設(shè)計文檔將會默認采用我們的設(shè)置作為默認的色彩空間，不用每次新建文檔都單獨設(shè)置一次。

設(shè)置方法：Sketch → 偏好設(shè)置(Preferences) → 通用(General) → 顏色描述文件(Color Profile)，修改下拉框選擇器的內(nèi)容為 sRGB IEC61996-2.1。（其他設(shè)計軟件設(shè)置方法類似）

如果要更改已有的文檔為 sRGB 色彩配置，可以通過文件——更改顏色配置，在彈出的對話窗里對文件進行色彩空間的更改即可。

寫在最后

其實無論是色彩理論還是配色方法，最本質(zhì)的東西就那些，更多的還是需要設(shè)計師在日后的工作中不斷的摸索和積累。這篇文章全部寫下來耗費了不少時間（小聲 BB：其實每篇都是），抱歉內(nèi)容確實有點多，但其實已經(jīng)是收著點寫了。就像大樹一樣，有很多分枝不斷生長，需要了解很多細分出來的深度知識。這也是寫這類文章的樂趣，通過不斷的查閱資料，把過去很多模糊的概念摸清楚了。果然學(xué)透一個知識點的最好方式就是把它講出來才能真正為自己所有。關(guān)于色彩的知識先分享到這里，希望對大家有所幫助，文中有不嚴(yán)謹(jǐn)或錯誤的地方，歡迎大家指正，一起學(xué)習(xí)成長。