各行各業的設計師每天都在和顏色打交道，UI 設計師設計用戶介面也不例外。
用戶介面是一個設計師用理性思維解決用戶感性需求的窗口。如果對色彩的運用不加以克制，介面可能會顯得花哨而沒有主次；但過於拘謹又容易使介面保守，難以激發用戶情緒。所以如何讓色彩的搭配平衡，是 UI 設計師需要修煉的一課。
但色彩畢竟是感性的元素，我們總是仰慕一些對色彩天賦異稟的設計師，總能不拘繩墨給作品帶來驚艷的視覺效果。我們難以偷習他們的天賦，但或許你有沒有想過，乾脆我們另闢蹊徑，用理性推導來制定一套色彩系統？
那麼今天我用我的項目示例，教給大家一個科學推導顏色搭配的方法。也許能夠帶你發現一些色彩背後的數學秘密。
區分顏色模式
在此之前我們需要先熟悉一下顏色模式。
在 PS 菜單欄的「圖像-模式」下可以看到非常多的顏色模式：RGB、CMYK、Lab 等等。那是因為 PS 是一個需要滿足設計行業水平領域的軟體，要解決各類設計師需求，所以涵蓋的顏色模式非常豐富。
但 UI 大多數時候需要關注的是線上場景，成果的展示渠道一般是自發光設備。所以弄明白垂直領域軟體 Sketch 中的幾種顏色模式，其實就足夠了，分別是 RGB、HSB 和 HSL。
RGB 是指通過 R（Red：紅）、G（Green：綠）、B（Blue：藍）三個顏色通道的變化以及它們相互之間的疊加得到各式各樣的顏色。三個通道分別有「0-255」這 256 個值，這些值分別代表著各通道的亮度層級。
雖然 RGB 在機器表現上很友好，但並不夠人性化。因為人們判斷顏色，往往是通過「這是什麼顏色？是不是太鮮艷了？亮了還是暗了？」這樣的感官維度，而很難通過紅綠藍的亮度層級去判斷。所以人們後來基於 RGB 衍生出了 HSB 模式和 HSL 模式。
HSB 是指通過 H（Hue：色相）、S（Saturation：飽和度）、B（Brightness：明度）來控制顏色。Hue（色相）的取值範圍是色環上 0-360° 的圓心角度；而 Saturation（飽和度）與 Brightness（明度）是在 0-100% 的量占比。
HSL 中的 H、S 與 HSB 相同，都是指 Hue（色相）、Saturation（飽和度）。但 L 所指的則是 Lightness（亮度）。
HSL 和 HSB 稍微有一些不同，我們在兩個顏色模式下輸入相同的數值，會發現顏色實際是不一樣的。雖然 H、S 指代的都是色相和飽和度，但 L（Lightness：亮度）與 B（Brightness：明度）分別被認為是「顏色中白色的量」和「顏色中光線的量」。
Lightness 和 Brightness 的概念要深度研究下去的話其實是計算機算法領域的問題了，感興趣的朋友可以查閱更多資料，但我個人認為對於 UI 來說沒有太大必要。
關於 HSB、HSL 的使用場景，記住以下兩點即可：
- 前端 CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對接時，UI 給到的是 HSB 的色值，那麼最終落地的顏色效果會與設計稿有出入。
- 我們接下來講到的配色推導，是基於 HSB 顏色模式的，因為它更容易理解，數值變化在色系坐標中的產生的結果更加直觀。
配色推導
支付寶 Alipay Design 團隊提出過一個配色原則：
以同色系配色為主導，多色搭配為輔。
同色係為統一的色相，使用中可以加深品牌色的感知，可以讓介面更有層次，同時可以讓介面保持色彩上的一致性；由於業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。
那麼知道了這個原則，我們又該如何科學、合理地得出產品的色彩系統呢？接下來我就用我的一個項目示例給大家做講解。
步驟一：找到符合產品調性的品牌色
我負責的該項目主要業務與高校支付、繳費相關，所以希望整個產品視覺風格首先要給用戶帶來安全感。又因為主要用戶群體是高校師生居多，新潮、年輕化是主要用戶的一大標籤，所以我們選擇了用飽和度較高的藍色來作為品牌色。
最終選擇品牌色的 Hex 值為 #1585FF ，HSB = （211,92,100）。
步驟二：提取24色
選定了品牌色之後，以品牌色的 H（色相）為基礎，不斷地遞增、遞減 15，在 0-360 之間可以得出 24 個顏色，也就是將 360° 色環分割為 24 份，可以得到 24 色。
為什麼要提取 24 色，並且以 15 為公差呢？
我們知道，想得到鄰近色、類似色、互補色這一系列的顏色，我們就會使用到色環。
- 鄰近色：色相差值 15° 以內的顏色為鄰近色;
- 類似色：色相差值 30° 以內的顏色為類似色;
- 互補色：色相差值 180° 的顏色為互補色。
而 24 色色板是幫助我們提取輔助色的便捷工具。
步驟三：找到同色系配色
同色系是指與品牌色 H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產生的色組。同色系色組的推導需要藉助拾色板坐標。
我們建立一個基於 S（飽和度）與 B（明度）的平面坐標系，設定當前品牌色為色值為（S₀，B₀），連接品牌色色值點與右上純白點（0，100）、右下純黑點（100，0），得到兩條線段。
我們各在兩條線段上均分取得 5 個點坐標（包含首位兩點）。這樣兩條線段一共就會產生 11 個（S，B）坐標值，對應著 11 個同色系色組。
經過上圖的計算，我們可以得到基於品牌色的同色系色階。
步驟四：多色搭配
用於搭配的輔助色應滿足以下兩個條件：
- 和品牌色有明顯區分：儘量避免所選輔助色感官上給用戶視覺區別與品牌色差距不大，傳遞的調性太過一致；
- 不能過於突兀：根據色彩原理來說，互補色是最能與品牌色本色產生視覺感官對比的顏色，但可能會有些突兀。為了讓顏色的輔助起到豐富畫面的作用，而不是反而讓整個版面顯得不和諧，所以我們選擇互補色的鄰近色作為輔助色，而不要直接使用互補色。
於是根據以上條件，基於品牌色可衍生出 3 個輔助色：一個與品牌色傳遞調性有明顯區分的類似色；兩個互補色的鄰近色。
步驟五：感官明度校準
經過計算後，我們已經得出了品牌色和三個輔助色。
可以看出，雖然我們提取出的輔助色明度色值都一致，但因為顏色本身自帶的感官明度屬性有所區別。為了讓輔助色和品牌色的感官明度儘量一致，我們要對第一次提取出的輔助色進行感官明度校準。
校準方式是：依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色模式調整為 Hue（色相），就可以通過無彩色系下的明度色值，進行對比。
這樣我們終於得到以品牌色為基準的 3 個輔助色了。
步驟六：全色系輸出
將得到的輔助色依次進行步驟三的計算，可以得到輔助色的同色系色階。
但因為明度過低時，顏色已經非常接近於黑色，色相在肉眼上幾乎已經趨於一致。所以刪除最左邊的三種同色系顏色。最後得到基於品牌色推導出的全色系色階色板。
總結
完成了以上的工作，當然還不算結束。一套標準的色彩系統還會包含中性色規範、顏色的使用規範等等。但相信解決了大部分的需求，剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學的方法，色彩的使用最終還是要融合設計師個人的共情能力。
比如許多產品有了一套自己的色彩方案後，設計師還會根據具體的業務場景去賦予 icon、卡片背景等元素不一樣的色彩方案。
希望這個方法能夠帶你發現一些色彩背後的數學秘密。