導(dǎo)語：分析界面視覺基本方式是“形色字構(gòu)質(zhì)”，我準(zhǔn)備慢慢寫一些實(shí)戰(zhàn)基礎(chǔ)的文章，爭取每一篇都可以深入解決一個(gè)設(shè)計(jì)的基本問題。B端設(shè)計(jì)非常依賴于設(shè)計(jì)系統(tǒng)，好的顏色定義，能幫我們設(shè)計(jì)出一些更加統(tǒng)一、舒適、層級分明、可讀性強(qiáng)的界面。

本篇文章將通過以下三個(gè)章節(jié)，由淺入深的一步步搭建色彩系統(tǒng)：

1. 色彩理論簡析
2. HSB的概念
3. 搭建色彩系統(tǒng)的方法及工具

一、色彩理論簡析

如果你對色彩理論很熟悉，可直接跳過這一部分，因?yàn)楸竟?jié)較長。

顏色在設(shè)計(jì)中和日常生活中都起著至關(guān)重要的作用，我們可以通過顏色喚起特定的情緒或情感。而在一些沒有文字的場景，色彩也是傳遞信號的媒介。

我們先來溫習(xí)一下色彩理論（Color Theory），它可以幫助我們在不同的條件下正確的使用顏色，也可以幫助我們認(rèn)識顏色的基礎(chǔ)。

1.1 傳統(tǒng)色輪（Traditional Color Wheel）

首先，我們先學(xué)會傳統(tǒng)色輪的構(gòu)成。

我們都知道紅色、黃色、藍(lán)色是原色（Primary Color），如下圖所示：

當(dāng)我們把紅色、黃色、藍(lán)色在圓環(huán)中分別混合時(shí)候，會生成次要顏色（Secondary Color），綠色、橙色、紫色，如下圖所示：

如果我們再進(jìn)一步色環(huán)混合，就構(gòu)成了艾薩克·牛頓（Isaac Newton）創(chuàng)建的傳統(tǒng)12色色輪（沒錯，就是牛頓），如下圖：

1.2 色調(diào)、飽和度、明度、色溫

關(guān)于顏色的屬性，有四種重要屬性值得我們?nèi)プ⒁?，分別是色調(diào)、飽和度、色值、色溫。

1.2.1 色調(diào)（Hue）

色調(diào)就是顏色在色輪的位置，色輪主要有12種顏色，但是我們按上述方法無限去分割混合顏色，我們的色輪將是一個(gè)由漸變組成的圓環(huán)，圓是360度，所以，色調(diào)的值就是0-360。如下圖所示：

1.2.2 飽和度（Saturation）

飽和度也可以稱為色彩強(qiáng)度（Intensity）或者色度（Chroma），高飽和的顏色是充滿活力且強(qiáng)烈的，低飽和的顏色是灰色和暗淡的。如下圖所示：

1.2.3 色值（Value）

色值告訴我們顏色的深或者淺。我們可以給顏色混合黑色（Shade），這樣可以使顏色變黑；也可以把顏色混合白色（Tint），來使得顏色變白；還可以在顏色表面混合灰色（Tone），來使得顏色變灰；如下圖所示：

1.2.4 色溫（Temperature）

色溫，色輪可以分割成兩組，主要是暖色組和冷色組，如下圖所示：

當(dāng)我們在色輪上移動時(shí)，顏色也會隨著色溫變化，暖紅色逆時(shí)針移動時(shí)，多了更多的黃色，當(dāng)我們順時(shí)針移動，就多了更多的藍(lán)色，變成了冷色紅，這就是我們通過旋轉(zhuǎn)色輪來制作紅色溫度帶。如下圖所示：

當(dāng)我們把色調(diào)、飽和度、色值、色溫結(jié)合起來時(shí)，我們發(fā)現(xiàn)最初的12種顏色中的每一種都有無數(shù)的變化。

1.3 色彩調(diào)和（Color Harmonies）

那么我們該怎么組合這些色，使顏色使用變得平衡呢？這里有一些常見的方式去組合顏色，也就是我們俗稱的配色或色彩調(diào)和（Color Harmonies）。

