設計系統中的色板和色階，到底有什么用？

大概每一位 B 端設計師在做組件設計時，都會對色板印象深刻，同時也會有不少的疑問：

1. 為什么一套組件需要有這么多的顏色？
2. 為什么一個顏色需要有這么多的色階？
3. 衍生出來的梯度色階到底該如何使用呢？

色板相關閱讀：

一、色板和色階的作用

經常看我文章的朋友對于“基礎組件”和“業務組件”的區別應該耳熟能詳了。

對于相對底層的、開源的、通用的基礎組件庫來說，批量生產多種顏色的色板成本相對較低、準確性也更高，且可以滿足中后臺設計中的開發者和設計者對于顏色的大部分使用需求。例如基礎組件庫 Ant Design、Arco Design 都提供了相對全面和豐富的平臺系統級別的色彩體系，包括 10+ 顏色的基礎色板、中性色板和功能色板：

Ant Design 的基礎色板（部分）、中性色板和功能色板

而對于更具備專業性和業務屬性的、高級的業務組件來說，色板的搭建則是圍繞著產品和業務的品牌色來完成。設計師不需要在一開始搭建業務組件庫時就產出十幾種不同顏色的色板，可以先做出業務必用的品牌色板、中性色板和功能色板，之后在設計需求中，再基于品牌色進一步定義符合產品調性以及功能訴求的輔助色板：

某產品的品牌色色板、中性色板和功能色板

色板和其梯度色階的作用如下：

1. 操作狀態，有效反饋。

色階中的顏色可以用在頁面模塊的層級、組件操作的狀態上，顏色上的微妙變化可以為用戶提供有效的交互反饋：

按鈕不同狀態的顏色，可以從色階中選擇

2. 全局托底，以防萬一

即使是視覺表現力相對較弱的 B 端產品，也會有多種顏色使用的需求，比如 Tag 標簽、插畫、營銷海報等等。為了使產品的視覺元素更具備一致性，設計師可以借鑒通用組件庫的基礎色板，并結合自己產品的品牌色板制定產品的輔助色，最大限度的保證配色的合理性和用色的一致性：

Ant Design 預設的 Tag 類型和顏色，也支持按需定制

3. 縱向推衍，確保精確

色階的每一階顏色都是由相鄰階層的顏色通過色值的計算推演得到的。一個色板中的色階數量越多，漸變關系就會越精確和微妙，顏色的精確度也會越高。為了方便使用，通常一個色板做 1015 級的色階即可：

Arco Design 的基礎色板，從顏色的 HSB 值中可以看出色階中的顏色存在一些數值規律。

4. 橫向比較，層級一致

假設我們將每一個色板都做了 10 級色階，這樣就可以保證不同的顏色在同一層色階層級上的明度、純度和飽和度相對一致。比如下圖中：第 6 級的紅色（Red 60）和第 6 級藍色（Blue 60）就都是這兩個色板中的主色，都可以用于按鈕的默認狀態；而第 3 級的紅色（Red 30）和第 3 級的藍色（Blue 30）就都可以用于按鈕的禁用狀態：

產品中顏色是會傳遞信息語義和內容層級的，這樣使用色階來規范顏色的選擇，可以保證同一個或同一類信息層級上的色彩搭配是相對協調和合理的。

二、色板創建工具

很多同學都想了解組件系統中的色板的計算和推演方式，其實色板是由設計師和前端統一協作完成的，設計師提供色彩學的理論基礎，前端開發完成算法推演。色板的演算方式并不簡單，給大家推薦幾個色板使用或生成工具 ，可以省去推演過程和時間：

1. Ant Design：Sketch 插件 Kitchen

網站鏈接：https://kitchen.alipay.com/

優勢：在最新版的 Kitchen 色板中可以直接選擇和填充顏色，支持一鍵將 AntD 的基礎色板導入至本地文件色板或者創建本地樣式：

不足：

1. 沒有給出顏色的應用建議，無法判斷色彩是否符合 WCAG（Web 內容無障礙指南）的標準；
2. 除了 12 個主色以外，暫時無法選擇其他顏色生成衍生色板，不具備定制性。

2. Material Design：Figma 插件 Material Theme Builder

網站鏈接：https://goo.gle/m3designkit

優勢：可以選擇你想要的任何一種顏色，插件會幫你計算并生成整套衍生色板，同時還會檢驗出不符合 WCAG 規則的主題色，并直接利用系統算法幫你做優化：

不足：

1. 要使用魔法，并保證網絡暢通；
2. 無法確定具體色彩的應用和搭配方式是否符合 WCAG 標準。

3. Acro Design：色彩配置工具網站

Arco Color Palette

網站鏈接：https://arco.design/palette/list

優勢：提供了 13 個基礎主色色板，設計師可以自行調整這些主色，定制新的色板及色階；同時提供 WCAG 色彩標準檢測工具，可以對色彩的應用和搭配做全方位的檢測：

不足：暫時沒有提供插件，只支持導出 json 和 less 格式。

歡迎關注作者微信公眾號：「長弓小子」