本系列文章共分為三個篇章：1.《學會色彩管理》2.《了解選色邏輯》3.《我的配色實踐》，筆者將通過三個篇章向大家介紹一些產品配色的基礎知識和方法，希望配色時我們有明確的思路和邏輯，幫助我們輸出更成熟的配色方案。正式聊產品配色之前，筆者深感有必要專門花一章先來說說“色彩管理”。工作中大家時常會發現設計稿與實際開發的界面色彩不一致，設計稿鮮亮動人，實際界面確色彩暗淡，效果差強人意。導致這個問題的原因便是沒有做好色彩管理，要想解決這個問題我們必須先來了解下色彩管理的基礎知識。

另外兩期：

一、色彩空間與色域

色彩空間可以簡單理解為在人眼所能識別的色彩范圍內劃定的某一區域，其目的是為了不同設備和介質可以在統一的色彩區域內顯示顏色。如設計師耳熟能詳的 SRGB，它是惠普和微軟公司為顯示器和打印機顯示統一色彩而劃定的色彩區域，我們也稱之為 SRGB 色彩空間。色域更多是指這一色彩區域的范圍大小，如我們會經常描述某一顯示器色域大小為 90%SRGB 或 100%SRGB，意思就是此顯示器可以顯示 SRGB 色彩空間中 90%或 100%的顏色。不同色彩空間覆蓋的色彩區域也存在著大小差異，如 Adobe SRGB 比 SRGB 覆蓋的區域大 35%左右，更大的色彩區域表示可以顯示更豐富的色彩。

當前常見的色彩空間有 NTSC、SRGB、Adobe RGB、DCI-P3 和 Display P3，之所以會出現不同色彩空間是因為技術發展和行業需求變化的原因，以下會對這些色彩空間進行簡單介紹：

1. NTSC

上世紀 50 年代彩色電視技術在美國趨于成熟，為了制作標準的彩色電視節目，美國電視委員會制定了彩色電視廣播標準（NTSC），其中建立的色彩空間被稱為 NTCS 色彩空間。當前 NTSC 色彩空間已經不再使用，更多出現在描述顯示設備的參數上，例如我們購買顯示器時經常看到色域支持 72%NTSC 這樣的描述。

2. SRGB

SRGB 色彩空間是 1996 年惠普和微軟開發完成的，其目的是為了建立一種用于顯示器、打印機和互聯網的通用色彩空間，也是當前主流使用的色彩空間，如 windows 系統默認使用 SRGB，瀏覽器上我們看到的所有圖片和色彩也都是基于 SRGB 渲染的。

3. Adobe RGB

SRGB 是顯示器、打印機和互聯網的通用色彩空間，但是在彩色印刷行業中，SRGB 覆蓋的色域范圍比較小，部份色彩在顯示設備中不能很好的顯示。所以 1998 年 Adobe 公司建立了 Adobe RGB 色彩空間，旨在使計算機顯示設備囊括更多的顏色滿足印刷行業的需求。

4. DCI-P3 和 Display P3

DCI-P3 是 2005 年美國電影行業推出的一種色彩空間，是數字電影播放設備的色彩標準之一，它的色域面積比 SRGB 大了 25%。2015 年蘋果公司推出了廣色域屏幕的 iMac 產品，使用了全新的色彩空間，并稱之為 Display P3，兩種 P3 色彩空間在色域大小上沒有區別，只是在一些調教參數上存在差異。

二、理解色彩管理的邏輯

通過以上了解，我們可以嘗試回答開篇的問題，為什么會出現實際界面與設計稿色彩不一致的情況？簡單來說就是界面顯示設備與設計稿顯示設備色彩管理不一致導致的。如我們使用蘋果電腦制作設計稿，其默認使用的色彩空間是 Display P3，而實際界面的顯示設備支持的色彩空間是 SRGB，因為 Display P3 的色域范圍遠大于 SRGB，這就導致部分顏色無法在 SRGB 的設備上正常顯示，所以我們看到的界面和設計稿是存在差異的。以上我們可以發現正確的色彩管理不關乎使用哪種色彩空間，而是整個色彩管理鏈路是否統一？上述例子，如果實際顯示設備支持的是 Display P3 色彩空間，那么你將看到和設計稿完全一致的色彩。

要做到整個色彩管理鏈路統一，我們需要清楚了解所有環節，以下將通過圖示進行說明：