單色（Monochromatic Colors）：我們只要選取一個(gè)顏色，并調(diào)整明度和飽和度來創(chuàng)建。

互補(bǔ)色（Complementary Color）：這個(gè)方案是從色輪的兩側(cè)選取兩種顏色，也就是色環(huán)上對立的180度的兩個(gè)色。這種配色適合創(chuàng)造強(qiáng)烈的對比的配色。

分散互補(bǔ)色搭配（Split-Complementary Color）：這個(gè)方案是選用了互補(bǔ)色的兩個(gè)鄰居顏色。這樣既適合創(chuàng)造強(qiáng)烈的對比配色，又讓我們多了一個(gè)色調(diào)的選擇。

三角對立配色（Triadic colors）：如果要尋找三種互相平衡的顏色，可以選擇12色的色輪上任意三個(gè)三角對立的顏色。這樣可以組合出大膽而充滿活力的顏色。

矩形配色模式(Tetradic Color Scheme) ：矩形配色是由兩組互補(bǔ)色所構(gòu)成,通常具有五光十色的繽紛感,但至少有一種主色來突顯效果。

鄰近色（Analogous Color ）：相似色是指以色相環(huán)上鄰近的2-4個(gè)顏色組成，我們稱之為近似色。是最常使用的和諧顏色。

角度配色：

同類色：色環(huán)角度相距 30° 以內(nèi)的顏色。這種顏色構(gòu)成的畫面給人一種和諧、統(tǒng)一、高級的感覺，比單色搭配又了一分生動。

近似色：色環(huán)角度相距 30°-90° 的顏色。近似色既可以適度色彩對比，又可以協(xié)調(diào)統(tǒng)一，色彩生動又不失和諧。

對比色：色環(huán)角度相距 120°-180° 的顏色。對比色能表達(dá)強(qiáng)烈的視覺情感，帶來較大的視覺沖擊力。

互補(bǔ)色：色環(huán)上相對的顏色，也就是色環(huán)相距 180° 的顏色為互補(bǔ)色。互補(bǔ)色是色彩對比最為強(qiáng)烈的兩個(gè)顏色。

1.4 配色網(wǎng)站推薦

1.4.1 一鍵配色：

• Paletton
• Muzli Colors
• Color space
• Adobe color

1.4.2 漸變色生成：

• Uigradients
• Webgradients

1.4.3 色彩靈感

• Nipponcolors 日式配色
• Brand Colors 所有品牌配色（建議再看品牌搜官網(wǎng)，分析大牌拼色主色和網(wǎng)站主色區(qū)別和聯(lián)系）
• Material Colors
• Apple Colors
• Fluent Colors

1.4.4 圖片顏色提取

Eagle App（建議設(shè)計(jì)師擁有的圖片采集工具，儲存最好鏈接iCloud）

二、HSB的概念

2.1 HSB的定義

直接引用百度（這次百度講的比wiki輕量易懂）的定義：

HSB色彩模式即色度/色調(diào)（Hue）、飽和度（Saturation）、亮度（Brightness）。它采用顏色的三屬性來表色，即將顏色三屬性進(jìn)行量化，飽和度和亮度以百分比值（0%-100%）表示，色度以角度（0°-360°）表示 。 HSB色彩模式以人類對顏色的感覺為基礎(chǔ)，描述了顏色的三種基本特性 。

通過上文色彩理論得知，將組成色彩的四要素改變?yōu)镠SB的三要素即可，下面我們逐一整合。

2.2 色調(diào)（Hue）

H-表示色調(diào)，即顏色的相貌，顏色的調(diào)性，在色輪上，色相是按位置度量的，取值在0—360度之間（黑色與白色無色相）。這個(gè)與色彩理論的色輪是相同的，當(dāng)我們把色輪展開，就會出現(xiàn)設(shè)計(jì)軟件內(nèi)拾色器的色相調(diào)整帶了。

2.3 飽和度 （Saturation）

S-表示顏色的飽和度，即顏色的純度，飽和度高色彩較艷麗，取值在0—100之間。飽和度低色彩就接近灰色。

