在產(chǎn)品設(shè)計(jì)中，色彩的設(shè)定是一個(gè)關(guān)鍵因素，而如果沒(méi)有設(shè)定色彩規(guī)范，那么產(chǎn)品在呈現(xiàn)上可能就會(huì)出現(xiàn)不統(tǒng)一、雜亂的視覺(jué)特征。那么，如何理解色彩系統(tǒng)的存在？B端產(chǎn)品又可以怎樣搭建自己的色彩系統(tǒng)？一起來(lái)看看作者的總結(jié)。

色彩作為設(shè)計(jì)師的基本功，如何平衡產(chǎn)品的色彩搭配是每位設(shè)計(jì)師的必修課。如今市面上有種類繁多的配色工具可以一鍵生成配色方案，也有成套色卡作為色板參考，但是當(dāng)面對(duì)高度自由且需求多變的設(shè)計(jì)狀況時(shí)，如果缺少對(duì)色彩規(guī)范的系統(tǒng)理解，僅跟隨設(shè)計(jì)師自身喜好進(jìn)行配色，往往會(huì)導(dǎo)致產(chǎn)品雜亂不堪，沒(méi)有章法。本文結(jié)合我自身的工作和學(xué)習(xí)經(jīng)驗(yàn)，從理論基礎(chǔ)到色彩系統(tǒng)搭建帶大家由淺入深學(xué)習(xí)下B端產(chǎn)品中的色彩體系。

一、色彩理論基礎(chǔ)

色彩理論基礎(chǔ)是搭建色彩系統(tǒng)的基石，接下來(lái)我將從色彩本質(zhì)開(kāi)始，為大家介紹設(shè)計(jì)師需要掌握的幾種常見(jiàn)色彩模型。

1. 色彩的本質(zhì)

在小學(xué)物理課上我們都學(xué)過(guò)，色彩是由物體自身發(fā)光或反射出的光映射在人眼后所感知的，而光的本質(zhì)是一種電磁波。自然界中存在不同頻率的電磁波，短頻的如AM收音機(jī)、電視信號(hào)，長(zhǎng)頻的如X光、伽馬射線，我們所熟知的可見(jiàn)光則是電磁波中人眼所能接受波長(zhǎng)約為380~780nm，也就是從紫色到紅色范圍的這段色彩。

資料來(lái)源：網(wǎng)絡(luò)

反射到人眼中的光，除了光本身的顏色，還會(huì)收到物質(zhì)特性的影響。白色物體在被黃光照射時(shí)，反射到人眼中看起來(lái)就是黃色的，但藍(lán)色物體在被黃光照射時(shí)會(huì)呈現(xiàn)黑色，原理是黃色作為藍(lán)色的反色調(diào)，黃光本身不包含任何藍(lán)光，因而被藍(lán)色物體完全吸收時(shí)并無(wú)法反射出其他顏色，導(dǎo)致人眼看起來(lái)就是黑色。

資料來(lái)源：巫師后期-什么是顏色

此外，我們最終感受到的顏色除了光和物質(zhì)特性外，還會(huì)收到周圍環(huán)境、時(shí)間和歷史經(jīng)驗(yàn)的影響。下面這張網(wǎng)絡(luò)圖很多人都見(jiàn)過(guò)，同一張圖片在不同人眼中會(huì)識(shí)別為不同的顏色。

圖片來(lái)源：巫師后期-什么是顏色

綜上所述，色彩的本質(zhì)是一種復(fù)合的物理現(xiàn)象，是人眼感知物體表面反射光的結(jié)果。

2. 色溫：描述發(fā)光體的冷暖關(guān)系

通過(guò)理解色彩本質(zhì)可以發(fā)現(xiàn)，單純憑借人的色彩感知來(lái)描述顏色具有很強(qiáng)的主觀性，要如何保證在實(shí)際生產(chǎn)中每個(gè)人表述的是同一種顏色呢？這就需要找到可以科學(xué)且規(guī)范描述顏色的方法，在日常生活中我們接觸比較多的是色溫法。

色溫法的原理是：物體把熱量以光的方式輻射出去，當(dāng)物體處于不同溫度時(shí)會(huì)發(fā)出不同顏色的光：溫度比較低時(shí)呈現(xiàn)黃色，溫度高時(shí)呈現(xiàn)藍(lán)色或白色。

這里標(biāo)定的色溫和大眾認(rèn)知中的冷暖感受正好相反，通常我們會(huì)認(rèn)為紅黃色調(diào)偏暖，藍(lán)白色調(diào)偏冷，但實(shí)際上紅色的色溫最低，然后逐步增加的是橙色、黃色、白色和藍(lán)色，藍(lán)色是最高的色溫。因此色溫的高低和給人的色調(diào)感受是正好相反的。

資料來(lái)源：網(wǎng)絡(luò)

熟悉攝影的同學(xué)都知道，當(dāng)我們?cè)谇宄炕螯S昏的戶外拍攝時(shí)照片時(shí)常會(huì)發(fā)黃，這是因?yàn)樵摃r(shí)間段色溫較低，光線呈現(xiàn)為橙黃色。而相機(jī)的白平衡模式可以緩解環(huán)境光的影響。其原理就是通過(guò)切換預(yù)設(shè)場(chǎng)景的色溫值抵消當(dāng)前實(shí)景的色溫影響，使拍攝出的照片呈現(xiàn)出白色基準(zhǔn)更真實(shí)。

