簡單是最高級的復雜

配色系統(tǒng)是設計系統(tǒng)的核心元素，創(chuàng)建配色系統(tǒng)的方法有很多種。例如，根據(jù)谷歌 Material Design 3 指南，一個設計系統(tǒng)必須具有主色、次要色、三級色和表面色（各種背景色）調色板，這將迫使你使用超過 40 種顏色。這么多的顏色會導致混亂，在設計過程中的會有干擾，大多數(shù)顏色甚至不會被使用。

設計系統(tǒng)是公司的核心產品，其用戶是設計、開發(fā)和創(chuàng)意團隊。因此，設計系統(tǒng)必須為所有人理解，為團隊使用，為測試提供錯誤檢查，并為公司盈利。我一直在努力實現(xiàn)這些目標，并因此改進了一種提供這些功能的配色系統(tǒng)。

這種配色系統(tǒng)：

1. 提供更少、更有限的（總共 19 種）顏色選項，減少設計團隊的決策過程。
2. 為開發(fā)團隊方便、一致地開發(fā)產品而減少問題數(shù)量。
3. 簡化設計運營管理并降低組織范圍內的溝通成本。
4. 縮短交付流程，減少 bug 修復和預算成本。
5. 使用品牌色單色化整個界面。
6. 同時涵蓋淺色和深色模式，避免出現(xiàn)額外的深色主題調色板和變量。
7. 通過更改 HSB 值輕松修改和適應新項目。

要創(chuàng)建一個具備上述特性的配色系統(tǒng)，需要對色彩和 Figma 的實現(xiàn)有一定的專業(yè)知識。我這里提供一份 figma 配色文件作為參考： https://www.figma.com/community/file/1298331226357565644

一、什么是 HSB 色彩空間?

從本質上講，RGB 色彩空間中有 16,777,216 種顏色，每種顏色都有唯一的十六進制代碼，對于我們設計師來說不太容易理解。如果想要在不使用配色生成器的情況下生成獨立的配色系統(tǒng)，那么最易于理解和編輯的表示方法就是 HSB 色彩空間。它依賴于 360° 的色輪：

色輪與色相值的相互關系圖示

色相（Hue)+ 飽和度(Saturation)+亮度(Brightness)=HSB

HSB 色彩空間有三個影響十六進制代碼的值：色相（Hue）、飽和度（Saturation）和亮度（Brightness）

1. 色相: 色相 (Hue) 定義了顏色的類別，取值范圍為 0° 到 360°，每 60° 為一個主色。H:0/360 代表紅色，H:60 代表黃色，H:120 代表綠色，H:180 代表青色，H:240 代表藍色，H:300 代表洋紅色。
2. 飽和度: 飽和度 (Saturation) 影響顏色的鮮艷程度，取值范圍為 0 到 100，數(shù)值越高，顏色越鮮艷。S：0-33，極淡，接近白色；S：33-66，淡雅，介于淺色和鮮艷之間；S：66-100，飽和，鮮艷。
3. 亮度: 亮度 (Brightness) 影響顏色的明暗程度，取值范圍為 0 到 100，數(shù)值越高，顏色越亮。B：0-33，極暗，接近黑色；B：33-66，中度亮度，介于暗色和亮色之間；B：66-100，高亮，明亮。

要生成十六進制顏色代碼，必須為這三個輸入值（色相、飽和度、亮度）都指定一個數(shù)值。例如，只要 H（色相）值保持為 228，無論 S（飽和度）和 B（亮度）如何變化，都只會呈現(xiàn)不同色調的藍色。

融合 H（色相）、S（飽和度）和 B（亮度）三個層面，可以生成色相值為 228 的各種色調。

二、創(chuàng)建基于 HSB 的色板

用這種方法創(chuàng)建的配色系統(tǒng)將在淺色和深色模式下都完全可訪問。為了實現(xiàn)這一點，主色必須是可訪問的，并且必須預先定義所需的顏色數(shù)量。

1. 定義一個可訪問的主色

主色與背景必須形成至少 4.5:1 的對比度才能構建可訪問的配色系統(tǒng)。因此，在定義主色之前，我們需要了解“可訪問的”配色系統(tǒng)究竟需要滿足哪些要求。

人眼有三種類型的視錐細胞，S-M-L，用于感知不同的光波長度。M 和 L 錐細胞同時對相同波長的綠色和黃色產生反應，導致人眼感知到 20°-200°色調值之間的顏色更亮，并且這個區(qū)域與明亮顏色的對比度較低。（Ps：從人的身體條件出發(fā)，是一個相對客觀的因素，比較有說服力。）

基于上述信息，只要配色系統(tǒng)滿足以下 HSB 值要求，就有可能在淺色模式下達到最大程度的可訪問性：