特別高的飽和度容易產(chǎn)生“椰樹牌椰汁”的設(shè)計(jì)感，而相對較低的飽和度則可創(chuàng)造高級感。

2.4 明度（Brightness）

B-表示顏色明度/亮度，即顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。

2.5 拾色器

設(shè)計(jì)軟件中的拾色器就是把明度變?yōu)閅軸，飽和度變?yōu)閄軸，將色輪展開變?yōu)樯珟А?/p>

在色彩理論中的色值被融合到了明度，去掉了顏色溫度也用色調(diào)帶來調(diào)節(jié)。

三、搭建色彩系統(tǒng)的方法及工具

從工作角度，Material Design 的色彩系統(tǒng)實(shí)戰(zhàn)且有理有據(jù)，所以這一篇章是在它基礎(chǔ)上結(jié)合我的個(gè)人項(xiàng)目經(jīng)驗(yàn)整合的。

3.1 建立色彩系統(tǒng)的原則

層級感：顏色可以表示哪些元素是可交互式的，元素之間的關(guān)系以及它們的強(qiáng)弱程度。

可讀性：當(dāng)文字出現(xiàn)在彩色背景上時(shí)，文本和重要元素（如圖標(biāo)）應(yīng)符合可讀性標(biāo)準(zhǔn)。

表現(xiàn)力：通過顏色展現(xiàn)產(chǎn)品個(gè)性，體現(xiàn)品牌基因。

一致性：建立色彩系統(tǒng)可以提高設(shè)計(jì)的一致性。

3.2 色彩系統(tǒng)（Baseline Color Theme）的組成

色彩系統(tǒng)一般是按顏色的類型+功能分類，我們也可以把顏色分為主色、輔助色、中性色、背景色、遮罩色、功能色、業(yè)務(wù)色。

主色（Primary Color）：主色是我們系統(tǒng)的代表顏色，一般與品牌色相關(guān)聯(lián)。

輔助色（Secondary Color）：在b端中常用中常與中性色合二為一。

中性色（Neutral color）：中性色又稱為無彩色系，指由黑色、白色及由黑白調(diào)和的各種深淺不同的灰色系列，中性色不屬于冷色調(diào)也不屬于暖色調(diào)。黑白灰是常用到的三大中性色。一般用作前景色，也可部分用于背景色。（我個(gè)人的習(xí)慣是中性色代替輔助色，背景使用的中性色直接移入背景色）

背景色（Background Color/UI Base Color）：用作頁面、模塊、組件的背景顏色。

遮罩色（Overlay）：常用的是全局overlay；在states中，一般以黑色、白色為基色，配合百分比使用。

功能色（Status Color）：鏈接色、成功色、警告色、錯誤色。

業(yè)務(wù)色（Business color）：一般由較多的色彩組成，一般用在數(shù)據(jù)可視化、業(yè)務(wù)標(biāo)簽等情景。

3.3 色板的制作方式

我們在Material Design經(jīng)?？吹筋伾忻Q和Color ID。

https://materialui.co/colors 在這個(gè)網(wǎng)站可以選擇hsl點(diǎn)擊查看顏色詳情，這樣能更好理解不顏色的變化。

名稱就是我們給這個(gè)顏色的代稱，比如綠色我們?yōu)榱搜髿饪梢苑Q為“Teal“，比如背景色我們可以叫“Ui-base”。

Color ID 表示了顏色明度+飽和度的層級代號，同樣的color ID表示了顏色在不同色調(diào)的情況下明度+飽和度是在視覺上是層級統(tǒng)一的。

在建立色盤時(shí)，我比較建建議采用Material Design的這種命名方式。

下面我來分享幾種色盤的制作方式：

方式一：HSB精細(xì)調(diào)整（耗時(shí)）

• 第一步：選定主色
• 第二步：用主色的色調(diào)加減15，得到24色相帶（360/15=24）
• 第三步：挑選出12或者16個(gè)顏色，作為色相帶。挑選原則是，過于相似的色多次出現(xiàn)可以刪掉
• 第四步：感官明度矯正，微調(diào)色相帶的明度和飽和度，使其看起來更加一致、柔和
• 第五步：制作色板：首先我們選定基色；然后我們給基色有序降低透明度，再去吸色，這樣就得到淺色衍生色；我們用#000000的有序透明度疊加到主色上，再去吸色，這樣就得到了深色衍生色。

