各行各業(yè)的設(shè)計(jì)師每天都在和顏色打交道，UI 設(shè)計(jì)師設(shè)計(jì)用戶(hù)界面也不例外。

用戶(hù)界面是一個(gè)設(shè)計(jì)師用理性思維解決用戶(hù)感性需求的窗口。如果對(duì)色彩的運(yùn)用不加以克制，界面可能會(huì)顯得花哨而沒(méi)有主次；但過(guò)于拘謹(jǐn)又容易使界面保守，難以激發(fā)用戶(hù)情緒。所以如何讓色彩的搭配平衡，是 UI 設(shè)計(jì)師需要修煉的一課。

但色彩畢竟是感性的元素，我們總是仰慕一些對(duì)色彩天賦異稟的設(shè)計(jì)師，總能不拘繩墨給作品帶來(lái)驚艷的視覺(jué)效果。我們難以偷習(xí)他們的天賦，但或許你有沒(méi)有想過(guò)，干脆我們另辟蹊徑，用理性推導(dǎo)來(lái)制定一套色彩系統(tǒng)？

那么今天我用我的項(xiàng)目示例，教給大家一個(gè)科學(xué)推導(dǎo)顏色搭配的方法。也許能夠帶你發(fā)現(xiàn)一些色彩背后的數(shù)學(xué)秘密。

區(qū)分顏色模式

在此之前我們需要先熟悉一下顏色模式。

在 PS 菜單欄的「圖像-模式」下可以看到非常多的顏色模式：RGB、CMYK、Lab 等等。那是因?yàn)?PS 是一個(gè)需要滿(mǎn)足設(shè)計(jì)行業(yè)水平領(lǐng)域的軟件，要解決各類(lèi)設(shè)計(jì)師需求，所以涵蓋的顏色模式非常豐富。

但 UI 大多數(shù)時(shí)候需要關(guān)注的是線(xiàn)上場(chǎng)景，成果的展示渠道一般是自發(fā)光設(shè)備。所以弄明白垂直領(lǐng)域軟件 Sketch 中的幾種顏色模式，其實(shí)就足夠了，分別是 RGB、HSB 和 HSL。

RGB 是指通過(guò) R（Red：紅）、G（Green：綠）、B（Blue：藍(lán)）三個(gè)顏色通道的變化以及它們相互之間的疊加得到各式各樣的顏色。三個(gè)通道分別有「0-255」這 256 個(gè)值，這些值分別代表著各通道的亮度層級(jí)。

雖然 RGB 在機(jī)器表現(xiàn)上很友好，但并不夠人性化。因?yàn)槿藗兣袛囝伾?，往往是通過(guò)「這是什么顏色？是不是太鮮艷了？亮了還是暗了？」這樣的感官維度，而很難通過(guò)紅綠藍(lán)的亮度層級(jí)去判斷。所以人們后來(lái)基于 RGB 衍生出了 HSB 模式和 HSL 模式。

HSB 是指通過(guò) H（Hue：色相）、S（Saturation：飽和度）、B（Brightness：明度）來(lái)控制顏色。Hue（色相）的取值范圍是色環(huán)上 0-360° 的圓心角度；而 Saturation（飽和度）與 Brightness（明度）是在 0-100% 的量占比。

HSL 中的 H、S 與 HSB 相同，都是指 Hue（色相）、Saturation（飽和度）。但 L 所指的則是 Lightness（亮度）。

HSL 和 HSB 稍微有一些不同，我們?cè)趦蓚€(gè)顏色模式下輸入相同的數(shù)值，會(huì)發(fā)現(xiàn)顏色實(shí)際是不一樣的。雖然 H、S 指代的都是色相和飽和度，但 L（Lightness：亮度）與 B（Brightness：明度）分別被認(rèn)為是「顏色中白色的量」和「顏色中光線(xiàn)的量」。

Lightness 和 Brightness 的概念要深度研究下去的話(huà)其實(shí)是計(jì)算機(jī)算法領(lǐng)域的問(wèn)題了，感興趣的朋友可以查閱更多資料，但我個(gè)人認(rèn)為對(duì)于 UI 來(lái)說(shuō)沒(méi)有太大必要。

關(guān)于 HSB、HSL 的使用場(chǎng)景，記住以下兩點(diǎn)即可：

• 前端 CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對(duì)接時(shí)，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會(huì)與設(shè)計(jì)稿有出入。
• 我們接下來(lái)講到的配色推導(dǎo)，是基于 HSB 顏色模式的，因?yàn)樗菀桌斫?，?shù)值變化在色系坐標(biāo)中的產(chǎn)生的結(jié)果更加直觀(guān)。

配色推導(dǎo)

支付寶 Alipay Design 團(tuán)隊(duì)提出過(guò)一個(gè)配色原則：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱(chēng)之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過(guò)主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場(chǎng)景中，具有非常好的延展性。

那么知道了這個(gè)原則，我們又該如何科學(xué)、合理地得出產(chǎn)品的色彩系統(tǒng)呢？接下來(lái)我就用我的一個(gè)項(xiàng)目示例給大家做講解。

步驟一：找到符合產(chǎn)品調(diào)性的品牌色

我負(fù)責(zé)的該項(xiàng)目主要業(yè)務(wù)與高校支付、繳費(fèi)相關(guān)，所以希望整個(gè)產(chǎn)品視覺(jué)風(fēng)格首先要給用戶(hù)帶來(lái)安全感。又因?yàn)橹饕脩?hù)群體是高校師生居多，新潮、年輕化是主要用戶(hù)的一大標(biāo)簽，所以我們選擇了用飽和度較高的藍(lán)色來(lái)作為品牌色。

