如何4步建立系統(tǒng)級色彩體系?來看京東高手的方法!
色彩體系的推導其實有很多文章有詳細的介紹了,這一篇主要粗淺的梳理了整體流程經(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)文檔中有給出具體轉換公式代碼。
四、應用
工具資源
- 對比度檢測 Color.review WCAG2.1: https://color.review/
- 透明度疊加工具 Tint and Shade Generator: https://maketintsandshades.com/
- 直線等分亮度工具 chroma.js palette helper: https://gka.github.io/palettes
- 色彩曲線工具 ColorBox by Lyft Design(搭梯子使用): https://lyft-colorbox.herokuapp.com/
色板生成工具
基于 HSL/HSB
- Eva Design System: Deep learning color generator: https://colors.eva.design/
- ColorBox: https://colorbox.io/
基于 HCL
- Atmos - Create UI color palettes with ease: https://app.atmos.style/
- Colorpicker for data: http://tristen.ca/hcl-picker
基于 HCT
- Material Theme Builder: https://material-foundation.github.io
- Figma 插件(Color Space: First plugin with HCT): https://www.figma.com
來源參考:
- 使用 Chroma.js 掌握多色調色階: https://www.vis4.net/blog
- Re-approaching Color: https://design.lyft.com/re-approaching-color
- Designing Systematic Colors: https://uxplanet.org/designing-systematic-colors
- 關于 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
作者:JellyDesign
想了解更多網(wǎng)站技術的內容,請訪問:網(wǎng)站技術