前端要懂的色域知識

前端也要面對“五彩斑斕的紅”這種世紀(jì)難題了嗎乐严？

rgb(255, 0, 0)真的是紅色嗎

現(xiàn)在有個 CSS 色值：rgb(255, 0, 0)择镇，請問一下各位干旁，在網(wǎng)頁上展示的是什么顏色？

各位可能不用思考就馬上能夠脫口而出：紅色检痰！

But愤惰，各位有沒有想過苇经，這個色值可能不是“紅色”，至少不是你想象中的那種“紅色”宦言？

什么扇单？！前端也要面對“五彩斑斕的紅”這種世紀(jì)難題了嗎奠旺？

色彩空間

人眼能看到的所有顏色是某些特定波長的光蜘澜，這些所有的顏色稱為顏色空間。色彩空間如何描述响疚？使用最廣泛的顏色空間圖是國際照明委員會（CIE）在1931年制定的：

圖1

需要說明的是鄙信，色彩空間其實不是一個類似“馬蹄形的二維圖像”，真實的色彩空間是一個三維空間忿晕，只不過三維空間不利于理解和比較装诡，所以習(xí)慣上用的是其通過一定數(shù)學(xué)轉(zhuǎn)換的二維空間圖。

色域

或者稱之為色彩標(biāo)準(zhǔn)践盼，在近幾十年來有不同的機構(gòu)發(fā)展出了不同色彩標(biāo)準(zhǔn)鸦采。

圖2

每種色彩標(biāo)準(zhǔn)是不同行業(yè)主導(dǎo)的，比如 sRGB咕幻，這是高清電視赖淤、PC、專業(yè)圖像處理的色彩標(biāo)準(zhǔn)谅河，由微軟主導(dǎo)。這個標(biāo)準(zhǔn)也是前端最常接觸的色彩標(biāo)準(zhǔn)，也是計算機世界支持最廣泛的色彩標(biāo)準(zhǔn)之一绷耍。

而 DCI-P3 則是由米高梅吐限、迪士尼、華納等影業(yè)巨頭聯(lián)合推出的數(shù)字電影色彩標(biāo)準(zhǔn)之一褂始。

而 Display-P3（類似 DCI-P3 ）則是蘋果主導(dǎo)的色彩標(biāo)準(zhǔn)诸典，已廣泛用在其軟件產(chǎn)品和硬件產(chǎn)品上。

圖3

從圖3可以看出來崎苗，某個色彩標(biāo)準(zhǔn)是色彩空間的某個子集狐粱。比如 sRGB，仔細(xì)觀察它的色彩范圍形成的三角形（或多邊形）區(qū)域胆数，其綠肌蜻、紅、藍(lán)頂點是其所能呈現(xiàn)最綠必尼、最紅蒋搜、最藍(lán)的顏色。

這個三角形區(qū)域（色彩配置）一般在系統(tǒng)里可以找到判莉，比如 MacOS 下豆挽，在“設(shè)置——顯示器——顏色”里面：

圖4

打開這個色彩描述文件，可以看到里面定義了白色券盅、黑色帮哈，以及紅、綠锰镀、藍(lán)所在的色彩空間的三維坐標(biāo)：

圖5

所以經(jīng)過上面的介紹娘侍，也就能解答文章開頭提出的問題了， 在不同的色彩空間下互站，“最紅”的顏色看上去不全是一樣的 私蕾。

色準(zhǔn)

假如你手頭有兩部電腦，在硬件一樣胡桃、色彩配置一樣的情況下踩叭，紅色 rgb(255, 0, 0) 看上去也會是一樣的嗎？

答案是不可能完全一樣翠胰。

