中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在產品設計中，色彩的設定是一個關鍵因素，而如果沒有設定色彩規范，那么產品在呈現上可能就會出現不統一、雜亂的視覺特征。那么，如何理解色彩系統的存在？B端產品又可以怎樣搭建自己的色彩系統？一起來看看作者的總結。

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

一、色彩理論基礎

色彩理論基礎是搭建色彩系統的基石，接下來我將從色彩本質開始，為大家介紹設計師需要掌握的幾種常見色彩模型。

1. 色彩的本質

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

資料來源：網絡

反射到人眼中的光，除了光本身的顏色，還會收到物質特性的影響。白色物體在被黃光照射時，反射到人眼中看起來就是黃色的，但藍色物體在被黃光照射時會呈現黑色，原理是黃色作為藍色的反色調，黃光本身不包含任何藍光，因而被藍色物體完全吸收時并無法反射出其他顏色，導致人眼看起來就是黑色。

資料來源：巫師后期-什么是顏色

此外，我們最終感受到的顏色除了光和物質特性外，還會收到周圍環境、時間和歷史經驗的影響。下面這張網絡圖很多人都見過，同一張圖片在不同人眼中會識別為不同的顏色。

圖片來源：巫師后期-什么是顏色

綜上所述，色彩的本質是一種復合的物理現象，是人眼感知物體表面反射光的結果。

2. 色溫：描述發光體的冷暖關系

通過理解色彩本質可以發現，單純憑借人的色彩感知來描述顏色具有很強的主觀性，要如何保證在實際生產中每個人表述的是同一種顏色呢？這就需要找到可以科學且規范描述顏色的方法，在日常生活中我們接觸比較多的是色溫法。

色溫法的原理是：物體把熱量以光的方式輻射出去，當物體處于不同溫度時會發出不同顏色的光：溫度比較低時呈現黃色，溫度高時呈現藍色或白色。

這里標定的色溫和大眾認知中的冷暖感受正好相反，通常我們會認為紅黃色調偏暖，藍白色調偏冷，但實際上紅色的色溫最低，然后逐步增加的是橙色、黃色、白色和藍色，藍色是最高的色溫。因此色溫的高低和給人的色調感受是正好相反的。

資料來源：網絡

熟悉攝影的同學都知道，當我們在清晨或黃昏的戶外拍攝時照片時常會發黃，這是因為該時間段色溫較低，光線呈現為橙黃色。而相機的白平衡模式可以緩解環境光的影響。其原理就是通過切換預設場景的色溫值抵消當前實景的色溫影響，使拍攝出的照片呈現出白色基準更真實。

資料來源：網絡

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

資料來源：網絡

3. 常見的色彩模型

為了更準確的描述顏色，工程師們引入了色彩模型的概念：將色彩拆分成不同屬性并進行量化，通過計算機語言更科學準確的表述顏色，而不同維度的拆分方法便是色彩模型。隨著科技發展和生產制造的需要，色彩模型迭代出了多個版本類型，接下來我將挨個介紹常見模型的差異和功能特點：

1）HSB和HSL模型

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

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

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

資料來源：網絡

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

雖然HSL模型有諸多好處（HSB、HSL屬于同類模型，后文統一用HSL概括），但其缺陷也很明顯：HSL模型無法用于工業制造，因為在自然界中基本很難找到某一屬性純度可以達到標準的物體，也難以控制單一屬性變量來改變物體顏色。為了解決以上限制，用于屏幕顯示的RGB模型和彩色印刷的CMYK模型應運而生。

2）RGB模型

RGB模型是依據顏色發光的原理所搭建的，也被稱為光的三原色，工業上用于通過紅、綠、藍三色發光單元產生顏色的電子屏幕。

• R 紅：Red，以數值（0-255）表示。
• G 綠：Green，以數值（0-255）表示。
• B 藍：Blue，以數值（0-255）表示。

通常情況下，RGB各有256級亮度，用數字表示為從0、1、2…直到255，雖然數值最高是255，但0也是數值之一，因此共256級。將三種顏色疊加并控制其顏色強度，256級的RGB色彩總共能組合出上千萬種色彩，而這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。

資料來源：網絡

RGB模型是我們日常工作接觸最頻繁的模型，但是不知道你是否產生過疑惑：為什么偏偏選擇【RGB紅綠藍】作為光的三原色，而不用其他色彩呢？

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

資料來源：網絡

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

資料來源：網絡

關于HEX色值

這里還有個知識點就是HEX色值，聽到它大家都不會陌生，在很多拾色器中我們都見到過，工作中也經常將其提供給開發同學作為顏色標識。

