如何統一顏色從Ai與Ps到Sketch跟Xcode

KW
4 min readDec 10, 2017

--

以前以為在電腦上的話就不用在煩惱那些印刷色差與色偏的問題了,全部都只要看RGB就好(撒花),但事實就不是這麼一回事,前陣子我發現在photoshop與Illustrator中圖片的色彩在Sketch中圖片的色彩不一致,就想說只好來研究一下原因。(順便筆記)

可視色彩範圍與各個色彩空間

每個人應該都看過這張圖,簡單說明就是想像所有顏色分布在一個區域內,每一種色彩空間用在這個區域內的一個三角形表示,每個角代表紅色、綠、藍色等等這些顏色所能顯示的最多顏色數量,所以任何RGB數值在這個三角形區域內都是一個真實存在的點,由於每一種色彩空間在這個色彩區域內都用不同形狀的三角表示,所以在不同的色彩空間,即使是你認為的同一種顏色,顯示效果也可能有差別。

AdobeRGB與sRGB是我們平常生活中比較常接觸到的,在相機的色彩管理中也常常見到,而今天我們最需要知道的是sRGB這個色彩空間。

sRGB色彩空間是惠普與微軟於1996年一起開發的用於顯示器、印表機以及網際網路的一種標準RGB色彩空間。

作為網際網路上推薦使用的色彩空間,在編輯、儲存用於WWW的圖像的時候要sRGB標準,但是由於與其它色彩空間相比它的色域較小,因此用於專業印刷的圖像如印前輸出則可以使用Adobe RGB那樣有較大色域的色彩空間。

Safari瀏覽器使用的是sRGB色彩空間,最新版本的Chrome瀏覽器則使用你顯示器指定的色彩空間,如果你使用一個沒有經過色彩校準的顯示器,同樣的RGB顏色值,在不同的瀏覽器中看起來也可能會完全不一樣。

那回到主題,如何確定在Ai與Ps中看到的顏色會與Sketch一樣?大部分圖片文件內存儲有色彩配置文件文件,而每一個應用也會使用自己獨立的色彩配置文件或者由圖片色彩配置文件來決定。你必須在開啟Adobe AI或PS的時候確定你的色彩設定是sRGB,如下圖。(或是輸出時使用Save for Web丟掉圖片文件的色彩配置內容,讓其體積稍小)

IEC 61966–2–1是官方正式的sRGB規範,它定義了檢視所需環境、編碼以及色度計量的規範

而另一方面在Sketch中,他們認為使用Sketch的大部分用戶是web或者移動端設計師,因此Sketch的色彩管理也會著重對這部分用戶做適配,所以Sketch永遠都是sRGB模式,不管你如何保存,最終圖片在web瀏覽器里的顯示效果都是一致的,這也是為什麼使用Ai或Ps時也要存成sRGB的模式才會與Sketch上的相近。

我自己是認為要保證在Sketch中的色彩最接近硬件終端的顯示效果,還是用Sketch Mirror顯示來幫助確認。

近日Sketch的更新也聲稱了他們除了sRGB以外的色彩空間還提供了P3顯示,讓使用者可以有更多的選擇。(可以將顯示效果提升至超過sRGB標準,特別是綠色和藍色波長部分,為顯示器帶來多25%的色彩)

最後一點要提的就是使用Xcode Interface Builder的時候,也要將色彩模式改為sRGB,這樣顯示在手機上的時候才可以跟設計稿的顏色一樣。(當然若sketch色彩空間為P3的話這裡也可能要跟著變動)

研究完只覺得到底為什麼會有這麼多的色彩空間呢!給我統一啊!

--

--