色彩是我們感知世界的重要媒介，在設(shè)計中僅次于功能的另一要素。色彩與我們的生活息息相關(guān)，怎樣科學(xué)配色、靈活用色成了絕大部分設(shè)計師的難題。

作為一名擁有多年擰螺絲經(jīng)驗的設(shè)計師，不免每天都會和色彩打交道，在配色的過程中，你是否也曾遇到過以下困擾：每次做項目隨便吸色？

盲目運用色卡？

配色總是看起來不舒服？

色感差，天天被老板和同事Diss？

…

接下來，請你花幾分鐘看看谷歌等其他大廠，都在用的系統(tǒng)配色方案。以下以船長BI為例，做品牌色彩的規(guī)范引導(dǎo)。

船長BI： 
深圳船奇科技有限公司-是中國專業(yè)的跨境電商SAAS系統(tǒng)服務(wù)企業(yè)。旗下船長BI，專注亞馬遜精細(xì)化運營與大數(shù)據(jù)分析，為不同階段、不同規(guī)模的企業(yè)提供全場景多維度分析，一站式精準(zhǔn)推廣和全鏈路供應(yīng)鏈協(xié)同管理，幫助企業(yè)實現(xiàn)數(shù)智化運營。同是船奇科技也是亞馬遜SPN服務(wù)商。

01

科學(xué)的系統(tǒng)配色

1-1 設(shè)計主張

船長BI系統(tǒng)是亞馬遜精準(zhǔn)化運營及大數(shù)據(jù)下鉆分析的高效化共同體。從單功能運作到多功能融合，再到大數(shù)據(jù)多元化產(chǎn)品下鉆、閉環(huán)及溯源，打破了亞馬遜跨境運營服務(wù)商單點運作的局限。我們希望新的品牌色，能夠為船長BI在跨境企業(yè)中營造更加權(quán)威、高效向數(shù)智化轉(zhuǎn)型的視覺感知。

船長BI 設(shè)計語言：英文Captain BI Design Language簡稱CapDesign。

經(jīng)過團隊的諸多調(diào)研到佐證,我們將品牌標(biāo)準(zhǔn)色太平洋藍(Pacific Blue)，升級為更加科學(xué)、權(quán)威、智略的明亮立體的黑綠松石色(Dark Turquoise)。黑綠松石色在跨境電商行業(yè)中具有更多神秘的數(shù)智化意味，在實際應(yīng)用中隱含著更多的生機和信任，表明了船長對進入數(shù)智化運營新挑戰(zhàn)的氣魄。同時，品牌色的升級能夠快速區(qū)別于競品，形成船長BI獨特的色彩感知，通過色彩感知形成品牌記憶。

色彩命名源自潘通Pantone。

1-2 創(chuàng)建調(diào)色板

人的視覺系統(tǒng)在辨別顏色時，不會把色光分解成RGB或者CMYK幾種單獨顏色，而是按照色相度、純度和明度來判斷的，也就是HSB。HSB模式可以完美固定HSB中的某一個參數(shù)，只對其他兩個參數(shù)做改變或者只改動其中的一個參數(shù)，符合人對色彩差異幅度的感知，而RGB、CMYK都是牽一發(fā)動全身的節(jié)奏。↗

我們以CapDesign品牌基準(zhǔn)色#2AC5D4（H=185\ S=80\ B=83) 為起始點，S飽和度、B明度保持不變，H色相以185°為起點，以15°為增量或減量標(biāo)準(zhǔn)，生成24色色板。這個色板是我們選取輔助色的重要依據(jù)。

02

拓展豐富的輔助色

2-1 以鄰近色、互補色、對比色為原則，選擇絢麗多彩的輔助色↗

為了保有更多CapDesign 的品牌基調(diào)，我們選擇了相對較多的鄰近色，以保證整體色韻的清爽感和數(shù)智科技化意味。并利用對比色及互補色擴展色相，選擇更加豐富多元的輔助色，使其色相對比鮮明，以保證能色彩夠滿足各種復(fù)雜場景。

Q：色相位到底選擇多少個合適？ 
A：有的產(chǎn)品選擇7個色相位，有的產(chǎn)品選擇10幾個色相位，都是允許的，選擇的依據(jù)取決于： 
1.色彩對比明顯，選擇色相數(shù)少；色彩對比柔和，選擇色相數(shù)多； 
2.產(chǎn)品功能的場景簡單，選擇色相數(shù)少；產(chǎn)品功能的場景復(fù)雜，選擇色相數(shù)多； 

Captain BI 是亞馬遜運營與大數(shù)據(jù)集成，功能交叉比對及數(shù)據(jù)可視場景復(fù)雜，為迎合業(yè)務(wù)發(fā)展需要，CapColor選擇的色相位為13個。

2-2 校正輔助色(波長和振幅)

雖然我們保持相同的飽和度和明度，使用科學(xué)的方法得到了較為合適的色相，但由于每個色相的波長各不相同，導(dǎo)致色彩在感官感受上存在差異。

在可見光波譜當(dāng)中，波長越長其穿透力就越強；紅色的波長是最長，穿透力就最強，感知度最高。↗