雖然看起來結構不同，但HEX也是采用RGB模型的原理來定義顏色，只是語言上用的是十六進制代碼：字節值范圍從 0 到 FF，顏色的最低強度為 00，而最高強度為 FF。實際轉換時，每位數字范圍是 0～15（分為0～9 和 A～F，其中 A～F 表示 10～15），這樣每位數字都能代表16個數，而每2位數字相乘即可代表256級，正好對應一個顏色通道。

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

十六進制到RGB轉換器工具：https://purecalculators.com/zh-CN/hex-to-rgb-converter

3）CMYK模型

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

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

資料來源：網絡

通過以上現象我們會發現，將不同顏色的物質不斷揉合最終會得到黑色物質，而這正好滿足了我們工業印刷品上白紙黑字的需求：選擇【紅、綠、藍】的補色【青、品紅、黃】，通過調整這三種顏色油墨的比例，就能得到反射不同顏色的油墨。

理論來說同比例的這三色油墨可以直接混合出【黑色】，但是現實中由于生產技術的限制，油墨純度往往不盡人意，混合得到的黑色不夠濃郁，只能依靠提純的黑色加以混合，這種做法同時也可以節省油墨消耗。

資料來源：網絡

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

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

4）Lab模型

以上三種是最常見的通用模型，還有些色彩模型用于更特定的場景，Lab模型便是基于生理特征的一種模型。RGB和CMYK受限于載體，同樣的顏色可能會因為材質差異影響呈現不同的顏色，Lab模型則是彌補其不足，擺脫原材料載體對模型的影響。

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

a b是兩個顏色通道：

• a 通道：從綠色到紅色，以數值（-128至127）表示。
• b 通道：從黃色到藍色，以數值（-128至127）表示。

資料來源：網絡

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

關于色彩空間：

上面我們提到一個詞叫色彩空間，它是圖像處理和計算機圖形學領域中非常重要的概念，在圖像處理、圖形學、圖像質量評價和廣告設計等眾多領域都有涉及。很多人會將它與色彩模型弄混，實際上兩者是不同的概念：

• 色彩模型：一種數學模型，用于表示色彩的三維數學空間，通常會用3個或者4個數值來表示。
• 色彩空間：一種色彩表示方法，它將色彩模型中的顏色映射到二維或三維空間，以便于顯示和比較。

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

資料來源：百科

5）HCL模型

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

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

注意這里HCL模型的【Luminance】與前文HSL模型中的【Lightness】是不同的，我們先來看一個例子，分別通過HSL和HCL推導的色卡在對比度上有何差異？

很明顯，雖然都是控制變量但左圖在顏色對比度層次不齊。這是因為HSL模型是基于電子元件的顯示亮度進行計算的，但并非人眼感知光的實際感受。所以在配色時如果采用HSL模型，即使【Lightness 明度】值相同，色彩亮度在人眼看來依舊不匹配，需要設計師基于主觀意愿進行調整，不僅耗費時間和精力，配色流程不夠科學標準化。

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

資料來源：TDesign

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

• HCL轉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

亮度、明度和照度的區別：

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

• Brightness 亮度：用于HSB模型，客觀測量顏色的顯示亮度。顏色變化從黑到標準色相，滿值為顏色標準色相。
• Lightness 明度：用于HSL模型，和HSB一樣客觀測量顏色的顯示亮度，與人亮度感知沒有直接關系。顏色變化從黑到標準色相再到白，半值為顏色標準色相，滿值為白色。
• Luminance 照度：用于HCL模型，主觀上衡量發光的強弱和顏色對比度。

可以發現前2個都是客觀上對顏色亮度的衡量，而【Luminance 照度】才是真正意義上主觀感受顏色的標準。

二、B端產品的色彩系統

近年來，隨著企業級產品功能體量不斷豐富，產品設計體系逐漸趨向于規范化，如何搭建一套標準易用的色彩系統對于提升團隊工作效率和產品體驗一致性至關重要。通過系統化的顏色管理方法，可以幫助企業統一品牌顏色，提高品牌識別度和統一性。接下來，我將為大家詳細講解B端產品中色彩系統的構成和搭建方法：

1. 色彩系統的概念

簡單來說，色彩系統是指從整個設計系統里抽離出的分支，為方便管理而針對色彩語言搭建的管理體系。

完整的設計系統由設計語言和模式庫構成，在設計原則的指引下，通過統一的協作語言和科學的管理方法組織起來，創建體驗一致的用戶界面。完整的設計系統可以拆解成三部分：

1. 設計原則：設計要遵循的中心思想，所有的問題和形式都向原則靠攏，減少不確定性；
2. 設計語言：包括價值觀、品牌、符號、色彩、文字等品自主表達的媒介；
3. 模式庫：即組件庫，通過對控件進行歸納整理形成的可快速復用工具庫。

