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

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

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

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

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

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

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

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

一、什么是色彩空間？

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

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

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

色彩空間其實很簡單。因為我們需要使用顏色，且不同人群對顏色的需求不同，所以顏色的排列方式會存在差異。

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

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

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

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

在我們細致講解色彩空間的部分時，我們先來了解三個重要的概念。

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

二、色彩空間的類型

1. RGB  色彩空間

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

比如在現(xiàn)實世界當中，我們將手機屏幕進行放大，你會發(fā)現(xiàn)屏幕都是由紅綠藍三個燈管所組成的。

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

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

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

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

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

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

因為它嫌棄每個輸入框都會出現(xiàn) 255（255,255,255 白色）實在太長，不利于我們在日常工作當中進行記錄。

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

因為 Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個字符所對應(yīng)的就是 紅、綠、藍。

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

RGB 聽上去似乎很美好，但問題在于兩點：

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

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

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

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

2. HSB 色彩空間

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

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

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

由于 HSB 的色彩空間的分類模式非常有利于我們進行顏色的調(diào)整，因此我們在日常調(diào)色時其實會經(jīng)常用到。

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

但… 顏色上依舊會存在問題。

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

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

3. HCT 色彩空間

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

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

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

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

那為什么 Google 想要做 HCT？

其實因為 Material Design 當中會強調(diào)設(shè)計的一致性和靈活性，在功能設(shè)計上，需要增加一個根據(jù)屏幕當中的圖標生成與其風格一致的壁紙。

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

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

那 HCT 就真那么完美無瑕？

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

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

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

這么深奧的色彩空間，到底要如何使用？

1. 以 HSB 的為主

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

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

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

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

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

因為每一個屏幕所顯示的顏色其實都不太相同，因此色彩調(diào)整時要多看數(shù)據(jù)，觀察數(shù)據(jù)之間的對比變化。

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

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

緊接著確定飽和度，因為要偏藍色，但不宜過多，因此整體的數(shù)值只會在 1-5 之前浮動；

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

3. HCT 輔助顏色判斷

其次在判斷顏色時，也會更具章法。

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

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

4. 引入 HCT 完善工作流

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

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

四、屏幕顯示的色彩空間

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

1. sRGB 色彩空間

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

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

所以我們在做設(shè)計時，通常都會將屏幕與軟件，都調(diào)整的 sRGB 的空間當中，這樣就能夠最大限度保證色彩的一致。

2. Display P3 色彩空間

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

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

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

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