為了讓不同色相在視覺感官上看起來更加協(xié)調(diào)，需要對色板的明度和飽和度進行反復(fù)的校驗，以保證視覺感官更加和諧舒適。

校正原則 
A.色相最好維系在同類色(色相環(huán)中15°夾角內(nèi)的顏色)↗ 
B.色相感官保持平衡(明度和飽和度) 
C.保證視障群體的識別度(WCAG 對比度) 
調(diào)色的技巧 
淺灰色調(diào): 飽和度減少(S↓)，明度增加(B↑) 
深色色調(diào): 飽和度減少(S↑)，明度增加(B↓) 

使用HSB調(diào)色模式時，可以參考以上規(guī)律，能讓快速調(diào)和想要的顏色。校正后得到了以下色域清晰、對比明顯的主色及輔助色。并且針對視障群體進行了色彩測試。

2-3 拓展梯度色譜
校正主色和輔助色后，我們需建立完整的梯度色板，來滿足不同場景下顏色的應(yīng)用。建立色彩層級，以提升品牌感知，達到信息傳達辨識、強化界面層級等作用。

在梯度色板系統(tǒng)中，很多配色產(chǎn)品都是使用Tints and shades系統(tǒng)：通過在原有色相的基礎(chǔ)上增加白色或者增加黑色，來改變它的明度和飽和度，形成梯度色板。但這種方法得到的調(diào)色板往往比較刻板生硬。CapColor在Material Design-Color的基礎(chǔ)上進行了細(xì)化，構(gòu)建更有層次感、空間感、立體感的梯度色板。

CapColor梯度色板：

1.在Primary的基礎(chǔ)上，使用Tints and shades系統(tǒng)找到Light和Dark：

Light=(White+primary) 95%疊色； 
Dark=Black 60%疊色； 
Primary=原色相。

2.結(jié)合Material Design-Color實踐，得到CapDesign梯度色板及相應(yīng)的參數(shù)。

CapColor選擇10階梯度，對比穩(wěn)健，更能凸顯船長系列產(chǎn)品權(quán)威和成熟的形象；9階梯度相對生硬跳躍，12階梯度過于柔和平滑。

有的色相穿透性強、飽和度高，所以還需要進一步的校驗，如藍色 RYB：

運用以上的方法，得到CapDesign豐富的調(diào)色板，為后期業(yè)務(wù)做支撐：

03

易用的中性灰色

Captain BI系統(tǒng)大部分是由容器、面板、列表、卡片等其他組件及元素構(gòu)成。中性色為系統(tǒng)銳化布局、表達邊界、建立信息層次起到?jīng)Q定性作用。

3-1 中性色

中性色的搭建同時滿足暗黑模式、換膚及印刷等諸多場景，故在實現(xiàn)時按照透明度的呈現(xiàn)方式。

3-2 黑綠松石灰色

中性黑綠松石灰色解決更多復(fù)雜的場景，如表格和表單雙底色、圖標(biāo)的顏色等。中性黑綠松石灰色增強布局、區(qū)別背景，起到強化信息層次的作用。

黑綠松石灰在中性灰色的基礎(chǔ)上增加色相和飽和度，這樣得到的藍灰色還是有些許生硬，還需要對飽和度和明度進行微調(diào)，讓顏色更有層次感。

中性黑綠松石灰的方法：

在配色模式HSB中： 
H=185(Brand Color)； 
S=3(必要時微調(diào))； 
B=保持不變。

3-3 WCAG 2.1測試

為保證視障用戶的使用，保證足夠的對比度，CapDesign 遵守 WCAG 2.1 的標(biāo)準(zhǔn)，對調(diào)色板對比度進行了可用性測試，為后期靈活用色奠定基礎(chǔ)。以中性灰色為例：

WCAG 2.1中規(guī)范了A、AA、AAA的對比值范圍及使用場景，感興趣的朋友可以前往WCAG 2.1官網(wǎng)詳細(xì)了解，在這不在贅述。

3-4 場景案列

實踐是檢驗真理的唯一標(biāo)準(zhǔn)，以下通表格的微交互對中性色進行完美的詮釋：左邊的表頭和表格背景粘連到一起，視覺及信息識別困難。通過交叉運用中性灰色，明顯右邊的表格結(jié)構(gòu)、信息層級得到強化，視覺更聚焦。

結(jié)語

主觀情感的取色，一開始可能沒遇到什么大問題，但隨著產(chǎn)品不斷完善，主觀取色往往不能滿足業(yè)務(wù)發(fā)展訴求?？茖W(xué)的系統(tǒng)配色，真正滿足和服務(wù)設(shè)計；同時對設(shè)計一致性及提升團隊效率起到肯定的作用。

通過這個漫長的配色過程，你是否重新審視過去設(shè)計中的配色方法？希望對配色困擾的你有所幫助。

色彩系統(tǒng)中的系統(tǒng)配色部分已經(jīng)完成，接下來我們將死熬，續(xù)更系統(tǒng)配色在實際項目中的應(yīng)用，做到科學(xué)配色、靈活用色。