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

前言：

本文粗淺闡述色板生成、檢驗與應用的流程方法，包括主流的基準色選取、演算方法、補充色彩空間底層差異、以及 Tokens 結構。好了，那就開始吧~

一、取色

1. 主色：從產品或品牌主色開始

注：以個人項目主色為案例，前期產品色是基于 HSB 色彩模型選取的主色

配色：品牌/產品所要傳遞的調性

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

配色原則方法：1、基于品牌傳遞調性；2、基于鄰近色、對比色、互補色。

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

2. 檢驗：主色保持視覺感官一致

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

二、延展

演算 1.0：透明疊色

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

演算 2.0：等序差值

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

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

演算 3.0：曲線擬合

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

三、檢驗

1. 檢驗色板：視覺感官的一致性亮度

當然除了亮度檢驗，還需要做 WCAG 2.1 標準下的對比度檢驗。

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

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

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

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

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

在這里補充色彩模型差異，主要原因是軟件產品服務對象是人本身，所選用色彩模型應盡量貼近人眼感知層面的色彩模型?；?HSL、HSB 生成的色彩，同樣可以通過換算關系，轉換成 Lab、HCL，但是由于色域范圍不一致，色彩會存在不兼容的情況。

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

四、應用

工具資源

1. 對比度檢測 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 掌握多色調色階： 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. 關于 HCL 顏色的一些筆記： https://segmentfault.com/a/1190000023056925
5. 產品配色 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

作者：JellyDesign