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

一、色彩空間與色域

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

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

1. NTSC

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

2. SRGB

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

3. Adobe RGB

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

4. DCI-P3 和 Display P3

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

二、理解色彩管理的邏輯

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

要做到整個色彩管理鏈路統(tǒng)一，我們需要清楚了解所有環(huán)節(jié)，以下將通過圖示進行說明：

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

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

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

1. 瀏覽器

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

2.Windows

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

3.安卓設(shè)備

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

4.蘋果設(shè)備

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

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

三. 如何進行軟件設(shè)置

1. Sketch

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

①全局預設(shè)：

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

②文件設(shè)置：

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

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

2. Figma

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

3. Photoshop

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

4. After Effects

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

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

作者：穌穌穌穌