導語：分析界面視覺基本方式是“形色字構質”，我準備慢慢寫一些實戰基礎的文章，爭取每一篇都可以深入解決一個設計的基本問題。B端設計非常依賴于設計系統，好的顏色定義，能幫我們設計出一些更加統一、舒適、層級分明、可讀性強的界面。

本篇文章將通過以下三個章節，由淺入深的一步步搭建色彩系統：

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

一、色彩理論簡析

如果你對色彩理論很熟悉，可直接跳過這一部分，因為本節較長。

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

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

1.1 傳統色輪（Traditional Color Wheel）

首先，我們先學會傳統色輪的構成。

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

當我們把紅色、黃色、藍色在圓環中分別混合時候，會生成次要顏色（Secondary Color），綠色、橙色、紫色，如下圖所示：

如果我們再進一步色環混合，就構成了艾薩克·牛頓（Isaac Newton）創建的傳統12色色輪（沒錯，就是牛頓），如下圖：

1.2 色調、飽和度、明度、色溫

關于顏色的屬性，有四種重要屬性值得我們去注意，分別是色調、飽和度、色值、色溫。

1.2.1 色調（Hue）

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

1.2.2 飽和度（Saturation）

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

1.2.3 色值（Value）

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

1.2.4 色溫（Temperature）

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

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

當我們把色調、飽和度、色值、色溫結合起來時，我們發現最初的12種顏色中的每一種都有無數的變化。

1.3 色彩調和（Color Harmonies）

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

單色（Monochromatic Colors）：我們只要選取一個顏色，并調整明度和飽和度來創建。

互補色（Complementary Color）：這個方案是從色輪的兩側選取兩種顏色，也就是色環上對立的180度的兩個色。這種配色適合創造強烈的對比的配色。

分散互補色搭配（Split-Complementary Color）：這個方案是選用了互補色的兩個鄰居顏色。這樣既適合創造強烈的對比配色，又讓我們多了一個色調的選擇。

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

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

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

角度配色：

同類色：色環角度相距 30° 以內的顏色。這種顏色構成的畫面給人一種和諧、統一、高級的感覺，比單色搭配又了一分生動。

近似色：色環角度相距 30°-90° 的顏色。近似色既可以適度色彩對比，又可以協調統一，色彩生動又不失和諧。

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

互補色：色環上相對的顏色，也就是色環相距 180° 的顏色為互補色?；パa色是色彩對比最為強烈的兩個顏色。

1.4 配色網站推薦

1.4.1 一鍵配色：

• Paletton
• Muzli Colors
• Color space
• Adobe color

1.4.2 漸變色生成：

• Uigradients
• Webgradients

1.4.3 色彩靈感

• Nipponcolors 日式配色
• Brand Colors 所有品牌配色（建議再看品牌搜官網，分析大牌拼色主色和網站主色區別和聯系）
• Material Colors
• Apple Colors
• Fluent Colors

1.4.4 圖片顏色提取

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

二、HSB的概念

2.1 HSB的定義

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

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

通過上文色彩理論得知，將組成色彩的四要素改變為HSB的三要素即可，下面我們逐一整合。

2.2 色調（Hue）

H-表示色調，即顏色的相貌，顏色的調性，在色輪上，色相是按位置度量的，取值在0—360度之間（黑色與白色無色相）。這個與色彩理論的色輪是相同的，當我們把色輪展開，就會出現設計軟件內拾色器的色相調整帶了。

2.3 飽和度 （Saturation）

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

特別高的飽和度容易產生“椰樹牌椰汁”的設計感，而相對較低的飽和度則可創造高級感。

2.4 明度（Brightness）

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

2.5 拾色器

設計軟件中的拾色器就是把明度變為Y軸，飽和度變為X軸，將色輪展開變為色帶。

在色彩理論中的色值被融合到了明度，去掉了顏色溫度也用色調帶來調節。

三、搭建色彩系統的方法及工具

從工作角度，Material Design 的色彩系統實戰且有理有據，所以這一篇章是在它基礎上結合我的個人項目經驗整合的。

3.1 建立色彩系統的原則

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

可讀性：當文字出現在彩色背景上時，文本和重要元素（如圖標）應符合可讀性標準。

表現力：通過顏色展現產品個性，體現品牌基因。

一致性：建立色彩系統可以提高設計的一致性。

3.2 色彩系統（Baseline Color Theme）的組成

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

主色（Primary Color）：主色是我們系統的代表顏色，一般與品牌色相關聯。

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

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

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

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

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

業務色（Business color）：一般由較多的色彩組成，一般用在數據可視化、業務標簽等情景。