資料來(lái)源：網(wǎng)絡(luò)

色溫法是建立在物體可以自身發(fā)光的基礎(chǔ)上，而在自然界的發(fā)光體中，紅、黃、藍(lán)色會(huì)更為常見(jiàn)，但是綠色和洋紅色很少。所以單靠色溫法描述顏色不夠準(zhǔn)確，它更適合用來(lái)反映環(huán)境冷暖和色彩的傾向關(guān)系。

資料來(lái)源：網(wǎng)絡(luò)

3. 常見(jiàn)的色彩模型

為了更準(zhǔn)確的描述顏色，工程師們引入了色彩模型的概念：將色彩拆分成不同屬性并進(jìn)行量化，通過(guò)計(jì)算機(jī)語(yǔ)言更科學(xué)準(zhǔn)確的表述顏色，而不同維度的拆分方法便是色彩模型。隨著科技發(fā)展和生產(chǎn)制造的需要，色彩模型迭代出了多個(gè)版本類型，接下來(lái)我將挨個(gè)介紹常見(jiàn)模型的差異和功能特點(diǎn)：

1）HSB和HSL模型

HSB模型也稱HSV模型，該模型是建立在人眼識(shí)別色彩的基礎(chǔ)上，符合人類日常的生活經(jīng)驗(yàn)，相較其他模型最為直觀易理解。該模型主要使應(yīng)用在圖像處理、計(jì)算機(jī)圖形學(xué)、色彩管理等領(lǐng)域，用于描述和操作顏色。其屬性包括：

• H 色相：Hue，以角度（0°-360°）表示。
• S 飽和度：Saturation，以百分比值（0%-100%）表示。
• B/V 亮度：Brightness 或 Value，以百分比值（0%-100%）表示。

HSL是和HSB原理相同的模型，在工作中很容易會(huì)被混淆使用，其區(qū)別在于：HSB中B指的是【亮度 Brightness】，而HSL中L指的是【明度 Lightness】。為方便大家理解，對(duì)于這兩種模型的詳細(xì)區(qū)別，我整理了出了以下表格：

資料來(lái)源：網(wǎng)絡(luò)

HSB和HSL模型在使用場(chǎng)景上都是用于軟件開(kāi)發(fā)應(yīng)用，在實(shí)際工作中我們接觸HSB模式的場(chǎng)景會(huì)更多，但到底哪種模型更適合人類用戶使用的界面設(shè)計(jì)尚未有定論。對(duì)于設(shè)計(jì)師自身而言需要注意的是，在和開(kāi)發(fā)同步設(shè)計(jì)資料時(shí)確保使用的是同一種模型，避免產(chǎn)生顏色誤差。

雖然HSL模型有諸多好處（HSB、HSL屬于同類模型，后文統(tǒng)一用HSL概括），但其缺陷也很明顯：HSL模型無(wú)法用于工業(yè)制造，因?yàn)樵谧匀唤缰谢竞茈y找到某一屬性純度可以達(dá)到標(biāo)準(zhǔn)的物體，也難以控制單一屬性變量來(lái)改變物體顏色。為了解決以上限制，用于屏幕顯示的RGB模型和彩色印刷的CMYK模型應(yīng)運(yùn)而生。

2）RGB模型

RGB模型是依據(jù)顏色發(fā)光的原理所搭建的，也被稱為光的三原色，工業(yè)上用于通過(guò)紅、綠、藍(lán)三色發(fā)光單元產(chǎn)生顏色的電子屏幕。

• R 紅：Red，以數(shù)值（0-255）表示。
• G 綠：Green，以數(shù)值（0-255）表示。
• B 藍(lán)：Blue，以數(shù)值（0-255）表示。

通常情況下，RGB各有256級(jí)亮度，用數(shù)字表示為從0、1、2…直到255，雖然數(shù)值最高是255，但0也是數(shù)值之一，因此共256級(jí)。將三種顏色疊加并控制其顏色強(qiáng)度，256級(jí)的RGB色彩總共能組合出上千萬(wàn)種色彩，而這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一。

資料來(lái)源：網(wǎng)絡(luò)

RGB模型是我們?nèi)粘９ぷ鹘佑|最頻繁的模型，但是不知道你是否產(chǎn)生過(guò)疑惑：為什么偏偏選擇【RGB紅綠藍(lán)】作為光的三原色，而不用其他色彩呢？

首先我們要明確，能作為三原色的基礎(chǔ)是必須保證其中任意一色不能通過(guò)其他兩種顏色混合而成，且這三種顏色混合后能形成足夠多的顏色種類。而RGB能作為三原色的色彩主要和人眼的生理結(jié)構(gòu)有關(guān)：

資料來(lái)源：網(wǎng)絡(luò)

前面我們提到，光的本質(zhì)是一種電磁波。而視錐細(xì)胞共分為三種，分別對(duì)長(zhǎng)、中、短三種電磁波長(zhǎng)最為敏感，而這三種波長(zhǎng)的光對(duì)應(yīng)的正是紅、綠、藍(lán)三種顏色。當(dāng)這三種感光細(xì)胞收到刺激后，會(huì)自動(dòng)對(duì)將感受到的光色進(jìn)行組合從而形成多種多樣的色彩。這也是為什么【RGB紅綠藍(lán)】被作為三原色的客觀原因。

