最近我在想一個問題：假如設計師負責一款全新的產品，不受已有規范的束縛，我們該如何定義產品的色彩體系呢？有些設計師可能會憑自己的主觀想法定義色值，覺得這個顏色在界面里好看就用了，但是我覺得這樣是不夠規范的，更多應該考慮到全局的通用性和科學性。

基于這個問題點，我網上查看研究了一些資料文章，參考了 Ant Design 和 Material Design，學習到了一些定義色彩 ID 的理論知識，來看看吧。

色彩

色彩是設計系統的重要組成部分，可以使用在品牌感、信息層級、操作指引、交互反饋的場景。在細分層面，色彩可以分為主色、輔助色和中性色。

設計師調整顏色的時候，建議使用 HSB 模式，調整色彩更直觀，符合心理預期，因為人腦也是通過這個模式來辨別顏色的。

其中，H 代表色相，S 代表飽和度，B 代表亮度。色相是區別各種不同色彩的標準，通過 360°圓形色環來取色，每一度代表一個色相。飽和度指色彩的純度，飽和度越低，越往白色過渡。亮度指色彩的明亮程度，亮度越低，越往黑色過渡。

這是常用軟件 HSB 模式調整顏色的截圖，幫助大家理解。

主色

主色一般和產品的品牌色相關聯，很大程度決定了產品整體的調性和視覺風格，常用于主按鈕、文字高亮、強調操作等界面場景。

產品 1.0 版本以上，Logo 一般都會有定義好的品牌色，界面設計中的主色和品牌色保持一致即可，可以傳遞統一的理念。如果從 0 開始的新產品還沒有定義 Logo 和品牌色，界面要先設計開發，這時我們可以結合產品行業特性、產品理念、產品名稱、用戶特征等進行思考，提取關鍵字和情緒板，從而提取多個色系，最終和多角色溝通確定主色系，避免后續反復調整的成本。

確定主色系后，設計師該如何定義具體色值呢？可能大部分設計師都是直接吸取同色系的大廠產品色值，再微調下參數做出差異性就確定了。這確實是一個取巧方法，畢竟不容易出錯。但我覺得設計師需要有自己的思考過程，所以進行了國內外大廠產品主色的調研分析，總結了一些共同點和差異點。

我發現 Apple 系和國內產品的主色傾向于飽和度和明度較高的顏色，基本分布在橫豎向三等分的右上角，我認為主色取值可以參考這個區域。

看下部分產品字色、按鈕色、深色模式的效果，還可以。

而谷歌系、微軟系產品傾向于明度稍低的顏色。從設計層面來看，顏色有點暗、有點臟，不太建議。

我有點不太理解國外設計師的視覺審美，研究了 WCAG 2.1 無障礙標準后，才發現他們在為障礙（色盲）用戶著想，主色都符合 WCAG 2.1 的 4.5:1 最小對比度（AA 級）。這個標準涵蓋了使 Web 內容更易于訪問的各種建議，遵循這些準則將使更多殘疾人更容易獲取網站內容。從分析的國內產品中，我只發現知乎的主色符合這個標準。

這其實就引發了我們的思考，視覺效果和無障礙人群體驗，哪個更重要呢？我覺得兩個層面都挺重要的，不過在實際場景中，建議設計師更多是結合品牌調性、視覺效果去定義具體色值，在美感、可讀性、可用性之間得到平衡。注意一點，明度不宜太低，顏色會比較臟，也不太符合年輕用戶的審美。

如果我負責一款產品，已經確定藍色系為主色，我會選擇明亮一點的色值，在文字、按鈕、深色模式等常用場景下保證可讀性和可用性。色值定為#247FFF，后面講輔助色的時候會用到。

輔助色

輔助色，可以用于特定功能、狀態反饋、應用圖標等場景，反饋的成功、失敗、警告狀態最常用到了。

基于主色，我們怎么定義輔助色呢？我總結了點小方法。

1. 以主色的色相為基礎，差值為 15°，圍繞 360°色環提取 24 色。（差值 15°的顏色屬于同類色臨界點，有利于我們劃分色度層級，又不會失去想要的色系）

2. 參考常用配色理論：相似色、鄰近色、三分色、互補色，得出部分色值。

3. 結合界面場景和使用效果，對顏色進行刪減和補充，最終確定所需要的輔助色。（建議最多 12 種，避免色彩太多，不利于設計師理解使用）

4、將輔助色和主色對比，進行視覺感官明度校正。（雖然色彩的飽和度和明度一樣，但不同色相的視覺感官明度是不一樣的，綠色、黃色、青色實際看起來特別淺，所以我們要手動調整）

校準方式：在顏色上面疊加純黑色圖層，圖層模式選擇色相，就可以直觀地看到無彩色視覺感官明度。相差大的顏色可以以 5 為差值調整飽和度或明度，最后再根據效果進行微調。（色相的差值能被 5 整除，飽和度和明度同樣適用）

調色板

為了滿足界面對色彩的需求，需要對主色和輔助色進行色板延伸，建立不同梯度的調色板。

這里有兩種計算方法：

1. 淺色調色板，在顏色上依次疊加 20%、40%、60%、80%、90%不透明度的白色；深色調色板，在顏色上依次疊加 20%、40%、60%、80%不透明度的黑色。

2. 淺色調色板，色相（H）往感光明度高的色相依次差值 2，飽和度（S）依次減少 15，明度（B）依次增加 5；深色調色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次減少 15，飽和度（S）依次增加 5。（Ant Design 和 Material Design 調色板也都加了色相旋轉）。

從對比效果來看，比較建議使用第 2 種方法，使用 HSB 模式的值進行遞減/遞增得到完整漸變色板，顏色更加明亮通透。Ant Design 官網也有在線生成調色板功能，和第二種方法邏輯類似，可以快速生成，大家可以去使用。

最終生成主色和輔助色的調色板，效果如下。

中性色

中性色包含黑、白、灰，合理地使用中性色能夠使界面信息層級主次分明，助力于瀏覽體驗，常用于字色、控件色、背景色的場景。

由于純灰色顯得比較臟，人眼對偏藍的灰色閱讀體驗更好，在桌面端更建議使用灰色相加點藍。

計算方法：

1. 選擇和主色視覺感官明度相同的灰色，按調色板方法建立梯度色板。

2. 將藍色調色板不透明度調為 10%，灰色調色板不透明度調為 90%，兩個色板疊加，最后吸取顏色，再加入黑白兩個色板，就確定了從白到黑的 12 種顏色。

最終，我們就確定了一款產品的色彩體系，界面中使用的顏色需要遵循調色板色值，一致性設計。

總結

以上就是設計系統中建立色彩體系的思考總結。設計師調整顏色時，建議使用 HSB 模式，調整色彩更直觀，符合心理預期。主色需要結合品牌調性、視覺效果定義具體 ID 色值，在美感、可讀性、可用性之間得到平衡。注意，明度不宜太低，顏色會比較臟。輔助色、調色板、中性色定義 ID 色值過程中，建議遵循一定的色彩理論準則，科學地定義顏色，更有說服力。

還有許多不足，繼續學習去了。

參考文獻：

• Ant Design 設計系統 - 色彩
• Material Design 設計系統 - 色彩
• Ant Design 色板生成算法演進之路
• Web 內容無障礙指南 (WCAG) 2.1

歡迎關注作者微信公眾號：「ALEI的設計思考」