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

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

盲目運用色卡？

配色總是看起來不舒服？

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

…

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

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

01

科學的系統配色

1-1 設計主張

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

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

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

色彩命名源自潘通Pantone。

1-2 創建調色板

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

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

02

拓展豐富的輔助色

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

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

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

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

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

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

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

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

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

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

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

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

CapColor梯度色板：

1.在Primary的基礎上，使用Tints and shades系統找到Light和Dark：

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

2.結合Material Design-Color實踐，得到CapDesign梯度色板及相應的參數。

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

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

運用以上的方法，得到CapDesign豐富的調色板，為后期業務做支撐：

03

易用的中性灰色

Captain BI系統大部分是由容器、面板、列表、卡片等其他組件及元素構成。中性色為系統銳化布局、表達邊界、建立信息層次起到決定性作用。

3-1 中性色

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

3-2 黑綠松石灰色

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

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

中性黑綠松石灰的方法：

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

3-3 WCAG 2.1測試

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

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

3-4 場景案列

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

結語

主觀情感的取色，一開始可能沒遇到什么大問題，但隨著產品不斷完善，主觀取色往往不能滿足業務發展訴求。科學的系統配色，真正滿足和服務設計；同時對設計一致性及提升團隊效率起到肯定的作用。

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

色彩系統中的系統配色部分已經完成，接下來我們將死熬，續更系統配色在實際項目中的應用，做到科學配色、靈活用色。