四步建立 · 系統級色彩體系

語言: CN / TW / HK

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

✦ 前言:

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

✦   01.取色   ✦

主色:從產品或品牌主色開始

注:以個人專案主色為案例,前期產品色是基於HSB色彩模型選取的主色

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

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

配色原則方法:1、基於品牌傳遞調性;2、基於鄰近色、對比色、互補色。

配色種類:自定義(6、8、12、16...)

·

檢驗:主色保持視覺感官一致

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

·

✦   02.延展   ✦

演算1.0:透明疊色

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

演算2.0: 等序差值

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

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

演算3.0:曲線擬合

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

✦   03.檢驗   ✦

· 檢驗色板:視覺感官的一致性亮度

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

相比於直線生成的色板,曲線函式的優勢能生成亮度一致性更接近的色板,但是仍然無法完全解決這個問題,那麼是不是問題出在色彩模型下呢?

兩類色彩模型的底層差異

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

其實對發光元件而言的亮度與人眼感知的亮度是存在非常大的差異。那麼基於人眼測定的色彩模型就有像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)文件中有給出具體轉換公式程式碼。

·

✦   04.應用   ✦

來源參考:

使用 Chroma.js 掌握多色調色階 https://www.vis4.net/blog/2013/09/mastering-multi-hued-color-scales/

Re-approaching Color https://design.lyft.com/re-approaching-color-9e604ba22c88

Designing Systematic Colors https://uxplanet.org/designing-systematic-colors-b5d2605b15c

關於 HCL 顏色的一些筆記 https://segmentfault.com/a/1190000023056925

產品配色 2.0:使用 HCL 色彩空間替代 HSL 生成配色 https://jessieji.com/2020/hcl-instead-of-hsl

The Science of Color & Design https://material.io/blog/science-of-color-design

Design tokens https://m3.material.io/foundations/design-tokens/overview

W3C https://www.w3.org/TR/css-color-4/#color-conversion-code