最終選擇品牌色的 Hex 值為 #1585FF ，HSB = （211,92,100）。

步驟二：提取24色

選定了品牌色之后，以品牌色的 H（色相）為基礎(chǔ)，不斷地遞增、遞減 15，在 0-360 之間可以得出 24 個(gè)顏色，也就是將 360° 色環(huán)分割為 24 份，可以得到 24 色。

為什么要提取 24 色，并且以 15 為公差呢？

我們知道，想得到鄰近色、類(lèi)似色、互補(bǔ)色這一系列的顏色，我們就會(huì)使用到色環(huán)。

• 鄰近色：色相差值 15° 以?xún)?nèi)的顏色為鄰近色;
• 類(lèi)似色：色相差值 30° 以?xún)?nèi)的顏色為類(lèi)似色;
• 互補(bǔ)色：色相差值 180° 的顏色為互補(bǔ)色。

而 24 色色板是幫助我們提取輔助色的便捷工具。

步驟三：找到同色系配色

同色系是指與品牌色 H（色相）一致，通過(guò)改變 S（飽和度）與 B（明度）變化產(chǎn)生的色組。同色系色組的推導(dǎo)需要借助拾色板坐標(biāo)。

我們建立一個(gè)基于 S（飽和度）與 B（明度）的平面坐標(biāo)系，設(shè)定當(dāng)前品牌色為色值為（S?，B?），連接品牌色色值點(diǎn)與右上純白點(diǎn)（0，100）、右下純黑點(diǎn)（100，0），得到兩條線(xiàn)段。

我們各在兩條線(xiàn)段上均分取得 5 個(gè)點(diǎn)坐標(biāo)（包含首位兩點(diǎn)）。這樣兩條線(xiàn)段一共就會(huì)產(chǎn)生 11 個(gè)（S，B）坐標(biāo)值，對(duì)應(yīng)著 11 個(gè)同色系色組。

經(jīng)過(guò)上圖的計(jì)算，我們可以得到基于品牌色的同色系色階。

步驟四：多色搭配

用于搭配的輔助色應(yīng)滿(mǎn)足以下兩個(gè)條件：

• 和品牌色有明顯區(qū)分：盡量避免所選輔助色感官上給用戶(hù)視覺(jué)區(qū)別與品牌色差距不大，傳遞的調(diào)性太過(guò)一致；
• 不能過(guò)于突兀：根據(jù)色彩原理來(lái)說(shuō)，互補(bǔ)色是最能與品牌色本色產(chǎn)生視覺(jué)感官對(duì)比的顏色，但可能會(huì)有些突兀。為了讓顏色的輔助起到豐富畫(huà)面的作用，而不是反而讓整個(gè)版面顯得不和諧，所以我們選擇互補(bǔ)色的鄰近色作為輔助色，而不要直接使用互補(bǔ)色。

于是根據(jù)以上條件，基于品牌色可衍生出 3 個(gè)輔助色：一個(gè)與品牌色傳遞調(diào)性有明顯區(qū)分的類(lèi)似色；兩個(gè)互補(bǔ)色的鄰近色。

步驟五：感官明度校準(zhǔn)

經(jīng)過(guò)計(jì)算后，我們已經(jīng)得出了品牌色和三個(gè)輔助色。

可以看出，雖然我們提取出的輔助色明度色值都一致，但因?yàn)轭伾旧碜詭У母泄倜鞫葘傩杂兴鶇^(qū)別。為了讓輔助色和品牌色的感官明度盡量一致，我們要對(duì)第一次提取出的輔助色進(jìn)行感官明度校準(zhǔn)。

校準(zhǔn)方式是：依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色模式調(diào)整為 Hue（色相），就可以通過(guò)無(wú)彩色系下的明度色值，進(jìn)行對(duì)比。

這樣我們終于得到以品牌色為基準(zhǔn)的 3 個(gè)輔助色了。

步驟六：全色系輸出

將得到的輔助色依次進(jìn)行步驟三的計(jì)算，可以得到輔助色的同色系色階。

但因?yàn)槊鞫冗^(guò)低時(shí)，顏色已經(jīng)非常接近于黑色，色相在肉眼上幾乎已經(jīng)趨于一致。所以刪除最左邊的三種同色系顏色。最后得到基于品牌色推導(dǎo)出的全色系色階色板。

總結(jié)

完成了以上的工作，當(dāng)然還不算結(jié)束。一套標(biāo)準(zhǔn)的色彩系統(tǒng)還會(huì)包含中性色規(guī)范、顏色的使用規(guī)范等等。但相信解決了大部分的需求，剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個(gè)理性科學(xué)的方法，色彩的使用最終還是要融合設(shè)計(jì)師個(gè)人的共情能力。

比如許多產(chǎn)品有了一套自己的色彩方案后，設(shè)計(jì)師還會(huì)根據(jù)具體的業(yè)務(wù)場(chǎng)景去賦予 icon、卡片背景等元素不一樣的色彩方案。

希望這個(gè)方法能夠帶你發(fā)現(xiàn)一些色彩背后的數(shù)學(xué)秘密。

文章來(lái)源：優(yōu)設(shè)    作者：UCD耍家