如下圖所示：

我們可以注意到，這個(gè)方式做出的色板色調(diào)是完全一致的。

在色板中，淺色衍生時(shí)，飽和度層層遞減；暗色衍生時(shí)，明度層層遞減。這個(gè)是很多大企業(yè)選色的標(biāo)準(zhǔn)方式，很繁瑣但是很規(guī)范。需要注意的是，規(guī)范不是限制，很多時(shí)候，我們需要根據(jù)實(shí)際情況，再對顏色做一些微調(diào)。

關(guān)于第五步色板制作制作方式除了剛才所說的，我們也可以用市面上也有色板生成工具：

網(wǎng)站一：Material Design

這個(gè)是我比較推薦的色板生成方式，因?yàn)闀詣訖z測對應(yīng)顏色明暗度的ID，這樣命名就很方便了，還可以取保不同色調(diào)下，相同明度+透明度的顏色統(tǒng)一。

網(wǎng)站二：Coolors

Coolors的優(yōu)勢是可以生成梯度非常豐富的色板。

方式二：HSB粗略調(diào)整（快速）

我們跟著上圖一步步嘗試：

• 第一步：選一個(gè)基色
• 第二步：打開拾色器，把顏色向左拖動一點(diǎn)（降低飽和度），制作出稍淺的顏色
• 第三步：把顏色向左再拖一點(diǎn)（降低飽和度），制作出更淺的顏色
• 第四步：把顏色向左拖動時(shí)，顏色變灰了，于是將顏色亮度高一些，把顏色飽和再稍高點(diǎn)。飽和度過低發(fā)灰時(shí)，可以提升亮度，略高升飽和度來調(diào)制。
• 第五步：將顏色向下拖一點(diǎn)（降低亮度），制作出稍深的顏色。
• 第六步：改變色調(diào)，來制作更多顏色的色盤，有時(shí)，只改變色調(diào)會導(dǎo)致同色調(diào)下顏色區(qū)分不大，再微調(diào)明度和飽和度即可。如下圖所示：

在拖動顏色時(shí)，有時(shí)明度和飽和度一起會有變化，這是可以接受的。這個(gè)方式比較適合色感非常好、經(jīng)驗(yàn)豐富的設(shè)計(jì)師去做，或者是做一些網(wǎng)頁項(xiàng)目可以采用。

3.4 主色（Primary Color）

主色是我們系統(tǒng)的代表顏色，一般與品牌色相關(guān)聯(lián)。

主色的應(yīng)用場景：

• 高亮提醒
• 選中、開關(guān)等當(dāng)前狀態(tài)
• 按鈕
• 空狀態(tài)

選擇主色

要點(diǎn)1:?主色的選擇需要盡量選擇冷色系（冷色系見色彩理論P(yáng)t. 1），這是為了避免用戶長時(shí)間使用帶來視覺疲勞。

要點(diǎn)2:?避免與錯誤、警告顏色沖突（如果沖突，可用鄰近色替換錯誤、警告顏色）

要點(diǎn)3:?在亮色模式下，飽和度和亮度不低于70。

可以在ant design中進(jìn)行在線檢測 https://ant.design/docs/spec/colors-cn，當(dāng)選擇非合適主色時(shí)，會出現(xiàn)提示

3.5 中性色（Neutral color/Grayscale）

界面中的黑色、白色、灰色的梯度。

中性色的應(yīng)用場景：

中性色主要被大量的應(yīng)用在界面的文字部分，此外背景、邊框、分割線等場景中也非常常見。

中性色板的創(chuàng)建方式如下：

• 第一步：利用#000000或者便黑色的顏色在#FFFFFF背景上建立透明度梯度
• 第二步：吸色（這一步可以省略），我們發(fā)現(xiàn)了UI設(shè)計(jì)中常見的顏色：#333333、 #666666、#999999、 # CCCCCC
• 第三步：疊加藍(lán)色或主色透明度的2-10%，再吸色。疊加藍(lán)色會使我們的文字閱讀更舒適，主色最好為冷色系的情況再疊加。