資料來(lái)源：網(wǎng)絡(luò)

關(guān)于HEX色值

這里還有個(gè)知識(shí)點(diǎn)就是HEX色值，聽(tīng)到它大家都不會(huì)陌生，在很多拾色器中我們都見(jiàn)到過(guò)，工作中也經(jīng)常將其提供給開(kāi)發(fā)同學(xué)作為顏色標(biāo)識(shí)。

雖然看起來(lái)結(jié)構(gòu)不同，但HEX也是采用RGB模型的原理來(lái)定義顏色，只是語(yǔ)言上用的是十六進(jìn)制代碼：字節(jié)值范圍從 0 到 FF，顏色的最低強(qiáng)度為 00，而最高強(qiáng)度為 FF。實(shí)際轉(zhuǎn)換時(shí)，每位數(shù)字范圍是 0～15（分為0～9 和 A～F，其中 A～F 表示 10～15），這樣每位數(shù)字都能代表16個(gè)數(shù)，而每2位數(shù)字相乘即可代表256級(jí)，正好對(duì)應(yīng)一個(gè)顏色通道。

相較于長(zhǎng)段的RGB表示法，HEX色值表示法只需六位字符，更加緊湊輕量，所以更適合開(kāi)發(fā)人員使用。

十六進(jìn)制到RGB轉(zhuǎn)換器工具：https://purecalculators.com/zh-CN/hex-to-rgb-converter

3）CMYK模型

以上RGB模型是針對(duì)可自身發(fā)光的物體，CMYK模型則是針對(duì)依靠反光的物體。CMYK是色料的三原色，也叫印刷的三原色，使用最多的場(chǎng)景是媒介印刷，其原理是基于油墨的光吸收/反射特性，眼睛看到顏色實(shí)際上是物體吸收白光中特定頻率的光而反射其余光得來(lái)。

• R 青：Cyan，以百分比值（0%-100%）表示。
• M 品紅：Magenta，以百分比值（0%-100%）表示。
• Y 黃：Yellow，以百分比值（0%-100%）表示。
• B 黑：Black，以百分比值（0%-100%）表示。

資料來(lái)源：網(wǎng)絡(luò)

通過(guò)以上現(xiàn)象我們會(huì)發(fā)現(xiàn)，將不同顏色的物質(zhì)不斷揉合最終會(huì)得到黑色物質(zhì)，而這正好滿足了我們工業(yè)印刷品上白紙黑字的需求：選擇【紅、綠、藍(lán)】的補(bǔ)色【青、品紅、黃】，通過(guò)調(diào)整這三種顏色油墨的比例，就能得到反射不同顏色的油墨。

理論來(lái)說(shuō)同比例的這三色油墨可以直接混合出【黑色】，但是現(xiàn)實(shí)中由于生產(chǎn)技術(shù)的限制，油墨純度往往不盡人意，混合得到的黑色不夠濃郁，只能依靠提純的黑色加以混合，這種做法同時(shí)也可以節(jié)省油墨消耗。

資料來(lái)源：網(wǎng)絡(luò)

在顯示器等發(fā)光體下，RGB模式的數(shù)值越大則光線越強(qiáng)，最終呈現(xiàn)的亮度也會(huì)最大。但是在印刷品等反光體下，其紙張本身的白色即是可以呈現(xiàn)的最高亮度， 所以CMYK模式的數(shù)值越大則油墨越多，最終呈現(xiàn)的亮度會(huì)越低。也因此：

• RGB被稱作加色模型，即多色疊加最終將得到白色。
• CMYK被稱作減色模型，即多色疊加最終將得到黑色。

4）Lab模型

以上三種是最常見(jiàn)的通用模型，還有些色彩模型用于更特定的場(chǎng)景，Lab模型便是基于生理特征的一種模型。RGB和CMYK受限于載體，同樣的顏色可能會(huì)因?yàn)椴馁|(zhì)差異影響呈現(xiàn)不同的顏色，Lab模型則是彌補(bǔ)其不足，擺脫原材料載體對(duì)模型的影響。

L 明度：Lightness，以數(shù)值（0-100）表示。

a b是兩個(gè)顏色通道：

• a 通道：從綠色到紅色，以數(shù)值（-128至127）表示。
• b 通道：從黃色到藍(lán)色，以數(shù)值（-128至127）表示。

資料來(lái)源：網(wǎng)絡(luò)

Lab模型無(wú)法用于實(shí)際生產(chǎn)制造，但是其色彩空間比計(jì)算機(jī)顯示器甚至比人類視覺(jué)的色域都要大，在轉(zhuǎn)換成其他模型時(shí)色彩不會(huì)丟失或被替換，所以通常用于圖像色彩空間轉(zhuǎn)換、色彩校正、色彩相似度比較等場(chǎng)景。在進(jìn)行具體的顏色轉(zhuǎn)換時(shí)需要復(fù)雜的計(jì)算公式，作為設(shè)計(jì)師只需了解其模型用途即可。

關(guān)于色彩空間：