1. 色相值在 200°-20°之間(不是 20°-200°)
2. 飽和度介于 50–100之間
3. 明度介于 50–100之間

深色模式專屬的配色系統(tǒng)可以使用與淺色模式相反的 H 值。H 值是影響可訪問性的核心參數(shù)。飽和度和亮度成反比，高亮度會增加對比度，而低飽和度會降低對比度。你可以預先設置一個可訪問的主色來作為基礎。

從理論和實踐角度考量，這里的主色被定為 H:228 比較合適。

某些顏色的波長范圍，特別是那些偏藍和綠的區(qū)域 (約 400-480 納米和 580-700 納米)，與亮色及其在色輪上的位置對比度足夠，近似于色相 (H) 值 200° 到 20° 的顏色。

2. 定義錨點

在設計個人項目時，你可以考慮使用 19 種顏色的配色系統(tǒng)，包括一個主色、8 種淺色調和 8 種深色調。了解錨點顏色后，就可以輕松計算其余顏色的色調。

設計系統(tǒng)中的基礎顏色，白色 [#FFFFFF] 和黑色 [#000000]，它們是配色方案中不可定制的錨點，在進行色彩分級時不計入其中。

可定制的錨點位于配色方案的第 2 步、第 9 步（主色）和第 18 步。首先從主色開始，將其值設置為 H:228、S:76 和 B:92，以確?？稍L問性。為了在主色與其淺色調、純黑色和純白色之間留有足夠的色彩間隙，建議將淺色調的值設置得更接近純白色，深色調的值設置得更接近純黑色。（注：末尾這 2 個顏色，可以根據(jù)自己的項目具體情況來設計具體色值）

可定制和不可定制的錨的方案

3. 插值

在這個步驟中，我們將計算一些中間顏色，它們介于最淺的淡色調和主色之間，以及主色和最暗的深色調之間。這些中間顏色的飽和度 (S) 和亮度 (B) 會根據(jù)一定的規(guī)律進行微調。

從主色開始的步驟中，S 和 B 值必須根據(jù)外部顏色的值進行增加或減少。淺色調、主色和深色調之間 S 和 B 值的差異會被平均分配到色彩梯度中。

這個公式必須用于插值:

([較大值]-[較小值])/[梯度數(shù)]=[每一步的值]

公式具體怎么用？下面給一個例子：

①插值飽和度

在這個配色方案中，主色具有 76% 的飽和度，淺色調的飽和度降低到 4%，而深色調的飽和度則增加到 60%。規(guī)定從主色到淺色調和深色調的過渡是通過 8 個梯度實現(xiàn)的。

1. (76–4)/8=9 。為了從主色逐漸過渡到淺色調，需要在每一步的 S 值中減去 9
2. (76–60)/8=2 為了從主色逐漸過渡到深色調，需要在每一步的 S 值中減去 2

②插值亮度

在這個配色方案中，淺色調的亮度最高，為 100%，主色則略暗一些，為 92%，而深色調的亮度最低，僅為 12%。規(guī)定從主色到淺色調和深色調的過渡是通過 8 個梯度實現(xiàn)的。

1. (100–92)/8=1 為了從主色逐漸過渡到淺色調，需要在每一步的 B 值中增加 1
2. (92–12)/8=10 為了從主色逐漸過渡到深色調，需要在每一步的 B 值中減去 10

在配色系統(tǒng)中，初始顏色值的分配可以根據(jù)需要靈活調整。你可以根據(jù)顏色漸變的平滑程度或突出某些特定的顏色，來決定分配數(shù)值的方式。

例如，你可以將數(shù)值分配得更均勻，以獲得平滑的漸變效果；也可以將數(shù)值分配得更不均勻，以突出某些特定的顏色。此外，你還可以添加錨點來控制漸變的過渡方式，使?jié)u變在特定位置產生明顯變化。（Ps：具體顏色可根據(jù)項目動態(tài)調整，顏色并不是死的）

S 和 B 值插值表

4. 透明度變化

透明顏色是設計系統(tǒng)中不可或缺的元素，用于為文本和組件狀態(tài)提供層級結構。

為了獲得透明顏色，請復制第一個和最后一個色階顏色，并將不透明度值降低到 64% 和 32%。

可以根據(jù)需求添加 16%、8% 和 4% 不透明度的額外透明版本，并可以自定義這些值。

明確的和可能的透明顏色的呈現(xiàn)

5. 根據(jù)主題搭配顏色和陰影

配對顏色可以使主題和組件狀態(tài)的顏色搭配更加協(xié)調，并方便在明暗模式之間切換。因此，配色系統(tǒng)通常采用奇數(shù)個顏色，每邊都有自己的配對。這樣，就可以同時為明亮主題提供深色調，為暗色主題提供淺色調。

淺色和深色模式的顏色配對

6. 交叉檢查可訪問性