3.6 前景色（Foreground Color）/ “On” Colors的概念

我們先明確一個(gè)顏色的“位置”概念，前景色（Foreground color）、背景色（Background Color）和遮罩（Overlay），任何設(shè)UI計(jì)場景無非就是這三個(gè)色的疊加或反復(fù)疊加創(chuàng)造出的效果。

前景色一般是文字、icon、分割線、描邊的顏色，遮罩一般在前景色和背景色之間，背景色在最底部。常見場景如下圖所示：

需要注意的是，在沒有states或者我們定好了背景顏色梯度的情況，overlay是沒有的；當(dāng)依賴overlay制作梯度，梯度最低的情況，overlay透明度也是0，所以視覺上是沒有的。

接下來，我們來看一下Material Design的例子，如下圖：

我們注意到，Material Design顏色中出現(xiàn)了“on xx“的顏色，其實(shí)on xx color （之后簡稱為“on Color”）顏色就是我們之前提到的前景色的的前景色。on單詞后對應(yīng)的Primary/Secondary/Surface等就是對應(yīng)的背景色。

從上圖我們看出，在primary color/Error color為背景色的情況，前景色為白色；在secondary/background/surface為背景色的情況，前景色為黑色。當(dāng)然，前景色還可能是主色、輔助色、警示色等等。

前景色的梯度方式除了用色板，還可以直接使用透明的梯度，比如下圖：

以透明度控制前景色顏色層級的好處是，前景色可以和背景色更好的融合，帶來更好的閱讀和視覺體驗(yàn)。我們也可以用這樣的方法制作出自己的前景色透明度梯度，甚至功能色也可以加入其中，如下圖所示：

3.7 可讀性標(biāo)準(zhǔn)（Legibility standards）

所有文本都應(yīng)清晰易讀并符合(WCAG 2.0)無障礙閱讀標(biāo)準(zhǔn)，WCAG 2.0 中將顏色對比等級分為 3 種，A級、AA級、AAA級，等級越高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。

• A級：對比度 3：1，是普通觀察者可接受的最低對比；
• AA級：對比度 4.5：1，是普通視力損失的人可接受的最低對比度；
• AAA級：對比度 7：1，是嚴(yán)重視力損失的人可接受的最低對比度。

WCAG的網(wǎng)站：https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

網(wǎng)站可讀性必須達(dá)到AA級別，也就是內(nèi)容文本至少4.5:1，標(biāo)題文本至少達(dá)到3:1

可讀性可以在https://color.review/輕松查看，如下圖：

根據(jù)上文，我們知道前景色有時(shí)候也會為透明度，在我們建立色彩系統(tǒng)選色的時(shí)候就需要用到Materiel Design的可讀性檢測網(wǎng)站了：

https://material.io/resources/color/

從上圖我們可以看到，在我們選好主色，并且主色為背景的情況下，對應(yīng)的黑色、白色和我們自定義文字顏色，在我們選好的主色上的是否有可讀性，如果有，最低的透明度的值是多少可以滿足可讀性。

3.8 交互狀態(tài)顏色（Inactive States Colors）

B端交互狀態(tài)顏色的設(shè)計(jì)原則是：

明顯的：狀態(tài)必須有明確的不同將它們與其他和周圍的 UI 設(shè)計(jì)和交互狀態(tài)區(qū)分開來，并根據(jù)其優(yōu)先級進(jìn)行強(qiáng)調(diào)。

連續(xù)的：交互狀態(tài)的改變要做到連續(xù)的，不能是跳躍性過大。

一致的：交互狀態(tài)應(yīng)該在不同組件之間保持，以提高可用性。

常見的交互狀態(tài)我們依然參考Material Design，如下圖：

默認(rèn)態(tài) Normal/Enable：啟用狀態(tài)表示組件或元素可交互。

懸停態(tài) Hover：當(dāng)用戶將光標(biāo)置于交互元素上方時(shí)，出現(xiàn)懸停交互狀態(tài)。

點(diǎn)擊態(tài) Pressed：當(dāng)用戶按下時(shí)的交互狀態(tài)。