上面我們提到一個(gè)詞叫色彩空間，它是圖像處理和計(jì)算機(jī)圖形學(xué)領(lǐng)域中非常重要的概念，在圖像處理、圖形學(xué)、圖像質(zhì)量評(píng)價(jià)和廣告設(shè)計(jì)等眾多領(lǐng)域都有涉及。很多人會(huì)將它與色彩模型弄混，實(shí)際上兩者是不同的概念：

• 色彩模型：一種數(shù)學(xué)模型，用于表示色彩的三維數(shù)學(xué)空間，通常會(huì)用3個(gè)或者4個(gè)數(shù)值來(lái)表示。
• 色彩空間：一種色彩表示方法，它將色彩模型中的顏色映射到二維或三維空間，以便于顯示和比較。

總而言之，色彩模型是用于表示色彩的三維數(shù)學(xué)模型，色彩空間是對(duì)色彩模型的二維或三維映射，方便于顯示和比較色彩。色彩空間通常與色彩模型一起使用，并使用特定的數(shù)學(xué)表示法來(lái)定義色彩空間中的顏色。

資料來(lái)源：百科

5）HCL模型

HCL模型最早由國(guó)際照明協(xié)會(huì) CIE 提出，又被稱作 CIELch(uv)。該模型是為了解決色彩對(duì)比度問(wèn)題而誕生的模型，對(duì)顏色識(shí)別有障礙的視障人士更友好。

• H 色相：Hue，以角度（0°-360°）表示。
• C 色度：Chroma，可以理解為顏色的濃度，濃度值越大，顏色就越鮮明。以數(shù)值（0-150）表示。
• L 照度：Luminance，用于量化人眼對(duì)光的亮度的感知。以數(shù)值（0-100）表示。

注意這里HCL模型的【Luminance】與前文HSL模型中的【Lightness】是不同的，我們先來(lái)看一個(gè)例子，分別通過(guò)HSL和HCL推導(dǎo)的色卡在對(duì)比度上有何差異？

很明顯，雖然都是控制變量但左圖在顏色對(duì)比度層次不齊。這是因?yàn)镠SL模型是基于電子元件的顯示亮度進(jìn)行計(jì)算的，但并非人眼感知光的實(shí)際感受。所以在配色時(shí)如果采用HSL模型，即使【Lightness 明度】值相同，色彩亮度在人眼看來(lái)依舊不匹配，需要設(shè)計(jì)師基于主觀意愿進(jìn)行調(diào)整，不僅耗費(fèi)時(shí)間和精力，配色流程不夠科學(xué)標(biāo)準(zhǔn)化。

HCL模型則很好的解決了以上問(wèn)題，其初衷就是基于人眼對(duì)亮度對(duì)感知而創(chuàng)造的：只要【Luminance 照度】保持一致，不同色相的顏色亮度感受始終會(huì)保持均勻，這種情景下取色流程會(huì)更加簡(jiǎn)單高效，應(yīng)用到產(chǎn)品上對(duì)視障人士也更加友好。

資料來(lái)源：TDesign

需要注意的是，HCL模型的色彩空間和其他模型不一定能完全匹配，所以直接轉(zhuǎn)換可能存在顏色丟失或被替換的情況，這里為大家提供了幾款以HCL色彩模型為基礎(chǔ)的色彩轉(zhuǎn)換工具：

• HCL轉(zhuǎn)RGB HEX：http://hclwizard.org:3000/hclcolorpicker/
• MD主題搭建工具 HCT Color Picker：https://m3.material.io/theme-builder#/custom
• Colorpicker for data：http://tristen.ca/hcl-picker/#/hlc/12/1.03/182009/A9FC8E
• Figma插件：https://www.figma.com/community/plugin/1105513882835626049/Color-Space%3A-First-plugin-with-HCT

亮度、明度和照度的區(qū)別：

介于中英文語(yǔ)義的差異，Brightness、Lightness、Luminance 都可以翻譯為“亮度”，然而在色彩模型中每個(gè)詞卻有更深層次的解釋，為方便大家區(qū)分理解區(qū)分，將三者整理在一起進(jìn)行對(duì)比：

• Brightness 亮度：用于HSB模型，客觀測(cè)量顏色的顯示亮度。顏色變化從黑到標(biāo)準(zhǔn)色相，滿值為顏色標(biāo)準(zhǔn)色相。
• Lightness 明度：用于HSL模型，和HSB一樣客觀測(cè)量顏色的顯示亮度，與人亮度感知沒(méi)有直接關(guān)系。顏色變化從黑到標(biāo)準(zhǔn)色相再到白，半值為顏色標(biāo)準(zhǔn)色相，滿值為白色。
• Luminance 照度：用于HCL模型，主觀上衡量發(fā)光的強(qiáng)弱和顏色對(duì)比度。

可以發(fā)現(xiàn)前2個(gè)都是客觀上對(duì)顏色亮度的衡量，而【Luminance 照度】才是真正意義上主觀感受顏色的標(biāo)準(zhǔn)。

二、B端產(chǎn)品的色彩系統(tǒng)

近年來(lái)，隨著企業(yè)級(jí)產(chǎn)品功能體量不斷豐富，產(chǎn)品設(shè)計(jì)體系逐漸趨向于規(guī)范化，如何搭建一套標(biāo)準(zhǔn)易用的色彩系統(tǒng)對(duì)于提升團(tuán)隊(duì)工作效率和產(chǎn)品體驗(yàn)一致性至關(guān)重要。通過(guò)系統(tǒng)化的顏色管理方法，可以幫助企業(yè)統(tǒng)一品牌顏色，提高品牌識(shí)別度和統(tǒng)一性。接下來(lái)，我將為大家詳細(xì)講解B端產(chǎn)品中色彩系統(tǒng)的構(gòu)成和搭建方法：

