在B端產(chǎn)品設(shè)計(jì)的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗(yàn)和品牌識(shí)別的重要角色。本文深入探討了色彩空間理論在B端設(shè)計(jì)中的應(yīng)用，從基礎(chǔ)的色彩空間概念到如何在實(shí)際工作中運(yùn)用這些理論，為設(shè)計(jì)師提供了一套科學(xué)的顏色搭配和管理方法。

對(duì)于 B 端產(chǎn)品而言，我們經(jīng)常會(huì)和顏色進(jìn)行斗爭(zhēng)。

比如在工作當(dāng)中，開發(fā)沒有正確還原顏色、不知道如何進(jìn)行色彩配置、以及對(duì)于 B 端產(chǎn)品而言，究竟應(yīng)該如何協(xié)調(diào)科學(xué)的進(jìn)行顏色的搭配～

最近會(huì)講顏色的部分，整體會(huì)分為四篇文章：B 端設(shè)計(jì)如何理解色彩空間、B 端產(chǎn)品怎樣合理搭配顏色、B 端項(xiàng)目的視覺風(fēng)格、B 端項(xiàng)目顏色的實(shí)戰(zhàn)技巧。

本篇文章是第一篇，我們先來聊聊產(chǎn)品配色的基礎(chǔ) 色彩空間與顏色管理。

不知道各位同學(xué)是否遇到這種情況，當(dāng)你在調(diào)整顏色時(shí)，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個(gè)顏色時(shí)，也茫然無措，這時(shí)候的你作何感想？

所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進(jìn)行顏色管理，才能夠讓設(shè)計(jì)順利落地。但顏色其實(shí)過于抽象，因此我們將整體內(nèi)容進(jìn)行簡(jiǎn)化，多和大家聊聊在理論背后究竟應(yīng)該如何與工作內(nèi)容進(jìn)行結(jié)合。

首先我們先說說色彩空間。

一、什么是色彩空間？

色彩空間又叫色彩模型，它是為了讓系統(tǒng)能夠準(zhǔn)確地描述顏色、使用顏色，進(jìn)而定義出來的一種顏色組織方式。

比如有一排隨機(jī)顏色，要按特定規(guī)則排列，你會(huì)怎么做？我相信，我們首先想到的便是按照不同的色相進(jìn)行歸類。

如果顏色變?yōu)?0000個(gè)，又該怎么排列呢？因此，為了讓企業(yè)更好地使用顏色、設(shè)計(jì)師更便利地選擇一致的顏色，行業(yè)中便提出了色彩空間的概念。

色彩空間其實(shí)很簡(jiǎn)單。因?yàn)槲覀冃枰褂妙伾?，且不同人群?duì)顏色的需求不同，所以顏色的排列方式會(huì)存在差異。

比如，行業(yè)中較為出名的潘通色彩體系，其實(shí)是基于印刷行業(yè)制定的一種特殊色彩空間；CMYK是為印刷從業(yè)者提供的、便于他們更好地進(jìn)行物料印刷的色彩空間；Lab是一種更強(qiáng)調(diào)色彩亮度的色彩空間。

因此，行業(yè)會(huì)根據(jù)顏色的不同規(guī)律和自身使用需求，總結(jié)整理出不同的色彩空間。

我們目前在工作當(dāng)中，主要都是聚焦于屏幕當(dāng)中，因此影響顏色呈現(xiàn)的也就變?yōu)椋?/p>

• 設(shè)計(jì)軟件當(dāng)中的色彩空間：以 RGB、HSB、HCT 為主，主要是計(jì)算機(jī)識(shí)別顏色顏色，調(diào)整顏色的重要方式，在電腦軟件當(dāng)中起到重要作用。
• 屏幕顯示當(dāng)中的色彩空間：以 Adobe RGB、Display P3、sRGB 為主，主要是能準(zhǔn)確展示屏幕當(dāng)中的各種顏色。

在我們細(xì)致講解色彩空間的部分時(shí)，我們先來了解三個(gè)重要的概念。

1. 亮度：是光作用于人眼所引起的明亮程度的感覺，它與被觀察物體的發(fā)光強(qiáng)度有關(guān)，主要表現(xiàn)光的強(qiáng)與弱。
2. 色相：是當(dāng)人眼看一種或多種波長(zhǎng)的光時(shí)所產(chǎn)生的色彩感覺，它反映顏色的種類，是決定顏色的基本特征。
3. 飽和度：是指顏色的純度，即該摻入白光的程度，表示顏色深淺的程度。例如：藍(lán)色 + 白色 = 天藍(lán)色，也就是飽和度下降