3.3 色板的制作方式

我們在Material Design經?？吹筋伾忻Q和Color ID。

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

名稱就是我們給這個顏色的代稱，比如綠色我們為了洋氣可以稱為“Teal“，比如背景色我們可以叫“Ui-base”。

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

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

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

方式一：HSB精細調整（耗時）

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

如下圖所示：

我們可以注意到，這個方式做出的色板色調是完全一致的。

在色板中，淺色衍生時，飽和度層層遞減；暗色衍生時，明度層層遞減。這個是很多大企業選色的標準方式，很繁瑣但是很規范。需要注意的是，規范不是限制，很多時候，我們需要根據實際情況，再對顏色做一些微調。

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

網站一：Material Design

這個是我比較推薦的色板生成方式，因為會自動檢測對應顏色明暗度的ID，這樣命名就很方便了，還可以取保不同色調下，相同明度+透明度的顏色統一。

網站二：Coolors

Coolors的優勢是可以生成梯度非常豐富的色板。

方式二：HSB粗略調整（快速）

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

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

在拖動顏色時，有時明度和飽和度一起會有變化，這是可以接受的。這個方式比較適合色感非常好、經驗豐富的設計師去做，或者是做一些網頁項目可以采用。

3.4 主色（Primary Color）

主色是我們系統的代表顏色，一般與品牌色相關聯。

主色的應用場景：

• 高亮提醒
• 選中、開關等當前狀態
• 按鈕
• 空狀態

選擇主色

要點1:?主色的選擇需要盡量選擇冷色系（冷色系見色彩理論Pt. 1），這是為了避免用戶長時間使用帶來視覺疲勞。

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

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

可以在ant design中進行在線檢測 https://ant.design/docs/spec/colors-cn，當選擇非合適主色時，會出現提示

3.5 中性色（Neutral color/Grayscale）

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

中性色的應用場景：

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

中性色板的創建方式如下：

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

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

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

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

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

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

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

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

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

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

3.7 可讀性標準（Legibility standards）

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

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

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

網站可讀性必須達到AA級別，也就是內容文本至少4.5:1，標題文本至少達到3:1

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

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

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

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

3.8 交互狀態顏色（Inactive States Colors）

B端交互狀態顏色的設計原則是：

明顯的：狀態必須有明確的不同將它們與其他和周圍的 UI 設計和交互狀態區分開來，并根據其優先級進行強調。

連續的：交互狀態的改變要做到連續的，不能是跳躍性過大。

一致的：交互狀態應該在不同組件之間保持，以提高可用性。

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

默認態 Normal/Enable：啟用狀態表示組件或元素可交互。

懸停態 Hover：當用戶將光標置于交互元素上方時，出現懸停交互狀態。

點擊態 Pressed：當用戶按下時的交互狀態。

聚焦態 Focused：當用戶使用鍵盤或語音等輸入方法突出顯示元素時，出現聚焦狀態

禁用態 Disabled：禁用狀態表示組件或元素不可交互。

已選擇 Selected：表示用戶已選擇的狀態。

激活態 Activated：激活狀態傳達突出顯示組件或交互元素，表示已激活。

拖拽 Dragged：當用戶點擊后拖拽移動元素或組件。

開關（啟用/禁用）on/ff：上圖中將checkbox和radio也放在了開關內，checkbox和radio狀態其實需單獨列出，并疊加其他狀態。

功能狀態 Status：含在錯誤、警告、成功、信息時的狀態。

在b端設計中，常見的是將Normal、Hover、Press、Disable狀態的色彩列出，其余狀態配合組件顯示。

常見的用色彩表示狀態的方式有以下4種：

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

方式二：用利用透明度創建梯度表示狀態，如下圖：

方式三：利用HSB來創建色彩梯度表示狀態：

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

方式四：利用Overlay的透明度創建梯度：

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

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

3.9 梯度（Elevation）

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

比如在B端設計中，Drawer、Dialog等彈窗出現時，伴隨的就是陰影。

陰影是為了創造界面中的z軸層級而出現的?？梢酝ㄟ^透明度創造“投影遠近”來定義。也可以根據Material Design的陰影梯度來調整，如下圖：

最后，關于色彩系統搭建，其實還需要有暗色模式的部分，準備在顏色篇（二）去講述，希望這些贅述能給你幫助。

微信公眾號：JQ DESIGN

微信號：JQ_Zhao

參考：

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

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

http://www.aharts.cn/pd/4603466.html

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

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

http://www.aharts.cn/ucd/1729140.html

http://www.aharts.cn/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 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議