1. 色彩系統(tǒng)的概念

簡(jiǎn)單來(lái)說(shuō)，色彩系統(tǒng)是指從整個(gè)設(shè)計(jì)系統(tǒng)里抽離出的分支，為方便管理而針對(duì)色彩語(yǔ)言搭建的管理體系。

完整的設(shè)計(jì)系統(tǒng)由設(shè)計(jì)語(yǔ)言和模式庫(kù)構(gòu)成，在設(shè)計(jì)原則的指引下，通過(guò)統(tǒng)一的協(xié)作語(yǔ)言和科學(xué)的管理方法組織起來(lái)，創(chuàng)建體驗(yàn)一致的用戶界面。完整的設(shè)計(jì)系統(tǒng)可以拆解成三部分：

1. 設(shè)計(jì)原則：設(shè)計(jì)要遵循的中心思想，所有的問(wèn)題和形式都向原則靠攏，減少不確定性；
2. 設(shè)計(jì)語(yǔ)言：包括價(jià)值觀、品牌、符號(hào)、色彩、文字等品自主表達(dá)的媒介；
3. 模式庫(kù)：即組件庫(kù)，通過(guò)對(duì)控件進(jìn)行歸納整理形成的可快速?gòu)?fù)用工具庫(kù)。

色彩系統(tǒng)也是如此，并不僅僅是簡(jiǎn)單的色彩組件庫(kù)，結(jié)合設(shè)計(jì)系統(tǒng)的內(nèi)容，我們可以將設(shè)計(jì)原則和設(shè)計(jì)語(yǔ)言歸入色彩規(guī)范中，而模式組件庫(kù)即產(chǎn)品色板（調(diào)色板）。這里可以將色彩系統(tǒng)定義為：由色彩規(guī)范和產(chǎn)品色板組成，可以科學(xué)有效管理色彩的應(yīng)用程序。

2. 什么是好的色彩系統(tǒng)

理解了色彩系統(tǒng)的定義，如何保證搭建的色彩系統(tǒng)科學(xué)有效？好的色彩系統(tǒng)應(yīng)遵循以下三個(gè)原則：

1. 有意義：能夠體現(xiàn)產(chǎn)品個(gè)性，凸顯品牌基因，滿足用戶對(duì)產(chǎn)品的認(rèn)知感受，不同色彩的搭配使用能滿足用戶的心理預(yù)期，提升使用體驗(yàn)。
2. 易上手：色彩系統(tǒng)不僅僅是給設(shè)計(jì)師自身使用的，在整個(gè)產(chǎn)品周期中，從上游的品牌戰(zhàn)略到下游的視覺(jué)運(yùn)營(yíng)，都要使用到產(chǎn)品配色，優(yōu)秀的色彩系統(tǒng)應(yīng)方便團(tuán)隊(duì)成員上手，即使沒(méi)有專業(yè)背景也可以很快的理解和使用。
3. 無(wú)障礙：不同顏色間對(duì)比度要匹配 WCAG 的對(duì)比度標(biāo)準(zhǔn)，保證內(nèi)容元素的可識(shí)別度。

3. 色彩識(shí)別無(wú)障礙

資料來(lái)源：網(wǎng)絡(luò)

在色彩系統(tǒng)搭建之初就考慮色彩無(wú)障礙識(shí)別問(wèn)題，可以普適更多場(chǎng)景，有效提升產(chǎn)品信息識(shí)別度和易用性。WCAG（Web Content Accessibility Guidelines ）內(nèi)容無(wú)障礙指南作為行業(yè)廣泛使用的無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)，是檢驗(yàn)文字顏色可讀性的有效依據(jù)，只要文本顏色與背景色之間的對(duì)比度滿足以上標(biāo)準(zhǔn)，就能確保被清晰識(shí)別。WCAG 2.0 中將顏色對(duì)比等級(jí)分為 3 種，等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xiàn)出來(lái)的信息可讀性越好：

• A級(jí)：對(duì)比度 3 : 1，是普通觀察者可接受的最低對(duì)比；
• AA級(jí)：對(duì)比度 4.5 : 1，是普通視力損失的人可接受的最低對(duì)比度；
• AAA級(jí)：對(duì)比度 7 : 1，是嚴(yán)重視力損失的人可接受的最低對(duì)比度。

這里為大家推薦一款可視化對(duì)比度檢測(cè)工具Color Review：通過(guò)將 3、4.5、7 對(duì)比度臨界點(diǎn)的顏色通過(guò)曲線標(biāo)識(shí)，可清晰直觀的看到當(dāng)前色值的對(duì)比度在拾色器中的位置，方便進(jìn)行調(diào)整。

Color Review對(duì)比度可視化檢測(cè)工具：https://color.review/

資料來(lái)源：Color Review

4. 產(chǎn)品色板的組成

依據(jù)色彩的類型和功能不同，產(chǎn)品級(jí)色板的內(nèi)容可分為主色、中性色、輔助色和功能色，其中每種顏色都應(yīng)有相應(yīng)的色階拓展供配色使用。