在為 Figma 變量和主題分配顏色時，應注意選擇對比度高的顏色組合，以確保視力障礙人士也能清晰辨別。

由于主色對比度高達 5.39:1，因此整個調色板都符合無障礙標準。

在創(chuàng)建暗色主題組件時，可以使用覆蓋明暗模式的 AA/AAA 級無障礙配色方案。在檢查所有顏色組合時，如果發(fā)現(xiàn)任何無障礙性問題，可以嘗試調整錨點和 S 和 B 值來解決。

調色板的對比度方案

三、將調色板分配給 Figma 變量

調色板已正確生成，可以分配給 Figma 變量了。請按照以下步驟操作：

Figma 的變量很好用，在這里可以創(chuàng)建，如果還沒用過的可以試試看

1. 基本顏色：實色

創(chuàng)建一個集合，命名為“基礎（Primitives）”。點擊“創(chuàng)建變量 > 顏色”，并命名為“color/solid/0”。以同樣的方式添加調色板中的所有顏色，將它們命名為 50 的倍數(shù)。

基本顏色變量的分配

2. 基本顏色：透明度

再次點擊“創(chuàng)建變量 > 顏色”，命名為“color/transparent/0 · 64%”，并以同樣的方式添加其他顏色。

透明顏色變量的分配

3. 顏色 Tokens

為了將基本顏色用作有限變量，必須將它們分配給 Tokens。

請按照創(chuàng)建顏色變量的方式進行操作：點擊“顏色選擇器(color picker ) > 庫(libraries)”，并在列表中選擇所需的變量。

點擊右側的“+”按鈕，添加新模式，并將它們命名為“Light Mode（明亮模式）”和“Dark Mode（暗色模式）”。

顏色模式按容器分配

4. 描邊 Tokens

以同樣的方式賦值變量，可以根據(jù)需要進行增加。

5. 文本 Tokens

透明顏色用于文本標記，以在排版中創(chuàng)建層次結構。

6. 按鈕 Tokens

一個設計系統(tǒng)通常有三個版本的按鈕:主要，色調-次要和輪廓-次要。顏色搭配和對比度方案被利用，同時適應黑暗模式的重要組件，如按鈕。

7.  顏色顯示篩選

Figma 最近發(fā)布了一項名為“顏色范圍控制”（Color scoping）的功能，它允許你根據(jù)未選擇的屬性來隱藏部分變量，從而避免顯示所有變量。

我們建立的變量系統(tǒng)完全依賴于以下結構：容器（containers）、文本（texts）和描邊（strokes）。這些設置可以根據(jù)你的項目需求進行調整。

例如，在按鈕 Tokens 中，我必須為“outlined”按鈕選擇“stroke”而不是“frame”。如果按照以下步驟進行設置，可以使庫面板中顯示的變量數(shù)量最少化，并避免在設計過程中出現(xiàn)沖突。

四、實現(xiàn)和產出

接下來將演示如何在設計中使用這些變量。已在給的設計參考文件中展示了生成的調色板的實現(xiàn)和輸出，大家可以去 figma 文件里直接看，

1. 淺色模式

調色板的色調已正確定義到變量中，并產生了預期的結果：

在設計效果圖中，使用調色板的淺色調創(chuàng)建了明亮主題的色彩風格。

2. 深色模式

與色調類似，調色板的深色調也被正確定義到變量中，并產生了預期的結果：

在設計中，使用調色板的深色調創(chuàng)建了暗色主題的色彩風格。

3. 主題化

這個顏色系統(tǒng)可以很容易地修改和適應任何其他項目。唯一需要做的就是定義一個可訪問的基礎色，對其進行插值，并更改原始值。

讓我們看看不同采用案例的結果:

適用于 H:340, S:84, B:88 的初稿設計

迭代是永無止境的

我們現(xiàn)在擁有了一個經過精心組織、完全無障礙的品牌調色板，它支持亮暗模式并涵蓋了整個設計系統(tǒng)。在實施過程中，根據(jù)設計系統(tǒng)結構的不同，可能會出現(xiàn)一些不一致之處，你需要根據(jù)需求修改和調整顏色值、變量和顏色范圍設置。

五、總結

通過實踐，你可以學會如何使用顏色插值、HSB 顏色空間、無障礙顏色設計以及 Figma 變量。

設計系統(tǒng)的需求可能會讓你深入學習這些領域的某個知識點，從而提升能力。設計師之所以出色，是因為他們不斷探索和學習，在探索過程中鍛煉了自己的專業(yè)技能。

所以，根據(jù)今天學到的新知識，重新刷新自己產品的色彩系統(tǒng)，然后也用上文章說的 figma 的變量功能來做吧。實踐后，你才能真正掌握。

歡迎關注作者的微信公眾號：「彩云譯設計