二、色彩空間的類型

1. RGB  色彩空間

RGB是顯示器當(dāng)中的顏色基礎(chǔ)。

比如在現(xiàn)實(shí)世界當(dāng)中，我們將手機(jī)屏幕進(jìn)行放大，你會(huì)發(fā)現(xiàn)屏幕都是由紅綠藍(lán)三個(gè)燈管所組成的。

而 RGB 的色彩模式就是模擬現(xiàn)實(shí)世界當(dāng)中的屏幕顯示原理，將燈光照射的邏輯在設(shè)計(jì)軟件當(dāng)中進(jìn)行復(fù)現(xiàn)，因此在 RGB 的調(diào)色盤中，就會(huì)分別包含三個(gè)輸入框，這便是 紅綠藍(lán)。

其中，數(shù)字 0 代表不發(fā)光、255 則是最亮的燈光。

那為什么最亮是 255，不是 250？或者是 280 呢？

原因在于RGB 所有的顏色，最后都需要通過計(jì)算機(jī)進(jìn)行運(yùn)算顯示，對(duì)于它說并不認(rèn)識(shí) 紅色、藍(lán)色，在它的腦袋里（不對(duì)，CPU 里面）就只有 0 與 1，因此在計(jì)算機(jī)存儲(chǔ)的時(shí)候，一個(gè)字節(jié)也就是 8 個(gè)比特、也就是 2 的八次方、也就是 256，這樣 一個(gè)色彩信息等于一個(gè)字節(jié)，數(shù)據(jù)存儲(chǔ)就會(huì)更加高效。

所以我們所聊的顏色更多指的是代碼層面的顏色設(shè)定。

接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡(jiǎn)版。

因?yàn)樗訔壝總€(gè)輸入框都會(huì)出現(xiàn) 255（255,255,255 白色）實(shí)在太長(zhǎng)，不利于我們?cè)谌粘９ぷ鳟?dāng)中進(jìn)行記錄。

因此將每個(gè)顏色，三位數(shù)值縮減為兩位數(shù)值（十進(jìn)制變?yōu)槭M(jìn)制），就是增加英文字符的數(shù)據(jù)，就能較短的表達(dá)顏色，使得顏色表達(dá)更為高效。

因?yàn)?Hex 只是 RGB 的精簡(jiǎn)版本，所以 Hex 里面，每?jī)蓚€(gè)字符所對(duì)應(yīng)的就是 紅、綠、藍(lán)。

比如我們剛才提到的這個(gè)藍(lán)色，在 RGB 空間當(dāng)中為(0,86,255) ，Hex 則是#0056FF，也是一一對(duì)應(yīng)關(guān)系。

RGB 聽上去似乎很美好，但問題在于兩點(diǎn)：

1.顏色的調(diào)整不夠直觀：作為設(shè)計(jì)師，我們很難模擬燈光的照射思維對(duì)顏色進(jìn)行調(diào)整，具體應(yīng)該增加多少顏色，其實(shí)是不夠清楚的。我們更熟悉的其實(shí)是：亮度、色相、飽和度，因此在調(diào)色時(shí)會(huì)十分困難。

比如我目前是紅色，那我要調(diào)整到紫色，應(yīng)該輸入多少值呢？其實(shí)我們很難進(jìn)行一個(gè)準(zhǔn)確的判斷。

2.顏色信息與亮度信息的數(shù)據(jù)混合：導(dǎo)致我們很難對(duì)于有一個(gè)準(zhǔn)確的判斷，比如在 RGB 相同的數(shù)值當(dāng)中，明顯會(huì)感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調(diào)色時(shí)，顏色一致性偏差較大。

為了解決這些問題，就提出一種新的色彩模型：HSB

2. HSB 色彩空間

HSB （也叫 HSV）就是通過顏色的  色相、飽和度、亮度 來進(jìn)行表示。

在色相當(dāng)中，由于顏色的呈現(xiàn)是色環(huán)的方式，因此在數(shù)值上是以 0-360 度來進(jìn)行表示的，在設(shè)計(jì)軟件里面，我們也只能輸入所對(duì)應(yīng)的數(shù)值。

同時(shí)飽和度與亮度都是以百分比的形式進(jìn)行呈現(xiàn)，飽和度越低，相對(duì)應(yīng)就會(huì)給顏色增加白色，使其更灰；亮度越低，就會(huì)增加對(duì)應(yīng)的黑色，讓其更深。