1）主色

產(chǎn)品主色一般是頁(yè)面中使用最多的顏色，通常被使用在關(guān)鍵行動(dòng)點(diǎn)、操作狀態(tài)、重要信息提示、圖形化等場(chǎng)合。

很多設(shè)計(jì)師會(huì)直接將主色和品牌色劃等號(hào)，即直接將品牌色作為產(chǎn)品主色使用，我們?nèi)粘＝佑|的C端產(chǎn)品大多也是直接使用品牌色作為主色使用，但是B端產(chǎn)品主色也可以直接使用品牌色嗎？這里需要先理解B端和C端產(chǎn)品的設(shè)計(jì)差異。

C端產(chǎn)品設(shè)計(jì)側(cè)重流量思維，追求盡可能滲透用戶的碎片化生活來(lái)吸引用戶。通過(guò)將品牌色作為主色使用可以凸顯品牌特征，強(qiáng)化用戶心理認(rèn)知，以此來(lái)提高用戶粘性和活躍度。

而B(niǎo)端設(shè)計(jì)側(cè)重的是效率思維，強(qiáng)調(diào)提升用戶的操作效率幫助其達(dá)到使用目標(biāo)。所以B端產(chǎn)品主色優(yōu)先考慮色彩的識(shí)別度和視覺(jué)感受，盡可能保持用戶在使用產(chǎn)品時(shí)沉浸感，即使在長(zhǎng)時(shí)間瀏覽時(shí)也不會(huì)感到不適。因此究其根本，B端產(chǎn)品主色不能對(duì)用戶的使用操作造成干擾，必要時(shí)需要在原有品牌視覺(jué)的基礎(chǔ)上提取品牌色進(jìn)行修正，使其更符合用戶的使用場(chǎng)景。當(dāng)然能兼具品牌價(jià)值傳遞和操作體驗(yàn)是產(chǎn)品的最優(yōu)方案。

2）中性色

中性色又稱無(wú)彩色，包括黑色、白色及調(diào)和后不同深淺的灰色，常被使用在文字、圖標(biāo)、背景、線框等場(chǎng)景。中性色本身不具備顏色屬性，沒(méi)有色相冷暖的區(qū)分，因此可以更好的襯托其他有彩色，也能拉開(kāi)信息的層次差距，對(duì)于創(chuàng)造結(jié)構(gòu)、表達(dá)邊界和建立信息層次十分重要。

• 一般淺灰色應(yīng)用在分割線、表單描邊、背景色等場(chǎng)景，劃分頁(yè)面布局且避免對(duì)主要內(nèi)容造成干擾。
• 深灰色主要應(yīng)用在正文、標(biāo)題、圖標(biāo)等元素上，通過(guò)明度變化突出內(nèi)容，方便用戶瀏覽。

有些產(chǎn)品會(huì)在中性色中加入適度色彩傾向，在保持中性色本身信息區(qū)分度的前提下，增加品牌色基因來(lái)強(qiáng)化品牌氛圍。

資料來(lái)源：TDesign

在搭建中性色色板時(shí)，對(duì)于配置文字顏色市面上有2種解決方案：一種是直接控制灰度拓展色階，另一種是用透明度變化建立色階，如使用#000并降低其透明度。

市面上采用透明度方案的并不多，考慮到其根本目的是為了保證文字信息內(nèi)容可以被正確展示，在此針對(duì)兩種方案的使用場(chǎng)景提供更清晰的使用建議：

• 色值變化：內(nèi)容可以完整的保留色彩信息，不會(huì)造成色彩丟失，在組件搭建上維護(hù)成本更低。適合大多數(shù)場(chǎng)景下使用。
• 透明度變化：在復(fù)雜圖片或紋理的背景上依舊可以很好的展示內(nèi)容信息，且可以更好的適配亮暗模式，更具包容性，但在一定程度上會(huì)增加瀏覽器的渲染負(fù)擔(dān)。適合使用在暗亮模式需求或有復(fù)雜背景紋理的頁(yè)面中。

3）輔助色

輔助色是在主色基礎(chǔ)上衍生出的其他顏色，主要有2個(gè)作用：一方面可以平衡色彩系統(tǒng)，緩解用戶在使用產(chǎn)品過(guò)程中頻繁使用單色造成的視覺(jué)疲勞，另一方面可以豐富色彩系統(tǒng)的可用性，通過(guò)和主色對(duì)比增加內(nèi)容區(qū)分度。

資料來(lái)源：網(wǎng)絡(luò)

根據(jù)研究來(lái)看，人類可命名的有彩色數(shù)量?jī)H為8～9種，更多的顏色分類會(huì)增加使用時(shí)的篩選負(fù)擔(dān)，同時(shí)色彩區(qū)分度也會(huì)降低。故通常建議在人類可命名的8種顏色中選擇6～8種作為輔助色即可，如果有更多用色場(chǎng)景需求可以考慮加入拓展的顏色色階進(jìn)行交替使用。

4）功能色

