如何4步建立系統(tǒng)級(jí)色彩體系？來看京東高手的方法！

色彩體系的推導(dǎo)其實(shí)有很多文章有詳細(xì)的介紹了，這一篇主要粗淺的梳理了整體流程經(jīng)驗(yàn)，補(bǔ)充一下技術(shù)方法與色彩模型的差異。

相關(guān)干貨：

前言：

本文粗淺闡述色板生成、檢驗(yàn)與應(yīng)用的流程方法，包括主流的基準(zhǔn)色選取、演算方法、補(bǔ)充色彩空間底層差異、以及 Tokens 結(jié)構(gòu)。好了，那就開始吧~

一、取色

1. 主色：從產(chǎn)品或品牌主色開始

注：以個(gè)人項(xiàng)目主色為案例，前期產(chǎn)品色是基于 HSB 色彩模型選取的主色

配色：品牌/產(chǎn)品所要傳遞的調(diào)性

以拾取 24 色為例：H 360/24=15°遞進(jìn)，Brand Blue H218°。

配色原則方法：1、基于品牌傳遞調(diào)性；2、基于鄰近色、對(duì)比色、互補(bǔ)色。

配色種類：自定義（6、8、12、16...）

2. 檢驗(yàn)：主色保持視覺感官一致

保持視覺感官一致，適宜長時(shí)間瀏覽閱讀。矯正飽和度 S 與亮度 B，HSB（brightness）的亮度一致不能保證視覺感知一致，需引入 Photoshop 圖像灰度模式或者 Lab 色彩空間下的亮度 L（Lightness）來檢驗(yàn)。在保證主色色彩主觀感受舒適下，以品牌色亮度為基準(zhǔn)，亮度過渡盡量平緩，矯正過于跳躍的色彩主色，才能衍生出接近視覺感官一致的全色系色板。

二、延展

演算 1.0：透明疊色

操作性快捷，色彩過渡平均。假設(shè)不以純白純黑作為起點(diǎn)與終點(diǎn)，就需要確定最小起點(diǎn)值 95%(自定義)，確定 11 色(自定義)，白色步幅為 n=5(自定義)，黑色步幅為 n=5(自定義)，得出 95%/n=19%。

演算 2.0：等序差值

操作性容易，有規(guī)律推算 S 值與 B 值。同樣假設(shè)不以純白純黑作為起點(diǎn)與終點(diǎn)，就需要確定最小起點(diǎn) Smin=5%(自定義)；Smax=100%(自定義)；Bmax=100%(自定義)；Bmin=20%(自定義)，淺色步幅為 n=5(自定義)，深色步幅為 n=5(自定義)。如果把調(diào)色板看成是一個(gè)二維坐標(biāo)軸，我們有主色坐標(biāo)、深色坐標(biāo)與淺色坐標(biāo)，三個(gè)坐標(biāo)點(diǎn)之間進(jìn)行均值計(jì)算，一次衍生步幅坐標(biāo)點(diǎn)。

通過此規(guī)律，那么就可以利用 Numbers 表格搭建簡單演算工具，依靠公式修改基準(zhǔn)色 S 值與 B 值，演算延展出完整的深淺色板。

演算 3.0：曲線擬合

依賴曲線函數(shù)，多種過渡變化。色彩過渡緩和在直線的基礎(chǔ)之上，引入線段曲率與點(diǎn)速度，也可以使用常用的曲線函數(shù)：EaseIn；EaseOut；EaseInOut 等。曲線色彩梯度自行推導(dǎo)難度相對(duì)較大，需要依賴工具生成。

三、檢驗(yàn)

1. 檢驗(yàn)色板：視覺感官的一致性亮度

當(dāng)然除了亮度檢驗(yàn)，還需要做 WCAG 2.1 標(biāo)準(zhǔn)下的對(duì)比度檢驗(yàn)。

相比于直線生成的色板，曲線函數(shù)的優(yōu)勢(shì)能生成亮度一致性更接近的色板，但是仍然無法完全解決這個(gè)問題，那么是不是問題出在色彩模型下呢？

2. 兩類色彩模型的底層差異

追求亮度一致的視覺感知體驗(yàn)，目前在軟件層面涉及到色彩部分，幾乎都是以 RGB 或者 RGB 的色彩模型衍生出來的色彩空間。RGB 的原理發(fā)光元件通過三色光疊加，是一種基于計(jì)算機(jī)顯示技術(shù)發(fā)展而來的色彩模型。

其實(shí)對(duì)發(fā)光元件而言的亮度與人眼感知的亮度是存在非常大的差異。那么基于人眼測定的色彩模型就有像 Lab、HCL 以及最新的谷歌 HCT，常用的 Photoshop 圖像灰度模式與 Lab 中的 L 都是基于人眼測定的亮度 Lightness 通道。

下圖可以直觀感受基于兩種色彩模型差異，雖然都是相同的亮度 Lightness，但是視覺感官體驗(yàn)上的舒適性差異明顯。

在這里補(bǔ)充色彩模型差異，主要原因是軟件產(chǎn)品服務(wù)對(duì)象是人本身，所選用色彩模型應(yīng)盡量貼近人眼感知層面的色彩模型。基于 HSL、HSB 生成的色彩，同樣可以通過換算關(guān)系，轉(zhuǎn)換成 Lab、HCL，但是由于色域范圍不一致，色彩會(huì)存在不兼容的情況。

換算關(guān)系：sRGB(HSL/HSB) → linearRGB → CIEXyz → CIELab → CIELch， 在 W3C（15. Sample code for color conversions）文檔中有給出具體轉(zhuǎn)換公式代碼。

四、應(yīng)用

工具資源

1. 對(duì)比度檢測 Color.review WCAG2.1： https://color.review/
2. 透明度疊加工具 Tint and Shade Generator： https://maketintsandshades.com/
3. 直線等分亮度工具 chroma.js palette helper： https://gka.github.io/palettes
4. 色彩曲線工具 ColorBox by Lyft Design（搭梯子使用）： https://lyft-colorbox.herokuapp.com/

色板生成工具

基于 HSL/HSB

1. Eva Design System: Deep learning color generator： https://colors.eva.design/
2. ColorBox： https://colorbox.io/

基于 HCL

1. Atmos - Create UI color palettes with ease： https://app.atmos.style/
2. Colorpicker for data： http://tristen.ca/hcl-picker

基于 HCT

1. Material Theme Builder： https://material-foundation.github.io
2. Figma 插件(Color Space: First plugin with HCT)： https://www.figma.com

來源參考：

1. 使用 Chroma.js 掌握多色調(diào)色階：?https://www.vis4.net/blog
2. Re-approaching Color：?https://design.lyft.com/re-approaching-color
3. Designing Systematic Colors：?https://uxplanet.org/designing-systematic-colors
4. 關(guān)于 HCL 顏色的一些筆記：?https://segmentfault.com/a/1190000023056925
5. 產(chǎn)品配色 2.0：使用 HCL 色彩空間替代 HSL 生成配色：?https://jessieji.com/2020/hcl-instead-of-hsl
6. The Science of Color & Design：?https://material.io/blog/science-of-color-design
7. Design tokens：?https://m3.material.io/foundations/design-tokens/overview
8. W3C：?https://www.w3.org/TR/css-color-4/#color-conversion-code

更多色彩體系干貨：

歡迎關(guān)注「JellyDesign」的小程序：