1. 輸出屏幕：了解輸出屏幕支持什么樣的色彩空間，如蘋果的顯示屏幕可以覆蓋到 100%Display P3，其他顯示設備在購買時也會有相關參數描述。
2. 系統設置：不同系統默認色彩空間可能不同，如 MacOS 默認 Display P3，Windows 默認 SRGB。系統色彩空間也支持不同配置，例如可以將 MacOS 的色彩空間更改為 SRGB。
3. 制圖軟件：所有制圖軟件均可選擇不同色彩空間進行工作，不同之處在于系統設置針對整個系統，制圖軟件只針對制圖顯示。
4. 終端屏幕：明確終端屏幕支持什么樣的色彩空間，因為最終的設計稿是在終端屏幕上呈現的。

色彩管理鏈路是否統一，即以上環節是否使用了統一的色彩空間？而選擇什么樣的色彩空間需根據終端顯示設備決定。筆者調研了不同顯示設備色彩空間的支持情況，顯示器行業的情況較為復雜，不同廠商不同產品線的支持不盡相同，有 72%NTSC、99%SRGB、90%DCI_P3 等等。安卓陣營情況較好，大部分中高端產品可以支持 100%DCI-P3，部分低端產品支持 72%NTSC 或 100%SRGB。蘋果陣營由于自身產品的優勢，自 2016 年全線產品開始支持 100%Display P3。

面對這復雜的情況，我們應該選取什么色彩空間呢？筆者根據實際顯示場景給到以下建議：

1. 瀏覽器

如果你的設計最終在瀏覽器上顯示（如網頁設計），那么可以選擇 SRGB，上文有提到 SRGB 作為互聯網通用的色彩空間，瀏覽器上的所有色彩都是基于 SRGB 渲染的。

2.Windows

如果你的設計最終在 Windows 上顯示，也可以選擇 SRGB 作為工作色彩空間，因為 Windows 默認的色彩空間是 SRGB。

3.安卓設備

安卓設備的色域支持情況略顯復雜，為了覆蓋到不同設備，建議使用 SRGB 作為工作色彩空間。

4.蘋果設備

蘋果設備均支持 100%Display P3，如果你是在為 IOS 和 MacOS 做設計，那么直接選擇 Display P3 即可。

需要注意的是設計項目經常會覆蓋多端，為了各端顯示統一的色彩，色彩空間的選擇可向下兼容。

三. 如何進行軟件設置

1. Sketch

Sketch 為我們提供了兩種色彩管理方式：

①全局預設：

可在 Sketch 的 Preferences 中找到 Canvas 選項，然后在 Color Profile 中選擇要使用的色彩空間，設置后我們新建的所有文件都將采用新的色彩空間。

②文件設置：

可在 Sketch 的 File 菜單中找到 Document Setting 選項，點擊后在 Color Profile 中選擇要使用的色彩空間，該設置只影響當前文件。

需要注意的是當我們打開 Color Profile 下拉框后，除 SRGB 和 Display P3 選項外，還有一個叫做 Unmanaged 的選項，翻譯過來的意思是無托管，選擇該選項即為使用系統色彩管理方案。如需要將工作色彩空間調整為 SRGB，我們可以直接在 Color Profile 下拉框中選擇 SRGB，也可以選擇 Unmanaged，然后將系統色彩管理方案設置為 SRGB 即可。

2. Figma

Figma 的 Color Profile 提供了 Unmanaged 和 SRGB 兩種選項，即只能使用系統色彩管理方案和 SRGB 色彩空間，且僅支持在客戶端版本中進行選擇。瀏覽器版本不支持色彩管理，默認使用 SRGB 色彩空間，原因上文已提及到瀏覽器上的色彩是基于 SRGB 進行渲染的。

3. Photoshop

當我們在 Photoshop 中新建文件時可看到“高級選項”下的“色彩配置文件”，點擊此處可選擇想要使用的色彩空間。除此之外還可以在“編輯”菜單中的“色彩設置”選項中找到“工作空間”模塊，在“RGB”選項中選擇需要使用的色彩空間，該設置作為一種常用的工作空間存在。完成設置后我們便可以在新建文件時，選擇“工作中的色彩空間”進行使用。

4. After Effects

在 AE 中我們可以在“文件”菜單下找到“項目設置”，點擊后在“顏色”菜單下找到“工作空間”選項，此處可設置想要使用的顏色空間。

最后色彩管理屬于比較復雜的知識模塊，本篇文章介紹的并不全面，只是將和我們工作相關的部份進行了梳理。希望這篇文章可以幫助大家明白色彩管理背后的邏輯，學會正確的色彩管理。