B端產(chǎn)品中會(huì)利用色彩的心理暗示來(lái)對(duì)用戶進(jìn)行狀態(tài)反饋，以降低用戶認(rèn)知成本，這部分輔助色通常被獨(dú)立出來(lái)稱為功能色：遵循用戶心智和行業(yè)內(nèi)默認(rèn)的色彩語(yǔ)義，選擇特定顏色向用戶傳達(dá)成功、失敗、告警、鏈接等狀態(tài)信息。如用紅色傳達(dá)通知、提醒、錯(cuò)誤等，綠色傳達(dá)確認(rèn)、成功、正確等，橙色傳達(dá)警告等。

5. 色彩系統(tǒng)搭建

以上便是色彩系統(tǒng)的主要內(nèi)容，接下來(lái)將詳細(xì)介紹如何搭建適合自身業(yè)務(wù)的色彩系統(tǒng)，主要分為以下五步：

1. 第一步：色相環(huán)取色。由主色推導(dǎo)出既符合品牌調(diào)性又具備區(qū)別度的輔助色。
2. 第二步：顏色校正。對(duì)選擇的顏色進(jìn)行色彩校正，使其保持感官同頻。
3. 第三步：色階延展。針對(duì)選擇的顏色搭建層級(jí)均勻、層級(jí)清晰的色階梯度。
4. 第四步：色彩語(yǔ)義化。對(duì)搭建好的色板進(jìn)行語(yǔ)義命名，方便團(tuán)隊(duì)調(diào)用。
5. 第五步：團(tuán)隊(duì)推進(jìn)。將資源同步至團(tuán)隊(duì)中使用，并優(yōu)化迭代。

1）第一步：色相環(huán)取色

色相環(huán)取色是在主色基礎(chǔ)上通過(guò)使用色相環(huán)來(lái)提取輔助色，具體的操作方法為：以主色的【色相 Hue】為起始點(diǎn)，在色相環(huán)上以15°為梯度進(jìn)行加減，得到24色的色板。再根據(jù)自身產(chǎn)品場(chǎng)景，選擇其中6～8種的顏色作為輔助色。

2）第二步：顏色校正

在色相環(huán)取色過(guò)程中，雖然保持其他變量，只對(duì)色相進(jìn)行了變換，但由于顏色本身在視覺(jué)感受上存在亮度差異，故需要進(jìn)行顏色校正，一方面保證整個(gè)色板保持視覺(jué)上的感官同頻，另一方面保證視障群體的識(shí)別度。

3）第三步：色階延展

選擇合適數(shù)量的輔助色后，需要對(duì)單個(gè)顏色進(jìn)行色階拓展以提供更多的色彩搭配空間，色階拓展是指將同色相下的顏色由淺到深劃分為多個(gè)色階梯度。通常色階拓展采用 8～12 級(jí)進(jìn)行劃分，如果層級(jí)過(guò)少可能會(huì)無(wú)法滿足日常的取色需求，而層級(jí)過(guò)多又會(huì)導(dǎo)致色彩區(qū)分度下降，在取色時(shí)也會(huì)增加選色成本。

市面上有很多種色階延展的方法，這里為大家整理了幾種常見(jiàn)的方法：透明疊色、直線等分、工具生成，各位同學(xué)可以基于團(tuán)隊(duì)情況自行選用：

① 透明疊色法

顧名思義，透明疊色法是在原來(lái)顏色的基礎(chǔ)上疊加不同透明梯度的白色/黑色遮罩，由此得到不同色階梯度的衍生色，再通過(guò)取色器吸取疊加后的色值。該方法實(shí)現(xiàn)成本低，無(wú)需其他工具配合即可實(shí)現(xiàn)，但是操作相對(duì)繁瑣，當(dāng)疊加層級(jí)較多時(shí)可能會(huì)導(dǎo)致顏色偏差，有時(shí)需要基于實(shí)際情況再做微調(diào)。

② 直線等分法

直線等分法是通過(guò)在拾色器中建立坐標(biāo)系，之后采用直線等分打點(diǎn)的方法取色。其中拾色器的坐標(biāo)系是基于當(dāng)前選擇的色彩模型而定，如HSB模型橫/縱坐標(biāo)為飽和度/亮度，HSL模型則是飽和度/明度。直線等分法的操作較為簡(jiǎn)單，可以通過(guò)公式算法自動(dòng)取色，但設(shè)計(jì)師獨(dú)立推導(dǎo)的計(jì)算成本較高，通常需配合公式計(jì)算。

具體的操作步驟如下：

在拾色器上標(biāo)明要延展的顏色，將色值點(diǎn)與左上方純白和右下方純黑點(diǎn)連接，得到2條線段。

將2條線段均勻分為5段，所有線段段點(diǎn)合集共11個(gè)點(diǎn)，計(jì)算每個(gè)點(diǎn)的色值數(shù)，即可得到這11個(gè)點(diǎn)組成的色板。

以現(xiàn)有顏色坐標(biāo)（X，Y）為基準(zhǔn)，采用以下的計(jì)算公式即可得到延展色的色值：

• 左上方點(diǎn)：橫坐標(biāo)(X/5)遞減，縱坐標(biāo)以[(100-Y)/5]遞增
• 右下方點(diǎn)：橫坐標(biāo)以[(100-X)/5]遞增，縱坐標(biāo)以(Y/5) 遞減

③ 工具生成