由于 HSB 的色彩空間的分類模式非常有利于我們進(jìn)行顏色的調(diào)整，因此我們?cè)谌粘Ｕ{(diào)色時(shí)其實(shí)會(huì)經(jīng)常用到。

比如日常工作當(dāng)中，假設(shè)我們需要設(shè)計(jì)一組圖標(biāo)，根據(jù) HSB 顏色的基本原理，我們其實(shí)只需要調(diào)整不同的色相，就能夠得到不同的圖標(biāo)顏色。

但… 顏色上依舊會(huì)存在問題。

你會(huì)發(fā)現(xiàn)當(dāng)我們調(diào)整了色相過后，整體的顏色并沒有形成統(tǒng)一。原因在于我們?nèi)搜蹖?duì)于 黃綠色的感知 會(huì)和紅色、藍(lán)色有所不同，我們通常在看黃綠色時(shí)會(huì)更為刺眼，因此在設(shè)計(jì)層面上需要單獨(dú)調(diào)整。

所以在 HSB 當(dāng)中的顏色邏輯上，也并沒有解決顏色一致性的問題。于是在 2021 年 Google 提出一種全新的色彩模式，HCT。

3. HCT 色彩空間

HCT 首先會(huì)將顏色當(dāng)中的 感知度、亮度 進(jìn)行結(jié)合，對(duì)之前的 HSB 重新調(diào)整。

在顏色層面上主要分為：Hue：色相、Chroma：色度、Tone：色調(diào)

色相與色度和之前基本類似，但色調(diào)上優(yōu)化了黃綠色凸顯問題，讓人眼的感知度也加入到了色彩空間當(dāng)中，使其顏色更為準(zhǔn)確。

同時(shí)色彩空間的呈現(xiàn)，優(yōu)化了顏色漸變的流暢性，我們會(huì)發(fā)現(xiàn)整體的漸變感覺會(huì)更為自然。

那為什么 Google 想要做 HCT？

其實(shí)因?yàn)?Material Design 當(dāng)中會(huì)強(qiáng)調(diào)設(shè)計(jì)的一致性和靈活性，在功能設(shè)計(jì)上，需要增加一個(gè)根據(jù)屏幕當(dāng)中的圖標(biāo)生成與其風(fēng)格一致的壁紙。

但在之前無論什么樣的色彩空間都不能準(zhǔn)確的還原顏色?，F(xiàn)在就提供了一個(gè)可靠的色彩基礎(chǔ)，能夠讓我們?cè)诓煌脑O(shè)備、平臺(tái)和應(yīng)用場(chǎng)景下，都能夠生成具有一致性的色彩方案，同時(shí)也能更好地適應(yīng)各種主題和風(fēng)格的變化，如亮色模式和暗色模式的切換。

比如，還是以上面這個(gè)案例，我們使用 HSB 與 HCT 對(duì)顏色進(jìn)行的色相的調(diào)整，那得到的結(jié)果明顯會(huì)發(fā)現(xiàn) HCT 會(huì)更加準(zhǔn)確。

那 HCT 就真那么完美無瑕？

其實(shí)也不然，因?yàn)?HCT 色彩空間出現(xiàn)時(shí)間較晚，所以在使用上也會(huì)有很多問題。

• 設(shè)備兼容性差：很多設(shè)計(jì)軟件目前對(duì) HCT 基礎(chǔ)沒有適配，所以即使使用，很多老舊設(shè)備也并不能支持。
• 計(jì)算復(fù)雜度高：HCT 的色彩空間涉及到更為復(fù)雜的計(jì)算算法，因此它對(duì)于系統(tǒng)的資源要求更高。
• 認(rèn)知成本較大：對(duì)于新的事物，往往在行業(yè)中的普及會(huì)相對(duì)較慢，因此還需要長(zhǎng)時(shí)間的普及才行。

三、色彩空間如何應(yīng)用？

這么深?yuàn)W的色彩空間，到底要如何使用？

1. 以 HSB 的為主

因?yàn)?HSB 是設(shè)計(jì)師最容易理解的色彩空間，因此我們?cè)谡{(diào)色時(shí)需要根據(jù)數(shù)值來進(jìn)行顏色的調(diào)教。

比如說你的顏色很臟，不夠干凈。其實(shí)就是在強(qiáng)調(diào) HSB 當(dāng)中使用了更多的黑色，我們便可以調(diào)整到這個(gè)色彩空間當(dāng)中，去增加 B 的值（也就是第三個(gè)輸入框）

比如說你的字體很灰，不夠明確。

其實(shí)就是在說 你的亮度太高，需要減少亮度，也就是 H 的值（也就是第一個(gè)輸入框）

2. 色彩更具數(shù)據(jù)化

因?yàn)槊恳粋€(gè)屏幕所顯示的顏色其實(shí)都不太相同，因此色彩調(diào)整時(shí)要多看數(shù)據(jù)，觀察數(shù)據(jù)之間的對(duì)比變化。