色彩系統也是如此，并不僅僅是簡單的色彩組件庫，結合設計系統的內容，我們可以將設計原則和設計語言歸入色彩規范中，而模式組件庫即產品色板（調色板）。這里可以將色彩系統定義為：由色彩規范和產品色板組成，可以科學有效管理色彩的應用程序。

2. 什么是好的色彩系統

理解了色彩系統的定義，如何保證搭建的色彩系統科學有效？好的色彩系統應遵循以下三個原則：

1. 有意義：能夠體現產品個性，凸顯品牌基因，滿足用戶對產品的認知感受，不同色彩的搭配使用能滿足用戶的心理預期，提升使用體驗。
2. 易上手：色彩系統不僅僅是給設計師自身使用的，在整個產品周期中，從上游的品牌戰略到下游的視覺運營，都要使用到產品配色，優秀的色彩系統應方便團隊成員上手，即使沒有專業背景也可以很快的理解和使用。
3. 無障礙：不同顏色間對比度要匹配 WCAG 的對比度標準，保證內容元素的可識別度。

3. 色彩識別無障礙

資料來源：網絡

在色彩系統搭建之初就考慮色彩無障礙識別問題，可以普適更多場景，有效提升產品信息識別度和易用性。WCAG（Web Content Accessibility Guidelines ）內容無障礙指南作為行業廣泛使用的無障礙設計標準，是檢驗文字顏色可讀性的有效依據，只要文本顏色與背景色之間的對比度滿足以上標準，就能確保被清晰識別。WCAG 2.0 中將顏色對比等級分為 3 種，等級越高意味著顏色的對比度越高，呈現出來的信息可讀性越好：

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

這里為大家推薦一款可視化對比度檢測工具Color Review：通過將 3、4.5、7 對比度臨界點的顏色通過曲線標識，可清晰直觀的看到當前色值的對比度在拾色器中的位置，方便進行調整。

Color Review對比度可視化檢測工具：https://color.review/

資料來源：Color Review

4. 產品色板的組成

依據色彩的類型和功能不同，產品級色板的內容可分為主色、中性色、輔助色和功能色，其中每種顏色都應有相應的色階拓展供配色使用。

1）主色

產品主色一般是頁面中使用最多的顏色，通常被使用在關鍵行動點、操作狀態、重要信息提示、圖形化等場合。

很多設計師會直接將主色和品牌色劃等號，即直接將品牌色作為產品主色使用，我們日常接觸的C端產品大多也是直接使用品牌色作為主色使用，但是B端產品主色也可以直接使用品牌色嗎？這里需要先理解B端和C端產品的設計差異。

C端產品設計側重流量思維，追求盡可能滲透用戶的碎片化生活來吸引用戶。通過將品牌色作為主色使用可以凸顯品牌特征，強化用戶心理認知，以此來提高用戶粘性和活躍度。

而B端設計側重的是效率思維，強調提升用戶的操作效率幫助其達到使用目標。所以B端產品主色優先考慮色彩的識別度和視覺感受，盡可能保持用戶在使用產品時沉浸感，即使在長時間瀏覽時也不會感到不適。因此究其根本，B端產品主色不能對用戶的使用操作造成干擾，必要時需要在原有品牌視覺的基礎上提取品牌色進行修正，使其更符合用戶的使用場景。當然能兼具品牌價值傳遞和操作體驗是產品的最優方案。

2）中性色

中性色又稱無彩色，包括黑色、白色及調和后不同深淺的灰色，常被使用在文字、圖標、背景、線框等場景。中性色本身不具備顏色屬性，沒有色相冷暖的區分，因此可以更好的襯托其他有彩色，也能拉開信息的層次差距，對于創造結構、表達邊界和建立信息層次十分重要。

• 一般淺灰色應用在分割線、表單描邊、背景色等場景，劃分頁面布局且避免對主要內容造成干擾。
• 深灰色主要應用在正文、標題、圖標等元素上，通過明度變化突出內容，方便用戶瀏覽。

有些產品會在中性色中加入適度色彩傾向，在保持中性色本身信息區分度的前提下，增加品牌色基因來強化品牌氛圍。

資料來源：TDesign

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

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

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

3）輔助色

輔助色是在主色基礎上衍生出的其他顏色，主要有2個作用：一方面可以平衡色彩系統，緩解用戶在使用產品過程中頻繁使用單色造成的視覺疲勞，另一方面可以豐富色彩系統的可用性，通過和主色對比增加內容區分度。

資料來源：網絡