經(jīng)過(guò)多年發(fā)展，國(guó)內(nèi)外多家設(shè)計(jì)系統(tǒng)都開(kāi)發(fā)了直接生成完整色板的開(kāi)源工具，且經(jīng)過(guò)不斷迭代如今算法基本能滿足大部分場(chǎng)景下的色板需求，是中小團(tuán)隊(duì)的首選方法。但是工具生成也存在一些弊端，其色值生成始終是建立在公式計(jì)算的基礎(chǔ)上，故在部分極端場(chǎng)景下依舊需要設(shè)計(jì)師介入調(diào)整。

資料來(lái)源：Ant Design 色板生成算法演進(jìn)之路

以下給大家整理了常見(jiàn)的色板生成工具：

• 在線工具Chroma.js：https://www.vis4.net/palettes
• ArcoDesign Palette 色彩工具：https://arco.design/palette/list
• Ant Design 色板生成工具：https://ant.design/docs/spec/colors-cn#色板生成工具
• Material Palettes 色板生成工具：https://www.material.io/design/color/the-color-system.html#tools-for-picking-colors
• HTML Color Codes 顏色選擇器：https://htmlcolorcodes.com/
• Eva Design System 色彩系統(tǒng)：https://colors.eva.design/
• Atmos色板生成工具：https://atmos.style/

4）第四步：色彩語(yǔ)義化

色彩語(yǔ)義化是指依據(jù)顏色在界面中的作用和使用場(chǎng)景進(jìn)行重新命名，方便團(tuán)隊(duì)后期的維護(hù)和使用。這一步看似簡(jiǎn)單，但是實(shí)際操作起來(lái)需要設(shè)計(jì)師對(duì)色彩的使用場(chǎng)景和團(tuán)隊(duì)取用有深入的理解，很多細(xì)節(jié)需要推敲和考量。這里推薦參考 Nathan Curtis 的語(yǔ)義模版，作者將設(shè)計(jì)系統(tǒng)下的命名模版分為了四個(gè)部分：命名空間-元素對(duì)象-基礎(chǔ)樣式-修飾備注。

資料來(lái)源：Naming Tokens in Design Systems

原文關(guān)于設(shè)計(jì)系統(tǒng)下的語(yǔ)義命名進(jìn)行了詳細(xì)介紹，有興趣的可以直接閱讀原文：https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

Nathan 關(guān)于設(shè)計(jì)系統(tǒng)的命名涵蓋了包括色彩、控件、文字等一系列元素命名方式，而色彩系統(tǒng)只需要截取其中部分拼裝成符合自身場(chǎng)景的語(yǔ)義模版即可。各位可以基于產(chǎn)品規(guī)模和團(tuán)隊(duì)情況選擇合適的內(nèi)容進(jìn)行命名封裝，需要注意的是，語(yǔ)義模版的命名需要合理的把控精度：一方面過(guò)細(xì)顆粒度的命名會(huì)導(dǎo)致過(guò)于臃腫，維護(hù)成本過(guò)高，另一方面粒度過(guò)粗的命名會(huì)導(dǎo)致元素區(qū)分度不夠，在團(tuán)隊(duì)推進(jìn)使用時(shí)容易造成混亂。

關(guān)于如何驗(yàn)證色彩語(yǔ)義是否清晰有個(gè)很簡(jiǎn)單的方法，即直接將設(shè)計(jì)的配色方案提供給開(kāi)發(fā)同學(xué)，看能否在不借助顏色進(jìn)行備注和說(shuō)明的情況下只通過(guò)命名即可理解色彩的語(yǔ)義場(chǎng)景，通過(guò)不同角色視角更容易發(fā)現(xiàn)色彩命名的問(wèn)題。

5）第五步：團(tuán)隊(duì)推進(jìn)

到這里色彩系統(tǒng)的基礎(chǔ)色板和配色方案基本都搭建完成了，后續(xù)就是將其整理到組件庫(kù)，并輸出設(shè)計(jì)文檔同步給團(tuán)隊(duì)其他成員使用。這里推薦使用 Figma Tokens 插件來(lái)進(jìn)行管理和維護(hù)。此外，在同步前端同學(xué)建立開(kāi)發(fā)組件庫(kù)時(shí)，盡量采用語(yǔ)義命名對(duì)顏色進(jìn)行封裝，而非直接寫(xiě)死固定色值，以便日后在迭代調(diào)整時(shí)更加靈活。

• 設(shè)計(jì)內(nèi)協(xié)同：在Figma中生成顏色變量。
• 與開(kāi)發(fā)代碼聯(lián)動(dòng)：利用顏色變量表進(jìn)行信息同步。

參考資料

• https://www.yuque.com/xiami0101/bq79sy/vtnqb262ag42tt66
• https://www.yuque.com/xiami0101/bq79sy/hy3vvi
• https://www.youtube.com/watch?v=k1rB1Y4isHs&list=PLhnwj_CftHvhwO8P0mytRNZzlgbtOvgf4
• https://www.jianshu.com/p/f0e6382dd825
• https://zhuanlan.zhihu.com/p/165548359
• https://jessieji.com/2020/hcl-instead-of-hsl
• https://medium.com/@pk.kiselev/designing-colour-system-d9d39f245e01
• https://www.jianshu.com/p/facdbab5ac20
• https://zhuanlan.zhihu.com/p/32422584
• https://www.yuque.com/xiami0101/bq79sy/ntkf60rgs9g3m2h2?singleDoc#
• https://zhuanlan.zhihu.com/p/102743681?utm_id=0