聚焦態(tài) Focused：當(dāng)用戶使用鍵盤或語音等輸入方法突出顯示元素時(shí)，出現(xiàn)聚焦?fàn)顟B(tài)

禁用態(tài) Disabled：禁用狀態(tài)表示組件或元素不可交互。

已選擇 Selected：表示用戶已選擇的狀態(tài)。

激活態(tài) Activated：激活狀態(tài)傳達(dá)突出顯示組件或交互元素，表示已激活。

拖拽 Dragged：當(dāng)用戶點(diǎn)擊后拖拽移動元素或組件。

開關(guān)（啟用/禁用）on/ff：上圖中將checkbox和radio也放在了開關(guān)內(nèi)，checkbox和radio狀態(tài)其實(shí)需單獨(dú)列出，并疊加其他狀態(tài)。

功能狀態(tài) Status：含在錯誤、警告、成功、信息時(shí)的狀態(tài)。

在b端設(shè)計(jì)中，常見的是將Normal、Hover、Press、Disable狀態(tài)的色彩列出，其余狀態(tài)配合組件顯示。

常見的用色彩表示狀態(tài)的方式有以下4種：

方式一：利用色板的顏色梯度來表示狀態(tài)，比如Ant Design，如下圖：

方式二：用利用透明度創(chuàng)建梯度表示狀態(tài)，如下圖：

方式三：利用HSB來創(chuàng)建色彩梯度表示狀態(tài)：

• Hover：H不變 S加10 B減5
• Pressed：H不變 S加20 B減10
• Disable：HSB均不變，不透明度 30%

方式四：利用Overlay的透明度創(chuàng)建梯度：

之前提到的前景、遮罩、背景概念在這里就派上用場了，我們來用Material Design來做例子，如下圖：

需要注意的是，遮罩的的基色是是與前景色一致的。

3.9 梯度（Elevation）

在界面中，陰影的大小可以使界面產(chǎn)生高低不同的層級感。

比如在B端設(shè)計(jì)中，Drawer、Dialog等彈窗出現(xiàn)時(shí)，伴隨的就是陰影。

陰影是為了創(chuàng)造界面中的z軸層級而出現(xiàn)的?？梢酝ㄟ^透明度創(chuàng)造“投影遠(yuǎn)近”來定義。也可以根據(jù)Material Design的陰影梯度來調(diào)整，如下圖：

最后，關(guān)于色彩系統(tǒng)搭建，其實(shí)還需要有暗色模式的部分，準(zhǔn)備在顏色篇（二）去講述，希望這些贅述能給你幫助。

微信公眾號：JQ DESIGN

微信號：JQ_Zhao

參考：

https://en.wikipedia.org/wiki/HSL_and_HSV

https://baike.baidu.com/item/HSB色彩模式?tp=4_11

http://theventurebank.com/pd/4603466.html

https://mp.weixin.qq.com/s/CZxY9gLBmbSy-q-LvHlCuQ

https://www.youtube.com/watch?v=uSZirUYhtf4

http://theventurebank.com/ucd/1729140.html

http://theventurebank.com/pd/4758224.html

https://mp.weixin.qq.com/s?__biz=MzIyNTA0MTU3Mg==&mid=2649355368&idx=1&sn=c975643e9388e251881142fa146b272f&chksm=f01899a3c76f10b54f48368e004db0f6c3852234d4e8d0d831ea77803a6b98786abe929e72d3&cur_album_id=1395098444968296449&scene=189#rd

https://mp.weixin.qq.com/s?__biz=MzIyNTA0MTU3Mg==&mid=2649354664&idx=1&sn=8fa8f70fe2f0a9851b5c798c7f94401b&chksm=f0189c63c76f157541e0f8653fe8231dcbd5e93d2f02966633abb28c782b1017dc4f6f278a41&cur_album_id=1395098444968296449&scene=189#rd

https://www.bilibili.com/video/BV1t7411o79q?p=1&share_medium=iphone&share_plat=ios&share_source=WEIXIN&share_tag=s_i&timestamp=1626533294&unique_k=c8YpZg

本文由 @JQ Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議