B端項(xiàng)目一般用到的顏色會(huì)很豐富，再帶上數(shù)據(jù)可視化場(chǎng)景，那需要的顏色需求就會(huì)更多。像Ant design色彩體系包含12個(gè)主色以及衍生色：

Material design色彩體系包含16個(gè)主色以及衍生色:

那這種即能滿足多種不同場(chǎng)景的同時(shí)色彩搭配在一起又很協(xié)調(diào)的色彩體系，是如何科學(xué)搭建的呢？

(一) 顏色分類和數(shù)量

1.1 顏色分類

從各大廠的色彩規(guī)范中，可以總結(jié)將色彩劃分為4種類型：

主色（品牌色）

常用于主按鈕、文字高亮、重要信息高亮等場(chǎng)景～

中性色

常用于文字、圖標(biāo)、卡片背景色、分割線、邊框之類的～用于處理頁(yè)面信息主次關(guān)系，助力閱讀體驗(yàn)～

功能色（語(yǔ)義色）

功能色代表了明確的信息以及狀態(tài)（比如成功一般用綠色，出錯(cuò)失敗一般用紅色，提醒一般用橙色/黃色，鏈接一般用藍(lán)色～）

擴(kuò)展色

常用于更多顏色需求場(chǎng)景，比如Dashboard頁(yè)面的圖表（數(shù)據(jù)可視化）、插畫(huà)配圖等

1.2 顏色數(shù)量

通常會(huì)制定8色板、12色板、16色板。比如Ant design的色彩系統(tǒng)是制定了12個(gè)色板，Atlassian design是制定了8個(gè)基礎(chǔ)色板（可以衍生16或者24色板），Material design色彩體系是制定了16個(gè)色板～

(二) 色彩空間

在創(chuàng)建之前，我們先了解一下HCT / HSL / HSB 色彩空間

這些色彩空間的區(qū)別，想要了解的可以到網(wǎng)上查找一些專業(yè)知識(shí)～我們這里只針對(duì)項(xiàng)目中使用哪一種色彩空間能夠?yàn)樵O(shè)計(jì)師調(diào)色帶來(lái)便捷性出發(fā)。

2.1 HSL/HSB

H-色相/色調(diào)

是色彩的基本屬性，就是平常所說(shuō)的顏色名稱(如紅色、黃色)等，取值在0—360度之間（黑色與白色無(wú)色相）；

S-表示飽和度/純度

顏色的純度，取值在0—100之間，飽和度高色彩較艷麗。飽和度低色彩就接近灰色；

B/L-表示明度

顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。

Ant design設(shè)計(jì)團(tuán)隊(duì)使用的是HSB顏色模型進(jìn)行設(shè)計(jì)，認(rèn)為設(shè)計(jì)師在調(diào)整顏色時(shí)更容易對(duì)顏色有明確的心里期望，并促進(jìn)團(tuán)隊(duì)溝通。

2.2 感官亮度統(tǒng)一的HCT

HCT是Google研制的色彩空間～

H-Hue色相

取值在0-360之間；

C-Chroma色度

可以理解為色彩濃度，取值在0-100之間，數(shù)值越大，顏色濃度越濃；

T-Tone光度

也就是亮度，取值在0-100之間，數(shù)值越大，顏色越亮。

*個(gè)人認(rèn)為無(wú)論采用哪一種色彩空間，只要真正能夠幫助到我們運(yùn)用在項(xiàng)目中，都是可以滴

(三) 開(kāi)始創(chuàng)建

3.1 品牌色/主色

品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺(jué)元素之一，常用于主按鈕、文字高亮、重要信息高亮等場(chǎng)景～

確定產(chǎn)品主色的思路有以下幾種：

了解業(yè)務(wù)屬性

屬于哪一個(gè)行業(yè)、產(chǎn)品的定位是什么、目標(biāo)受眾群體，想給用戶傳達(dá)怎樣的視覺(jué)感覺(jué)；

競(jìng)品分析