這里牽涉到的一個概念是色準(zhǔn)：色彩顯示準(zhǔn)確度容贝。記作 ΔE，一般來講之景，設(shè)備的 ΔE 越小越好斤富。想知道你的筆記本電腦的屏幕色準(zhǔn)是多少？可以在這里 https://www.no tebookch ec k.net/The-Best-Notebook-Displays-As-Reviewed-By-Notebookcheck.120541.0.html 看看锻狗，Notebookcheck 是一本國際性的硬件評論雜志满力，鏈接里有不少最近筆記本的屏幕色準(zhǔn)測評數(shù)據(jù)（數(shù)據(jù)真實性沒考證焕参，請大家理性對待）∮投睿可以看出其實蘋果系的 MBP 其實在筆記本里屏幕色準(zhǔn)不是最頂尖的叠纷，不過已經(jīng)是不錯的水平。

在手機方面潦嘶，最近的一加8系列的屏幕號稱做到了平均 ΔE 小于1涩嚣，而小米10則號稱 ΔE 小于1.1，這樣的水平已經(jīng)很不錯了掂僵。不過筆者沒有以上者兩款機子航厚，有用過的同學(xué)可以來說說感受。

廣色域

這幾年的蘋果手機锰蓬、部分安卓旗艦幔睬、以及一些顯示器都號稱支持了廣色域，那么廣色域到底是什么呢互妓？

業(yè)界目前沒有對這個概念有定義溪窒。一般來講，支持除了 sRGB 外的色域冯勉，如 Display-P3澈蚌、 Adobe RGB，都可以稱為廣色域灼狰。

這里尤其要說說蘋果全家桶宛瞄，它們都支持了 Display-P3 色彩標(biāo)準(zhǔn)。為什么要把 sRGB 取而代之交胚？因為這個標(biāo)準(zhǔn)比較舊份汗，支持的色彩太少，不夠“好看”蝴簇。Display-P3 的“紅色”杯活、“綠色”會更多。

圖6

Display-P3 使用了 DCI-P3 的色域熬词，標(biāo)準(zhǔn)色溫是 D65（6500K）旁钧，標(biāo)準(zhǔn) Gamma 值被設(shè)定為2.2（DCI-P3 為 2.6）。為了最大程度兼容 sRGB互拾，所以其色溫和 Gamma 值都和 sRGB 一致歪今，并沒有照搬 DCI-P3 標(biāo)準(zhǔn)。所以 DCI-P3 規(guī)定的標(biāo)準(zhǔn)白色會比 Display-P3 更偏黃一些颜矿，且 Display-P3 由于更低 Gamma 值整體畫面風(fēng)格會更亮一些寄猩。

如何知道您的筆記本是否支持 Display-P3 廣色域？可以打開一下網(wǎng)址去看一下效果：

https://webkit.org/blog-files/color-gamut/comparison.html

如果您的手機是 iPhone 7 以后的機型骑疆、MBP田篇、一加手機等替废，可以看到第一張紅色圖片中間有個 webkit 的 logo，否則看到的只是一張純紅色的圖片斯辰。

前端能用上廣色域嗎舶担？

答案是肯定的。不過目前只有 Safari（UIWebView）支持的比較好彬呻。

圖7

CSS寫法：

.rect {

background: rgb(255, 0, 0); /* 此行代碼可兼容不支持color()語法的瀏覽器 */

/* 背景色：紅色 */

background: color(display-p3 1 0 0);

}

</pre>

這個語法屬于 CSS4 的內(nèi)容，而 CSS 不像 ECMAScript 那樣迭代比較快柄瑰，估計要普及需要一定時間闸氮。

這里有一個demo： https://codepen.io/cos2004/pen/Vwewyjw （不支持該語法的瀏覽器頁面會是一片白色）

圖8

方形是 Display-P3 的紅色教沾，中間的 “Tencent” 文字是普通 sRGB 的紅色蒲跨。

而單擊選擇顏色時，以色盤的白線分割授翻，左下部分是 sRGB 顏色或悲。這里也可以看出來 Display-P3 的“紅色”、“綠色”比 sRGB 多不少：

圖9

圖10
也可以用媒體查詢來判斷是否支持廣色域：

@media (color-gamut: p3) {

 /* Do colorful stuff. */

}

當(dāng)然 @supports 特性查詢也是可以的：

 (color: color(display-p3 1 1 1)) {

 /* Do colorful stuff. */

}

