想做好UI配色？只需要這三步！

一套產品色彩需要有哪幾種色彩：品牌色+提醒類型顏色（成功、錯誤、警告）+中性黑白灰顏色（各種字體、背景、分割線顏色等）

那么用到的色彩類型：

• 品牌色
• 品牌黑
• 內容底色
• 全局底色
• 分割底色
• 圖標色
• 文字鏈接可點擊顏色
• 提示信息
• 錯誤提示
• 錯誤提升

文字顏色

• 重要文字
• 常規文字
• 輔助文字 1
• 輔助文字 2
• 反白文字或圖表
• 次要的反白文字或圖表

分割線

常規分割線（10%）、強調分割線（30%）、最弱分割線（5%）

反白：常規分割線（10%）、強調分割線（30%）、最弱分割線（5%）

如何確定品牌顏色

選取品牌色方面，選擇公司 logo 色是最為保險的，便于與公司的品牌標識保持一致，具有更好的辨識度。如果因為出于公司的產品戰略要求，需要跟公司其他的產品有所區分，更多的還是要考慮到產品本身的特征，比如醫療方面多用藍色、綠色，給用戶一種安全、可靠；購物產品用色多為鮮艷，主要目的是要激起用戶的購買欲。

首先，我們確定主色為：

在獲取品牌色色階之后，選取其中的幾個顏色用于產品中進行不斷的嘗試與評定，最終確定：

輔助色選擇

根據 HSB 的方法去得到同色溫下面的 24 色：

以 H 值（色相）以 15，S 和 B 不變，遞增到基于主色的 24 個色帶，原理就是 15/360=24，正好圍繞色環一盤。

色盤

輔助色是豐富應用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。

真正的輔助色的選擇是根據實際場景功能來確定的，

比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經在用戶心智中建立了標準的用色類型。

從色環中吸取紅、黃、綠三種顏色，在這四種顏色之上覆蓋純黑色#000，混合模式再選色相，這樣就能看出他們是否是在同一個明度之上，再根據實際的需求進行矯正，比對，調至舒服為止。

將選擇好的輔助色進行明度與對比度的變化，得出相應的色階，如果不確定色階是否科學合理，也可以利用色彩工具，比如 Antdesign 的配色工具，Figma 里面也有很多配色插件，這些都可以快速獲得相應的色階。根據實際的應用場景再進行合理的配色。

中性色的選擇

中性色通常與文字色匯總為一個灰色模塊，通常包括背景色、分割元素色、反饋色、禁用色。背景色在使用卡片設計模式時必然會用到，一般為帶有一點主色的淺灰色。

分割元素色包括常見的線框元素、線性分割元素、面型分割元素。反饋色包括 hover、press、highlight 多種反饋顏色。中性色讓整個頁面更加富有層級感。

中性色的配置，就是制定一個由深到淺的灰度階梯，應用在對應權重的元素上，色彩輕重的主要判斷依據是 HSB 中的 B（明度） 值。

中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足 RGB 的某種特性）。

根據選定的品牌色，利用上述的中心色選擇方法，進行中性色的選配：

利用之前的作品或者現有的設計頁面，進行不斷的搭配調試，確保整體頁面效果為最佳。當然，我們也要考慮到一些特殊的場景使用，如果現階段并沒有出現復雜或者特殊的應用場景時，我們可以先統一一致用色。隨著產品的不斷完善與迭代，有可能現在的中性色并不能滿足需求時，要及時做到調整與更新，確保整體的一致性與統一型。

文字色

在實際的應用場景中，文字色的色階可以劃分 3-5 個階梯：重要的標題和正文、輔助內容的次要文案、次要等級文字、及需要進一步弱化的最次級文字。當然在命名文字色的時候，你可以用一級色、二級色、三級色、或者其他的命名規則去定義每個階梯色。另外還有帶有特殊語義的文字用色，例如鏈接文字用色、強調文字用色等。

文字色的強弱代表了該信息的重要程度，同時也表現出信息的層級與邏輯關系，傳遞給用戶是如何能夠正確、快速的找到所需信息。同時，文字色也對其是否具有可操作性進行釋義說明，這就要求文字色各個色階之間的對比明顯，語義清晰。

Sam Gordain 在 Medium 上有一篇文章《Pick Better Colors with the Hue Shift Method》中很好的講述了其階梯顏色選取規則與技巧的關鍵理論。總結下來即，想要由一個基礎顏色拆分出一套梯級配色，在通過調整透明度或明度的同時調整色相、飽和度、明度三個屬性，這樣最終生成的一套梯級配色會更加協調，過度更為自然。

文章鏈接：https://medium.muz.li/natural-color-palettes-7769e5b38ecd

在做配色時，我們大都知道如何利用同類色、類比色、中差色、對比色、互補色等這樣的配色規則去搭配色彩。但在實際的工作中，其實這些知識并不能滿足我們的需要，尤其是跟幾個設計師共同完成一個項目時，就會出現很多問題：輔助色、文字色、背景、分割線、陰影等方面差異，導致的結果就是不能保證視覺上的一致性。

在很多的設計網站上，輸入“配色”進行搜索，就能看到很多有關配色的文章，大家從很多原理、理論性的方面進行討論，但是對于如何進行配色、配色的過程詳細的進行描述的文章很少。我們在找了很多參考文章、配色理論與配色工具之后，結合實際應用場景，進行配色。希望這篇文章能夠給有相同疑惑的設計師一些幫助。

參考的文章：

• 《10 年經驗總結的高效 UI 配色策略》酸梅干超人
• 《Ant Design-色彩》
• 《揭密可視化專家配色秘笈，你在乎的顏色遠遠不夠》作者：白弦，螞蟻集團設計師
• 色彩工具：Ant Design 中色彩工具；Figma 中的 colo rshades 插件；Figma 中 Palettes 插件