色彩對于一個品牌而言至關重要，一套科學嚴謹的色彩系統不僅能夠向用戶呈現出個性鮮明的品牌形象，而且更重要的是對產品設計具有指導意義。

一、為什么釘釘要升級品牌色彩系統

釘釘作為功能豐富、場景繁雜的 B 端產品。不同場景下不僅對顏色的使用需求不同，而且取色范圍也不相同，而釘釘現行的色彩系統中，拓展色體系尚不完善，導致在產品內選色時效率不高。只有建立好科學的色彩系統，做好底層支撐，才能在不同業務的具體使用中體現出品牌感和一致性。

因此，我們在色彩系統構建方面進行了深入的挖掘和研究，希望為釘釘內各產品的設計提供設計系統基礎的同時，保證一致性，并且帶給用戶新的品牌面貌。

二、色彩模型的選擇

在開始構建品牌色彩系統之前，我們需要選定一種色彩模型。基于同一色彩模型進行溝通、設計和開發是保證色彩實現效果的前提。那么什么是色彩模型呢？我們又需要如何選擇適合我們的色彩模型呢？

1. 色彩模型

關于色彩模型概念，網絡上的解讀并不十分一致，并且常常與“色彩空間”混淆。通過調研，我們認為比較有說服力的定義是：

2. 常見的用于屏幕顯色的色彩模型

① RGB

RGB 色彩模型是基于顏色發光原理搭建的，其原理是通過 R、G、B 數值驅動電子槍發射電子，并分別激發熒光屏上的 RGB 這三種顏色的熒光粉以發出不同亮度的光線，并通過相加混合產生各種顏色。通常情況下，RGB 各有 256 級亮度，能組合出上千萬種顏色，幾乎包含了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。

雖然運用廣泛，但 RGB 模型并不直觀和便于溝通，不妨試想一下，你能快速說出 R:0 G:127 B:255 什么顏色嗎？

② HSB/HSL 色彩模型

雖然在翻譯和技術實現方式上略有不同，但 HSB 和 HSL 模型的三個維度的含義都與色彩三要素十分類似，對用戶來說更為直觀，它們更準確地反映了人類視覺系統對色彩的理解方式。

雖然 HSB/HSL 色彩模型在使用上十分便利和直觀，但不具有統一的感官明度。這意味著在此色彩模型下，用戶無法通過調整單一數值獲得感官明度相同的色板。

③ HCL 模型

HCL 模型最早由國際照明協會 CIE 提出，又被稱作 CIELch。該模型是為了解決色彩對比度問題而誕生的模型，對顏色識別有障礙的視障人士更友好。

但 HCL 在色彩對比度方面的優勢也不是無懈可擊的，在以高明度和高飽和度的顏色為主色拓展色板時，同頻效果并不完美。（此問題一定程度被 HCT 色彩模型優化，但和本文關系不大，這里不做贅述）

④ HCL 色彩模型的痛點

HCL 色彩模型的先進性主要體現在能夠在算法的加持下，實現自由換膚、動態配色方案、自動配色方案等“高端操作”，單純在設計側進行推動，其優勢并不十分突出，但在具體使用上卻有一定門檻。一方面不僅幾乎現有主流設計工具都尚未支持 HCL 色彩模型，另一方面哪怕是支持 HCL 色彩的插件工具，操作也比較困難。

所以，雖然 HSB 色彩模型不是目前最先進的，但是綜合考慮軟件可用性、使用場景、落地性等因素，我們最終選擇以便于溝通、操作直觀的 HSB 色彩模型為基礎，建立釘釘色彩系統。

三、構建品牌色彩系統

1. 創建豐富有效的品牌色板

① 從品牌色出發制定同頻色板

以釘釘品牌標準色#007FFF（H 210 S 100 B 100) 為起點，保持 S（飽和度）和 B（明度）不變，H（色相）以 15°為間隔將色相環平均分為 24 份，形成與品牌色明度、飽和度均相同的 24 色色板，這是我們后續進行顏色篩選和校正的基礎。

② 篩選色相

但在實際設計中并不需要這么多顏色，過多的顏色意味著顏色間的差別過小，會降低選色的效率，而過少的顏色，則可能無法滿足豐富的視覺效果，通常根據自身產品系統的復雜程度不同，會制定 8 色-16 色色板。