了解同業(yè)務(wù)屬性的產(chǎn)品一般用的哪些顏色，從而獲得靈感；

滿足WCAG2.0標(biāo)準(zhǔn)

文本的視覺(jué)呈現(xiàn)以及文本圖像至少要有1:4.5的對(duì)比度，以確保所有的文字內(nèi)容清晰易讀，對(duì)比度足夠。工具網(wǎng)址：Color review https://color.review

從B端領(lǐng)域里面一些國(guó)內(nèi)國(guó)外大廠的設(shè)計(jì)規(guī)范中，我分別將主色在亮暗模式背景下進(jìn)行可讀性測(cè)試，學(xué)習(xí)到以下內(nèi)容：

1. 亮暗模式下可以選取不同顏色做為主色，但亮暗模式的兩個(gè)主色是在同一個(gè)色板的衍生色上；比如國(guó)內(nèi)的TDesign，國(guó)外的Shopify\Atlassian\Salesforce色值不同；一般情況下會(huì)選用一樣的主色在亮暗模式下；

2. Shopify\Atlassian\Microsoft無(wú)論在白色背景還是黑色背景上，都滿足WCAG2.0的標(biāo)準(zhǔn)。剩下的要么在白色背景上不滿足，要么在黑色背景上不滿足。（當(dāng)然這些都只是作為難捏不準(zhǔn)主色時(shí)的一個(gè)參考，并不是規(guī)則～）

我負(fù)責(zé)的一款海外產(chǎn)品，主要是對(duì)服務(wù)器、數(shù)據(jù)庫(kù)監(jiān)控分析的工具，客戶選定的主色是藍(lán)色系，他們很喜歡datadog這個(gè)產(chǎn)品，我發(fā)現(xiàn)該產(chǎn)品的主色在HSB模式下，S色彩濃度高 B明度值76視覺(jué)上偏灰，加上客戶產(chǎn)品的logo主色H值是偏紫色調(diào)，所以最終確定在亮模式下用#0756D5為主色（亮暗模式的選擇，我打算采用Shopify\Atlassian\Salesforce的方法，暗模式下用主色的衍生色～）

3.2 功能色（輔助色）

功能色可以用于特定功能、狀態(tài)反饋、應(yīng)用圖標(biāo)、dashboard數(shù)據(jù)表盤(pán)等場(chǎng)景，最常用到的反饋的成功、失敗、警告狀態(tài)～

結(jié)合參看其他優(yōu)秀的文章，加上我自己的一些實(shí)踐思考，方法匯總?cè)缦拢?

1.以主色色相為基礎(chǔ)，差值15°，圍繞360°色環(huán)取24色～另外大家都知道相差15°的顏色為鄰近色，那我們提取出來(lái)的任何兩個(gè)相鄰的顏色都是鄰近色，我們拆分出來(lái)的色彩是比較和諧的~

以我負(fù)責(zé)的海外項(xiàng)目為例～

2.根據(jù)自身產(chǎn)品系統(tǒng)的復(fù)雜度，在24色板上去掉接近的顏色，篩選出一定說(shuō)的顏色。前面也有提到一般是8、12、16色板。我負(fù)責(zé)的項(xiàng)目選擇是10個(gè)色板～

3. 色彩校正

HSB色彩空間最大的弊端就在于相同 Saturation（飽和度） 和 Value（亮度）的色彩，在不同的 Hue （色相）上的亮度感知是完全不一樣的，其原因是 HSV/HSL 色彩空間是應(yīng)用于數(shù)字化圖像處理領(lǐng)域，為了方便機(jī)器理解、計(jì)算、呈現(xiàn)而設(shè)計(jì)，是人類視覺(jué)的線性模型，但人類的感知卻是非線性的，所以造成數(shù)值與感知不匹配的問(wèn)題

