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

一、色彩空間與色域

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

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

1. NTSC

上世紀(jì) 50 年代彩色電視技術(shù)在美國(guó)趨于成熟，為了制作標(biāo)準(zhǔn)的彩色電視節(jié)目，美國(guó)電視委員會(huì)制定了彩色電視廣播標(biāo)準(zhǔn)（NTSC），其中建立的色彩空間被稱為 NTCS 色彩空間。當(dāng)前 NTSC 色彩空間已經(jīng)不再使用，更多出現(xiàn)在描述顯示設(shè)備的參數(shù)上，例如我們購(gòu)買顯示器時(shí)經(jīng)?？吹缴蛑С?72%NTSC 這樣的描述。

2. SRGB

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

3. Adobe RGB

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

4. DCI-P3 和 Display P3

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

二、理解色彩管理的邏輯

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

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

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

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

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

1. 瀏覽器

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

2.Windows

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

3.安卓設(shè)備

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

4.蘋果設(shè)備

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

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

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

1. Sketch

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

①全局預(yù)設(shè)：

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

②文件設(shè)置：

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

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

2. Figma

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

3. Photoshop

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

4. After Effects

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

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

作者：穌穌穌穌