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

色彩基礎(chǔ)知識(shí)

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

1. 色彩常識(shí)

原色

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

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

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

間色

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

復(fù)色

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

冷暖色

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

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

• 知識(shí)點(diǎn)：

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

2. 色彩三屬性

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

色相（Hue）

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

飽和度（Saturation）

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

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

明度（Brightness）

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

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

3. 色彩的搭配

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

單色

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

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

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

鄰近色

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

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

互補(bǔ)色

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

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

分裂互補(bǔ)色

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

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

對(duì)比色

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

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

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

四元色搭配

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

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

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

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

固有色

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

光源色

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

環(huán)境色

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

5. 色彩空間

Lab

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

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

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

Hsb

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

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

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

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

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

Hsl

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

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

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

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

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

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

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

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

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

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

• 知識(shí)點(diǎn)：

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

Yuv

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

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

色彩心理學(xué)

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

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

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

黑色

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

白色

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

灰色

灰色是代表著睿智、老實(shí)、執(zhí)著、嚴(yán)肅、壓抑、沉穩(wěn)。介于黑色和白色之間，也屬于無(wú)彩色，沒(méi)有色相也沒(méi)有純度，只有明度的變化。它和任何顏色都能很好的搭配，也常常用于背景色或用于突出其他彩色。灰色不像黑色那么堅(jiān)硬刺眼，他更有彈性，它比黑色更有深層次的力量。因此在畫(huà)面中，很少出現(xiàn)純黑，基本都是用深灰色來(lái)代替黑色，也可以用淺灰色來(lái)代替白色。

紅色

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

橙色

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

黃色

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

綠色

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

青色

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

藍(lán)色

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

紫色

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

色彩對(duì)用戶體驗(yàn)的影響

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

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

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

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

尊重文化差異

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

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

例如股票交易市場(chǎng)，在國(guó)際股票市場(chǎng)通常是綠漲紅跌，這是因?yàn)榧t色在西方國(guó)家代表著財(cái)政赤字，綠色代表著財(cái)富；而在中國(guó)正好相反是紅漲綠跌，這是因?yàn)樵谥袊?guó)紅色象征著財(cái)富。

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

歷史對(duì)配色的影響

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

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

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

性別誤區(qū)

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

△ 男女最喜歡的顏色

△ 男女最不喜歡的顏色

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

你有沒(méi)有想過(guò)你的 APP 使用人群中會(huì)有視力障礙者？

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

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

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

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

△ facebook

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

△ pinterest登陸頁(yè)紅綠色盲視圖

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

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

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

4. 流行趨勢(shì)對(duì)色彩的影響

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

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

• 知識(shí)點(diǎn)：

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

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

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

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

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

不得觸碰的禁區(qū)

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

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

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

• 知識(shí)點(diǎn)：

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

色調(diào)一致

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

60-30-10 原則

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

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

色不過(guò)三

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

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

遠(yuǎn)離純黑色和純灰色

黑色就像沒(méi)有生命力的深淵，使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色，是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里。嘗試在純黑和純灰中加入一些色調(diào)，會(huì)讓界面看上去更柔和自然。另外，純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了會(huì)使人疲勞，讓用戶產(chǎn)生焦慮的情緒。MONO 的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會(huì)讓界面看上去死氣沉沉的。

遵循色彩心理學(xué)

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

良好的可讀性

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

從大自然中獲得靈感

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

將 UX 顏色與品牌相匹配

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

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

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

從強(qiáng)調(diào)色入手

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

冷暖色對(duì)比搭配

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

黑白色搭配不過(guò)時(shí)

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

強(qiáng)交互色彩

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

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

保證良好的可讀性

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

UI 中的陰影

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

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

• 知識(shí)點(diǎn)：

為什么「超鏈接文字」要用藍(lán)色？

簡(jiǎn)單說(shuō)，因?yàn)樵谧钤缙诘木W(wǎng)站頁(yè)面中，藍(lán)色能呈現(xiàn)最高的對(duì)比度。

Tim Berners-Lee——web 的主要開(kāi)創(chuàng)者，被認(rèn)為是最早用藍(lán)色鏈接的人。

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

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

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

主色

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

輔助色

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

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

點(diǎn)綴色

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

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

背景色

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

• 知識(shí)點(diǎn)：

支付寶 Alipay Design 團(tuán)隊(duì)提出過(guò)一個(gè)配色原則：

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

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

3. 迷人的漸變色

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

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

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

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

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

• 水平漸變

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

• 知識(shí)點(diǎn)：

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

垂直漸變

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

角度漸變

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

色塊漸變

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

徑向漸變

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

和諧的漸變色

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

• 知識(shí)點(diǎn)：

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

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

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

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

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

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

2. 從圖片取色

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

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

△ pinterest畫(huà)板

3. 自定義色塊疊加

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

4. 色彩系統(tǒng)

Materia design 調(diào)色板

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

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

主色和強(qiáng)調(diào)色

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

深/淺背景上的文字

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

背景

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

5. 配色工具推薦

顏色是一個(gè)很難掌握的概念-因?yàn)橛袩o(wú)限多種可能的顏色組合，對(duì)于很多設(shè)計(jì)師來(lái)說(shuō)還是一件蠻困難的事，為了讓設(shè)計(jì)配色變得容易些，下面推薦幾個(gè)常用的配色網(wǎng)站，希望能幫助大家在日常工作中節(jié)省更多的時(shí)間。

Adobe Color

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

△ https://color.adobe.com/

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

Eva Design System

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

△ https://colors.eva.design/

Colorhunt

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

△ https://colorhunt.co/

Grabient

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

△ https://www.grabient.com/

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

• 知識(shí)點(diǎn)：

對(duì)于新手設(shè)計(jì)師來(lái)說(shuō)，顏色越少越容易把控畫(huà)面。色彩層級(jí)越精簡(jiǎn)，就越容易達(dá)到整體色彩平衡，掌握好色彩的功能劃分必然會(huì)讓你的配色過(guò)程保持思路清晰從而提率。

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

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

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

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

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

Sketch 色彩空間配置

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

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

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

寫(xiě)在最后

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