市面上的校準(zhǔn)方式一般是在顏色上面疊加純黑色圖層，圖層模式選擇色相，就可以直觀地看到無(wú)彩色視覺(jué)感官明度～具體怎么調(diào)，是不是就按照這個(gè)方式全部都要調(diào)成統(tǒng)一的感官明度？我去研究了Apple/Material design/Ant design的色板，從里面選取統(tǒng)一編號(hào)的顏色，發(fā)現(xiàn)如下：

他們的色彩明度并不是完全一致的，一般是橙色、黃色這些帶有語(yǔ)義的顏色明度會(huì)亮一些～所以色彩校正不能完全調(diào)成一樣的感官明度，只能作為一個(gè)輔助。

3.3衍生色

為了滿足界面對(duì)色彩的需求，需要對(duì)主色和輔助色進(jìn)行色板延伸，建立不同梯度的調(diào)色板。常用的有2種方法：

第一類：手動(dòng)調(diào)整

1.淺色調(diào)色板，在顏色上有序疊加（ 比如20%、40%、60%、80%、90%）不透明度的白色#ffffff；深色調(diào)色板，在顏色上有序疊加 （比如20%、40%、60%、80%）不透明度的黑色#000000。（數(shù)值并不是固定的，設(shè)計(jì)師可按需自行調(diào)整～）

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

第二類：使用色板生成工具（走捷徑）

1.Material Design

https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

2. Ant Design

https://ant.design/docs/spec/colors

3. ColorBoX

https://colorbox.io

4.figma插件Supa Palette(收費(fèi))

3.4中性色

中性色包含了黑、白、灰，是頁(yè)面中文字、背景常用的顏色，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次，保持舒適的對(duì)比度是提高可讀性和吸引用戶注意力的關(guān)鍵。

最熟悉的常見(jiàn)文字顏色就是#333，#666，#999，我喜歡直接拿Material design的灰色色板來(lái)用，同時(shí)還會(huì)拓展藍(lán)灰色板（在確定好灰色色板后，在上面疊加主色的不透明度即可生成藍(lán)灰色色板～）應(yīng)用于圖標(biāo)、背景、描邊。

最后，得出所有顏色的同色系色階：

(四)應(yīng)用

從色板里面挑選亮模式下主色為Primary600，暗模式下主色為Primary400，實(shí)際效果圖如下：

dashboard數(shù)據(jù)可視化頁(yè)面的配色方案我是如何實(shí)踐的呢？

結(jié)合AntV數(shù)據(jù)可視化色彩體系 https://antv.vision/zh/docs/specification/language/palette 和文章https://pixso.cn/designskills/shujukeshihuapeise/

匯總?cè)缦拢?

根據(jù)不同數(shù)據(jù)類型、使用場(chǎng)景擴(kuò)展出 6 種可視化色板類型

1. 分類色板

適用于描述不同類別的數(shù)據(jù)，比如餅圖的不同分類、填充地圖中的不同國(guó)家、關(guān)系圖中的不同角色等

• 采用不同色相來(lái)作區(qū)分，同時(shí)要求色相之間具有高辨識(shí)度、高區(qū)分度
• 在選擇色相時(shí)，建議跨越全色環(huán)均勻選取，并對(duì)不同的色相賦予明暗差異化，能獲得更好的提高色彩辨識(shí)度，以及確保色盲讀者能有良好的觀感體驗(yàn)
• 色相太少區(qū)分度不夠，選取太多色相又容易使得圖表眼花繚亂。根據(jù)調(diào)查研究，制定8~9種不同顏色進(jìn)行可視化配色，能較大限度地提高色彩的區(qū)分度
• 當(dāng)出現(xiàn)極限值情景，即當(dāng)數(shù)據(jù)類別數(shù)量超出可選配色范圍時(shí)，可通過(guò)基礎(chǔ)色相拓展色階及增加明暗差異的方式來(lái)循環(huán)使用配色；或者可考慮將較少數(shù)值的類別統(tǒng)歸為“其他”一類

2. 順序色板

適用于表示數(shù)據(jù)樣本中數(shù)值或梯度的變化，如排行榜等級(jí)變化、風(fēng)險(xiǎn)等級(jí)變化等