在 js 部分堪唐，可以用以下代碼判斷瀏覽器是否支持 Display-P3 色域：


(window.matchMedia("(color-gamut: p3)").matches) {

 // Add your code.

}

Display-P3 顏色和 sRGB 顏色如何互相轉(zhuǎn)換巡语？最直接的方式是在開發(fā)者工具里右鍵顏色即可。

圖11

順便提一下淮菠，MacOS 也自帶了一個轉(zhuǎn)換顏色計算器：ColorSync Utility（色彩同步實用工具）男公。

圖12

web 圖片用上廣色域

在圖片的生產(chǎn)流程里，主要牽涉到以下4個顏色配置：

輸入和生產(chǎn)合陵，Sketch/Photoshop枢赔、相機等
顯示器：即設(shè)計師顯示器
文檔：即圖片本身
輸出（展示端）：如用戶手機、用戶電腦顯示器等

前三步屬于生產(chǎn)端拥知，要說把控踏拜，其實都可以把控好。關(guān)鍵是用戶手機是否支持低剔。除了 iOS 外速梗，目前安卓的色彩管理并不統(tǒng)一，國內(nèi)的安卓廠商只有一加做的不錯户侥。所以想在 web 里使用 Display-P3 的圖片镀琉，要接受大量安卓手機的色彩管理是 sRGB 的事實，呈現(xiàn)的時候會丟失一部分色彩信息蕊唐∥菟ぃ看上去會沒那么鮮艷。

另外替梨，還要注意前端開發(fā)過程中钓试，圖片壓縮工具可能會自動去掉文件的“顏色描述”信息装黑，而且圖片 CDN 一般也會去掉這類元數(shù)據(jù)，然后圖片又會被設(shè)備以 sRGB 去展示……

圖13

未來

人對于色彩的追求肯定是越豐富越好弓熏，目前在 Display-P3恋谭、Adobe RGB 等廣色域的標(biāo)準(zhǔn)加持下，很多終端實現(xiàn)了豐富的色彩輸出挽鞠。

但這些標(biāo)準(zhǔn)是盡頭嗎疚颊？

可能并不是。

比如國際電信聯(lián)盟無線電通信部門在 2012 年制定的 Rec2020(BT2020) 標(biāo)準(zhǔn)信认，其色域范圍可在圖3查看材义。這是一個超高清電視的色彩標(biāo)準(zhǔn)，此標(biāo)準(zhǔn)基本包含了 Display-P3嫁赏、Adobe RGB 等現(xiàn)在常見的色域其掂。

不過一個色彩標(biāo)準(zhǔn)的普及并不是簡單的事，需要內(nèi)容生產(chǎn)端潦蝇、用戶設(shè)備端款熬、軟件服務(wù)端（如 Photoshop / webkit ）等行業(yè)各個鏈路的支持，有機會也有阻力攘乒，考驗著各家廠商的能力贤牛。

總結(jié)

如果設(shè)計師想在 web 嘗試 Display-P3，可在 CSS 漸進式增強使用持灰，要注意補全 fallback 顏色
web 圖片可用 Display-P3盔夜，注意圖片“顏色描述”元數(shù)據(jù)不要被干掉
電影院放映的電影色彩更像蘋果設(shè)備的色彩

最后送大家一波福利

歷經(jīng)兩個月發(fā)展，本人終于回歸前端崗位堤魁！裸辭的艱辛已然消逝
在這里特地講我自己這兩個月整理的相關(guān)面試題分享給大家喂链，免費獲取哦~

內(nèi)容：

基礎(chǔ)題（293題）
進階題（30題）
高級題（91題）
計算機基礎(chǔ)題（14題）
高頻考點（37題）
綜合問題（125題）
大廠面試真題（阿里、網(wǎng)易等）
個人面試經(jīng)驗思維導(dǎo)圖

獲取方式：

一妥泉、搜索QQ群椭微，前端學(xué)習(xí)交流群：954854084

二、點擊加入盲链，與前端大牛一起進步蝇率！

三、QQ掃描下方二維碼刽沾！