根據研究來看，人類可命名的有彩色數量僅為8～9種，更多的顏色分類會增加使用時的篩選負擔，同時色彩區分度也會降低。故通常建議在人類可命名的8種顏色中選擇6～8種作為輔助色即可，如果有更多用色場景需求可以考慮加入拓展的顏色色階進行交替使用。

4）功能色

B端產品中會利用色彩的心理暗示來對用戶進行狀態反饋，以降低用戶認知成本，這部分輔助色通常被獨立出來稱為功能色：遵循用戶心智和行業內默認的色彩語義，選擇特定顏色向用戶傳達成功、失敗、告警、鏈接等狀態信息。如用紅色傳達通知、提醒、錯誤等，綠色傳達確認、成功、正確等，橙色傳達警告等。

5. 色彩系統搭建

以上便是色彩系統的主要內容，接下來將詳細介紹如何搭建適合自身業務的色彩系統，主要分為以下五步：

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

1）第一步：色相環取色

色相環取色是在主色基礎上通過使用色相環來提取輔助色，具體的操作方法為：以主色的【色相 Hue】為起始點，在色相環上以15°為梯度進行加減，得到24色的色板。再根據自身產品場景，選擇其中6～8種的顏色作為輔助色。

2）第二步：顏色校正

在色相環取色過程中，雖然保持其他變量，只對色相進行了變換，但由于顏色本身在視覺感受上存在亮度差異，故需要進行顏色校正，一方面保證整個色板保持視覺上的感官同頻，另一方面保證視障群體的識別度。

3）第三步：色階延展

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

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

① 透明疊色法

顧名思義，透明疊色法是在原來顏色的基礎上疊加不同透明梯度的白色/黑色遮罩，由此得到不同色階梯度的衍生色，再通過取色器吸取疊加后的色值。該方法實現成本低，無需其他工具配合即可實現，但是操作相對繁瑣，當疊加層級較多時可能會導致顏色偏差，有時需要基于實際情況再做微調。

② 直線等分法

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

具體的操作步驟如下：

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

將2條線段均勻分為5段，所有線段段點合集共11個點，計算每個點的色值數，即可得到這11個點組成的色板。

以現有顏色坐標（X，Y）為基準，采用以下的計算公式即可得到延展色的色值：

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

③ 工具生成

經過多年發展，國內外多家設計系統都開發了直接生成完整色板的開源工具，且經過不斷迭代如今算法基本能滿足大部分場景下的色板需求，是中小團隊的首選方法。但是工具生成也存在一些弊端，其色值生成始終是建立在公式計算的基礎上，故在部分極端場景下依舊需要設計師介入調整。

資料來源：Ant Design 色板生成算法演進之路

以下給大家整理了常見的色板生成工具：

• 在線工具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 色彩系統：https://colors.eva.design/
• Atmos色板生成工具：https://atmos.style/

4）第四步：色彩語義化

色彩語義化是指依據顏色在界面中的作用和使用場景進行重新命名，方便團隊后期的維護和使用。這一步看似簡單，但是實際操作起來需要設計師對色彩的使用場景和團隊取用有深入的理解，很多細節需要推敲和考量。這里推薦參考 Nathan Curtis 的語義模版，作者將設計系統下的命名模版分為了四個部分：命名空間-元素對象-基礎樣式-修飾備注。

資料來源：Naming Tokens in Design Systems

原文關于設計系統下的語義命名進行了詳細介紹，有興趣的可以直接閱讀原文：https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

Nathan 關于設計系統的命名涵蓋了包括色彩、控件、文字等一系列元素命名方式，而色彩系統只需要截取其中部分拼裝成符合自身場景的語義模版即可。各位可以基于產品規模和團隊情況選擇合適的內容進行命名封裝，需要注意的是，語義模版的命名需要合理的把控精度：一方面過細顆粒度的命名會導致過于臃腫，維護成本過高，另一方面粒度過粗的命名會導致元素區分度不夠，在團隊推進使用時容易造成混亂。

關于如何驗證色彩語義是否清晰有個很簡單的方法，即直接將設計的配色方案提供給開發同學，看能否在不借助顏色進行備注和說明的情況下只通過命名即可理解色彩的語義場景，通過不同角色視角更容易發現色彩命名的問題。

5）第五步：團隊推進

到這里色彩系統的基礎色板和配色方案基本都搭建完成了，后續就是將其整理到組件庫，并輸出設計文檔同步給團隊其他成員使用。這里推薦使用 Figma Tokens 插件來進行管理和維護。此外，在同步前端同學建立開發組件庫時，盡量采用語義命名對顏色進行封裝，而非直接寫死固定色值，以便日后在迭代調整時更加靈活。

• 設計內協同：在Figma中生成顏色變量。
• 與開發代碼聯動：利用顏色變量表進行信息同步。

參考資料

• 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