比如以 B 端產(chǎn)品的中性色為例，現(xiàn)在系統(tǒng)當(dāng)中所使用的正文顏色為 #333333，看到過后就明確知道顏色深度不夠、顏色也不透氣。

我們就會(huì)按照，先確定顏色色相，為灰色偏藍(lán)色，因此在色相當(dāng)中需要拖動(dòng)色環(huán)找到合適的色相；

緊接著確定飽和度，因?yàn)橐{(lán)色，但不宜過多，因此整體的數(shù)值只會(huì)在 1-5 之前浮動(dòng)；

最后確定深度，之前顏色過于淺，需要加深，所以直接減少，變?yōu)?22 左右的數(shù)值。

3. HCT 輔助顏色判斷

其次在判斷顏色時(shí)，也會(huì)更具章法。

在多輔助色的情況下，我們可以使用 HCT 對(duì)顏色進(jìn)行判斷。

對(duì)于日常工作來說，我們可以使用 Figma 當(dāng)中的 color Space 插件 進(jìn)行日常的色彩管理。在今后遇到類似同類型圖標(biāo)時(shí)，我們可以使用 HCT 的方式快速生成發(fā)散色板，幫助我們進(jìn)行色彩搭配。

4. 引入 HCT 完善工作流

最后在 B 端系統(tǒng)當(dāng)中，會(huì)存在較多顏色搭配的場(chǎng)景。

像是圖表設(shè)計(jì)、自定義系統(tǒng)主題，原來只能通過系統(tǒng)預(yù)設(shè)固定顏色的方式進(jìn)行解決，而現(xiàn)在 Google 也將這套計(jì)算公式開源，也就是說程序員可以直接引用 HCT 的色彩空間，將顏色配置的權(quán)限給到用戶，通過顏色的調(diào)整，呈現(xiàn)用戶想要的顏色內(nèi)容。

四、屏幕顯示的色彩空間

對(duì)于屏幕顯示的色彩空間而言，有部分內(nèi)容我們也是要重點(diǎn)關(guān)注。比如在 B 端設(shè)計(jì)當(dāng)中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進(jìn)行判斷。

1. sRGB 色彩空間

sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發(fā)的一種標(biāo)準(zhǔn)色彩空間，目的是提供一種通用的色彩標(biāo)準(zhǔn)，使得在不同的設(shè)備（如顯示器、打印機(jī)等）之間能夠?qū)崿F(xiàn)相對(duì)一致的色彩顯示。

對(duì)于 sRGB 來說，它是我們作為設(shè)計(jì)師最為重要的屏幕顯示色彩空間，因?yàn)樗ㄓ眯詮?qiáng)，所以大多數(shù)普通的電腦顯示器、網(wǎng)頁瀏覽器等都默認(rèn)采用 sRGB 色彩空間，這樣在瀏覽網(wǎng)頁、查看普通的數(shù)碼照片時(shí)，可以獲得比較穩(wěn)定的色彩效果。

所以我們?cè)谧鲈O(shè)計(jì)時(shí)，通常都會(huì)將屏幕與軟件，都調(diào)整的 sRGB 的空間當(dāng)中，這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費(fèi)級(jí)顯示器設(shè)備。它在 DCI – P3 的基礎(chǔ)上進(jìn)行了一些調(diào)整，以適應(yīng)顯示器的特性。

整體而言 P3 色彩空間顯示出來的顏色會(huì)更加 生動(dòng)、艷麗，但是這會(huì)和你的設(shè)備密切相關(guān)。目前行業(yè)中只在蘋果設(shè)備以及部分高端顯示器才會(huì)使用，所以我們?cè)谠O(shè)計(jì)時(shí)需要考慮自己產(chǎn)品的受眾，這一設(shè)備是否普遍使用。

最后，我們總結(jié)一下：

1. 色彩空間就是我們使用顏色的一種方式
2. 在調(diào)色時(shí)，我們會(huì)優(yōu)先使用 HSB 的色彩空間
3. HCT 是 Google 推出，主要目的是 色彩視覺的統(tǒng)一，在我們生成輔助色的時(shí)候有用
4. 屏幕當(dāng)中我們的所有顯示配置盡量調(diào)整為 sRGB，這樣更符合大多數(shù)用戶的顯示情況