在 24 色色板的基礎上，我們將與品牌色色相相差 60°的范圍定義為“臨近區”，在此范圍內的顏色可以營造出一致的品牌感受和細膩的質感表達；將與品牌色色相相差 120°-180°的范圍定義為“對比區”，在此范圍內的顏色能夠提供更加強烈的對比，滿足多種業務場景下對多色相的需求。而在“臨近區”和“對比區”之外的顏色則不在選擇范圍內。

并且，為了保證 UI 層面的可用性，篩選顏色時，通常需要包含藍色、綠色、橙色和紅色四個色相，來表達鏈接、成功、警示和失敗的交互含義。

最終，結合以上原則，我們選擇了一種十分均衡的配色策略，從“對比區”和“臨近區”各選擇了 5 個顏色得到了屬于釘釘的 10 色色板。

③ 色彩校正

通過篩選，我們得到了 10 個合適的色相，但是離可以實際使用，還需要一個色彩校正的環節。這是因為不同顏色的感官明度不同，所以明明保持了明度相同，但視覺上仍會感覺黃色綠色會稍亮一些，而藍色紫色會暗一些。沒有在感官明度上達到同頻的色板，不僅看起來會深淺不一，而且容易在數據可視化場景下產生信息表意不清等問題。

校色原則：

1. 以主色（品牌色）的感官明度為標準，讓其他顏色與主色達到同頻
2. 優先調整明度（B），當僅調整明度無法滿足時調整色相值（H）
3. 色相（H）調整范圍需小于 15°

需要補充的是，有時由于個別顏色和品牌色自身的感官明度特性相差很大，嚴格進行色彩校正會導致顏色本身變得不可用，通常可以有兩種做法：

1. 微調 UI 色彩系統中的主色（品牌色），使全部顏色得以同頻
2. 保障絕大部分顏色的同頻，個別顏色僅做輕微校色（本文所示即是此做法）

校正完成后，我們便得到了色相豐富，感官明度一致的同頻色板。

④ 擴展同色色階

在具體使用中，除了確定色相外，還需要有豐富均勻的明度變化，從產品內一個按鈕的交互狀態，到一幅 KV 的明暗細節都涉及到色階的使用。

色階的制作方法可以分為以下三種，我們測試了幾種方法的生成效果，最終選擇使用 figma 插件 Supa Palette 來進行色階制作。至此我們便得到了，梯度均勻清晰，色相對比適合的品牌色卡。

2. 創建中性色色板

中性色也是品牌色彩系統中必不可少的一部分，其中包含了文字色、背景色、線框色、疊加色等等，在創建產品頁面結構，區分模塊邊界，表達信息層次等場景中起到了關鍵性的作用。

① 文字色

#333333，#666666，#999999，這組顏色是常規且通用的文字顏色范式，其明度差為 20，適用于大部分的產品設計。因為釘釘內存在許多表單和多級文字的場景，所以我們在這組文字色的基礎上，同樣以 20 的明度差拓展了兩個顏色梯度。

并且為了使文字色更具個性和品牌感，我們疊加了 5%的品牌色，因為色彩傾向能夠增強文字的視覺表現力，所以最終再次降低了基準色的明度，并以 22 的明度差進行拓展得到了文字色板。

② 補充其他中性色

有了文字色之后，中性色的其他關鍵用色的推導就更加水到渠成。背景色、線框色、疊加色等顏色屬于中性色色板中的淺色部分，其實可做的操作和選擇并不十分多，關鍵是仔細推導相互之間的明度關系。

關于背景色、線框色的明度和飽和度的取值規律，可以參考下圖：

四、結語

在復雜的業務背景下進行的色彩設計，很多細枝末節的場景是在設計之初難以遍歷的，很多時候一些小的改動更是牽一發而動全身。以理性和感性的雙重角度進行色彩設計，更能保持整個色彩系統的科學性和穩定性。

我們在更新色彩系統的過程中，也對過去的設計內容有了新的理解，希望本篇文章也能對你有所幫助：）

歡迎關注作者微信公眾號：「釘釘用戶體驗」