在B端產(chǎn)品設計的世界里，色彩不僅僅是視覺元素，它還承載著信息傳遞、用戶體驗和品牌識別的重要角色。本文深入探討了色彩空間理論在B端設計中的應用，從基礎的色彩空間概念到如何在實際工作中運用這些理論，為設計師提供了一套科學的顏色搭配和管理方法。
對于 B 端產(chǎn)品而言，我們經(jīng)常會和顏色進行斗爭。
比如在工作當中，開發(fā)沒有正確還原顏色、不知道如何進行色彩配置、以及對于 B 端產(chǎn)品而言，究竟應該如何協(xié)調(diào)科學的進行顏色的搭配～
最近會講顏色的部分，整體會分為四篇文章：B 端設計如何理解色彩空間、B 端產(chǎn)品怎樣合理搭配顏色、B 端項目的視覺風格、B 端項目顏色的實戰(zhàn)技巧。
本篇文章是第一篇，我們先來聊聊產(chǎn)品配色的基礎 色彩空間與顏色管理。
不知道各位同學是否遇到這種情況，當你在調(diào)整顏色時，就是在漫無目的的在拾色器上來回游走，在被問到為什么要選擇這個顏色時，也茫然無措，這時候的你作何感想？
所以顏色還原需要熟練的掌握色彩空間，并配合屏幕進行顏色管理，才能夠讓設計順利落地。但顏色其實過于抽象，因此我們將整體內(nèi)容進行簡化，多和大家聊聊在理論背后究竟應該如何與工作內(nèi)容進行結(jié)合。
首先我們先說說色彩空間。
一、什么是色彩空間？
色彩空間又叫色彩模型，它是為了讓系統(tǒng)能夠準確地描述顏色、使用顏色，進而定義出來的一種顏色組織方式。
比如有一排隨機顏色，要按特定規(guī)則排列，你會怎么做？我相信，我們首先想到的便是按照不同的色相進行歸類。
如果顏色變?yōu)?0000個，又該怎么排列呢？因此，為了讓企業(yè)更好地使用顏色、設計師更便利地選擇一致的顏色，行業(yè)中便提出了色彩空間的概念。
色彩空間其實很簡單。因為我們需要使用顏色，且不同人群對顏色的需求不同，所以顏色的排列方式會存在差異。
比如，行業(yè)中較為出名的潘通色彩體系，其實是基于印刷行業(yè)制定的一種特殊色彩空間；CMYK是為印刷從業(yè)者提供的、便于他們更好地進行物料印刷的色彩空間；Lab是一種更強調(diào)色彩亮度的色彩空間。
因此，行業(yè)會根據(jù)顏色的不同規(guī)律和自身使用需求，總結(jié)整理出不同的色彩空間。
我們目前在工作當中，主要都是聚焦于屏幕當中，因此影響顏色呈現(xiàn)的也就變?yōu)椋?/p>
- 設計軟件當中的色彩空間：以 RGB、HSB、HCT 為主，主要是計算機識別顏色顏色，調(diào)整顏色的重要方式，在電腦軟件當中起到重要作用。
- 屏幕顯示當中的色彩空間：以 Adobe RGB、Display P3、sRGB 為主，主要是能準確展示屏幕當中的各種顏色。
在我們細致講解色彩空間的部分時，我們先來了解三個重要的概念。
- 亮度：是光作用于人眼所引起的明亮程度的感覺，它與被觀察物體的發(fā)光強度有關(guān)，主要表現(xiàn)光的強與弱。
- 色相：是當人眼看一種或多種波長的光時所產(chǎn)生的色彩感覺，它反映顏色的種類，是決定顏色的基本特征。
- 飽和度：是指顏色的純度，即該摻入白光的程度，表示顏色深淺的程度。例如：藍色 + 白色 = 天藍色，也就是飽和度下降
二、色彩空間的類型
1. RGB 色彩空間
RGB是顯示器當中的顏色基礎。
比如在現(xiàn)實世界當中，我們將手機屏幕進行放大，你會發(fā)現(xiàn)屏幕都是由紅綠藍三個燈管所組成的。
而 RGB 的色彩模式就是模擬現(xiàn)實世界當中的屏幕顯示原理，將燈光照射的邏輯在設計軟件當中進行復現(xiàn)，因此在 RGB 的調(diào)色盤中，就會分別包含三個輸入框，這便是 紅綠藍。
其中，數(shù)字 0 代表不發(fā)光、255 則是最亮的燈光。
那為什么最亮是 255，不是 250？或者是 280 呢？
原因在于RGB 所有的顏色，最后都需要通過計算機進行運算顯示，對于它說并不認識 紅色、藍色，在它的腦袋里（不對，CPU 里面）就只有 0 與 1，因此在計算機存儲的時候，一個字節(jié)也就是 8 個比特、也就是 2 的八次方、也就是 256，這樣 一個色彩信息等于一個字節(jié)，數(shù)據(jù)存儲就會更加高效。
所以我們所聊的顏色更多指的是代碼層面的顏色設定。
接著我們打開 Figma，看到另一種格式 Hex，那我們稱之為是 RGB 模式的精簡版。
因為它嫌棄每個輸入框都會出現(xiàn) 255（255,255,255 白色）實在太長，不利于我們在日常工作當中進行記錄。
因此將每個顏色，三位數(shù)值縮減為兩位數(shù)值（十進制變?yōu)槭M制），就是增加英文字符的數(shù)據(jù)，就能較短的表達顏色，使得顏色表達更為高效。
因為 Hex 只是 RGB 的精簡版本，所以 Hex 里面，每兩個字符所對應的就是 紅、綠、藍。
比如我們剛才提到的這個藍色，在 RGB 空間當中為(0,86,255) ，Hex 則是#0056FF，也是一一對應關(guān)系。
RGB 聽上去似乎很美好，但問題在于兩點：
1.顏色的調(diào)整不夠直觀：作為設計師，我們很難模擬燈光的照射思維對顏色進行調(diào)整，具體應該增加多少顏色，其實是不夠清楚的。我們更熟悉的其實是：亮度、色相、飽和度，因此在調(diào)色時會十分困難。
比如我目前是紅色，那我要調(diào)整到紫色，應該輸入多少值呢？其實我們很難進行一個準確的判斷。
2.顏色信息與亮度信息的數(shù)據(jù)混合：導致我們很難對于有一個準確的判斷，比如在 RGB 相同的數(shù)值當中，明顯會感受到 黃綠色 與其他顏色的亮度存在較大差異，這樣在調(diào)色時，顏色一致性偏差較大。
為了解決這些問題，就提出一種新的色彩模型：HSB
2. HSB 色彩空間
HSB （也叫 HSV）就是通過顏色的 色相、飽和度、亮度 來進行表示。
在色相當中，由于顏色的呈現(xiàn)是色環(huán)的方式，因此在數(shù)值上是以 0-360 度來進行表示的，在設計軟件里面，我們也只能輸入所對應的數(shù)值。
同時飽和度與亮度都是以百分比的形式進行呈現(xiàn)，飽和度越低，相對應就會給顏色增加白色，使其更灰；亮度越低，就會增加對應的黑色，讓其更深。
由于 HSB 的色彩空間的分類模式非常有利于我們進行顏色的調(diào)整，因此我們在日常調(diào)色時其實會經(jīng)常用到。
比如日常工作當中，假設我們需要設計一組圖標，根據(jù) HSB 顏色的基本原理，我們其實只需要調(diào)整不同的色相，就能夠得到不同的圖標顏色。
但… 顏色上依舊會存在問題。
你會發(fā)現(xiàn)當我們調(diào)整了色相過后，整體的顏色并沒有形成統(tǒng)一。原因在于我們?nèi)搜蹖τ?黃綠色的感知 會和紅色、藍色有所不同，我們通常在看黃綠色時會更為刺眼，因此在設計層面上需要單獨調(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)設計的一致性和靈活性，在功能設計上，需要增加一個根據(jù)屏幕當中的圖標生成與其風格一致的壁紙。
但在之前無論什么樣的色彩空間都不能準確的還原顏色。現(xiàn)在就提供了一個可靠的色彩基礎，能夠讓我們在不同的設備、平臺和應用場景下，都能夠生成具有一致性的色彩方案，同時也能更好地適應各種主題和風格的變化，如亮色模式和暗色模式的切換。
比如，還是以上面這個案例，我們使用 HSB 與 HCT 對顏色進行的色相的調(diào)整，那得到的結(jié)果明顯會發(fā)現(xiàn) HCT 會更加準確。
那 HCT 就真那么完美無瑕？
其實也不然，因為 HCT 色彩空間出現(xiàn)時間較晚，所以在使用上也會有很多問題。
- 設備兼容性差：很多設計軟件目前對 HCT 基礎沒有適配，所以即使使用，很多老舊設備也并不能支持。
- 計算復雜度高：HCT 的色彩空間涉及到更為復雜的計算算法，因此它對于系統(tǒng)的資源要求更高。
- 認知成本較大：對于新的事物，往往在行業(yè)中的普及會相對較慢，因此還需要長時間的普及才行。
三、色彩空間如何應用？
這么深奧的色彩空間，到底要如何使用？
1. 以 HSB 的為主
因為 HSB 是設計師最容易理解的色彩空間，因此我們在調(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)當中，會存在較多顏色搭配的場景。
像是圖表設計、自定義系統(tǒng)主題，原來只能通過系統(tǒng)預設固定顏色的方式進行解決，而現(xiàn)在 Google 也將這套計算公式開源，也就是說程序員可以直接引用 HCT 的色彩空間，將顏色配置的權(quán)限給到用戶，通過顏色的調(diào)整，呈現(xiàn)用戶想要的顏色內(nèi)容。
四、屏幕顯示的色彩空間
對于屏幕顯示的色彩空間而言，有部分內(nèi)容我們也是要重點關(guān)注。比如在 B 端設計當中，色彩還原老是出問題，那我們就可以通過屏幕的色彩空間進行判斷。
1. sRGB 色彩空間
sRGB（standard Red Green Blue）是由惠普公司和微軟公司共同開發(fā)的一種標準色彩空間，目的是提供一種通用的色彩標準，使得在不同的設備（如顯示器、打印機等）之間能夠?qū)崿F(xiàn)相對一致的色彩顯示。
對于 sRGB 來說，它是我們作為設計師最為重要的屏幕顯示色彩空間，因為它通用性強，所以大多數(shù)普通的電腦顯示器、網(wǎng)頁瀏覽器等都默認采用 sRGB 色彩空間，這樣在瀏覽網(wǎng)頁、查看普通的數(shù)碼照片時，可以獲得比較穩(wěn)定的色彩效果。
所以我們在做設計時，通常都會將屏幕與軟件，都調(diào)整的 sRGB 的空間當中，這樣就能夠最大限度保證色彩的一致。
2. Display P3 色彩空間
Display P3 是基于 DCI – P3 色彩空間衍生而來的，主要用于消費級顯示器設備。它在 DCI – P3 的基礎上進行了一些調(diào)整，以適應顯示器的特性。
整體而言 P3 色彩空間顯示出來的顏色會更加 生動、艷麗，但是這會和你的設備密切相關(guān)。目前行業(yè)中只在蘋果設備以及部分高端顯示器才會使用，所以我們在設計時需要考慮自己產(chǎn)品的受眾，這一設備是否普遍使用。
最后，我們總結(jié)一下：
- 色彩空間就是我們使用顏色的一種方式
- 在調(diào)色時，我們會優(yōu)先使用 HSB 的色彩空間
- HCT 是 Google 推出，主要目的是 色彩視覺的統(tǒng)一，在我們生成輔助色的時候有用
- 屏幕當中我們的所有顯示配置盡量調(diào)整為 sRGB，這樣更符合大多數(shù)用戶的顯示情況
本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】，微信公眾號：【CE青年Youthce】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關(guān)的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