• 通常使用同色相不同明度、飽和度來(lái)建立調(diào)色板，要求顏色在色環(huán)上分布均勻且跨度大
• 同一類別應(yīng)使用同一色相
• 為了使用戶理解不同類別間的差異，連續(xù)色板的不同色相必須相鄰銜接，而非分散展示
• 可通過(guò)顏色的深淺來(lái)表示數(shù)據(jù)大小，如淺色表示數(shù)值小的數(shù)據(jù)，深色表示數(shù)值大的數(shù)據(jù)

3.發(fā)散色板

適用于描述數(shù)據(jù)正負(fù)值的變化，中間一般會(huì)有一個(gè)中間值（通常為0），比如氣溫的冷熱、海拔高低、股票漲跌等

• 常采用兩個(gè)連續(xù)的色板，由一種顏色變淺再過(guò)渡到另外一種對(duì)立色的組合，同樣要求色相均勻、跨度大
• 注意發(fā)散色板數(shù)據(jù)可視化配色方案的取色應(yīng)是兩種對(duì)立顏色，可以是互補(bǔ)色或?qū)Ρ壬?。常?jiàn)組合色板有：紅-藍(lán)（可用于展示溫度的冷暖關(guān)系）、橙-藍(lán)（常用于表示銷售增減等）、紫-綠（中性色，常用于表現(xiàn)性能等）
• 當(dāng)可視化具有兩個(gè)不同方向變化的數(shù)據(jù)時(shí)，還能標(biāo)注極端值起強(qiáng)調(diào)作用
• 當(dāng)你的圖標(biāo)僅需強(qiáng)調(diào)一個(gè)最大值或最小值時(shí)，就選擇連續(xù)色板；但如果你的圖表需要用戶同時(shí)關(guān)注最低和最高值時(shí)，就應(yīng)該使用發(fā)散色板

4.疊加色板

將兩組順序色板通過(guò)圖層疊加模式產(chǎn)生一組新的色板，一個(gè)顏色代表兩種變量數(shù)據(jù)，常用于觀察一個(gè)事物兩個(gè)維度變化的相關(guān)性

5.強(qiáng)調(diào)色板

對(duì)比突出重點(diǎn)或特殊數(shù)據(jù)，將重點(diǎn)關(guān)注的數(shù)據(jù)標(biāo)以高飽和度的強(qiáng)色調(diào)，其他普通數(shù)據(jù)標(biāo)以低飽和、低明度的基本色。常用于對(duì)比重點(diǎn)關(guān)注事物與其他分類事物的差別

6.語(yǔ)義色板

適用于氣象預(yù)警配色、紅綠燈配色、股市的紅漲綠跌等

我負(fù)責(zé)的項(xiàng)目數(shù)據(jù)類型采用的是兩種配色方案

1.不同類別的數(shù)據(jù)，圖表類型有餅圖、折線圖、柱狀圖采用分類色板；

2.明確表明狀態(tài)的用語(yǔ)義色板

如何從色彩系統(tǒng)中調(diào)分類色板呢，我常用的方法如下：

1. 參照Echart的配色規(guī)律(保守不會(huì)出錯(cuò)的方法)

2. 研究市面上做的好的表盤(pán)產(chǎn)品（比如Mixpanel）或者競(jìng)品Datadog的配色規(guī)律

3.無(wú)障礙測(cè)試校驗(yàn)-色盲群體的適用性

大約10%的世界人口是色盲，可以借助工具來(lái)校驗(yàn)：Adobe color 網(wǎng)頁(yè)版 https://color.adobe.com/zh/create/color-accessibility

寫(xiě)在后面

實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)～色彩規(guī)范只是為了讓設(shè)計(jì)更有章法、更有說(shuō)服力，在運(yùn)用色彩時(shí)還是需要謹(jǐn)慎克制，可以研究各大廠的設(shè)計(jì)規(guī)范，然后把學(xué)到的東西運(yùn)用在項(xiàng)目實(shí)踐中。