靜電說：之前有用戶提過類似的問題，他發(fā)現(xiàn)在photoshop中圖片的色彩和sketch中圖片的色彩不一致。下面看看靜電翻譯的一篇 bohemiancoding團(tuán)隊(duì)發(fā)表的博文，詳細(xì)闡述了這種現(xiàn)象產(chǎn)生的原因和解決辦法。不要排斥這篇深度技術(shù)文章， 我們需要知道原理，才能工作的更好?？偨Y(jié)下這篇文章的要點(diǎn)：
1. 大部分圖片文件內(nèi)存儲有色彩配置文件文件
2. 每一個(gè)應(yīng)用會使用自己獨(dú)立的色彩配置文件或者由圖片色彩配置文件來決定。
3. “Save for Web”功能會丟掉圖片文件的色彩配置內(nèi)容，讓其體積稍小。
4. 如果一張圖片沒有色彩配置文件，那么這張圖片的顯示效果將由顯示這張圖的應(yīng)用程序優(yōu)先決定。
5. Sketch使用sRGB色彩配置
6. 另外，我們Photoshop等應(yīng)用則可以在新建圖片文件的時(shí)候選擇不同的色彩配置文件。
7.每種色彩空間顯示的顏色數(shù)目會有差異，因此導(dǎo)致圖片顏色不一致。
以上是phptoshop新建文件時(shí)出現(xiàn)的色彩配置文件選項(xiàng)
以下文章由靜電譯自bohemiancoding團(tuán)隊(duì)博客，原文出處：https://blog.sketchapp.com/post/133932511180/colors-in-sketch 轉(zhuǎn)載請注明譯者和出處。
我們注意到最近用戶一直對Sketch中的色彩管理模式非常的疑惑，所以今天我們想為大家講解一下Sketch是如何處理這些問題，另外原因是什么。在討論Sketch的色彩模式之前，我們有必要來了解下一般的色彩管理模式。
傳統(tǒng)的色彩管理模式
顏色一般會在顯示屏幕上表現(xiàn)為RGB色（紅，綠和藍(lán)）或者是LSB/L（色相，飽和度和亮度），但是這只是個(gè)開始。為了繪制一種真實(shí)的色彩，你需要了解這些元素屬于哪種色彩空間。
這里有一種方法可能會幫助你形象化的了解這個(gè)問題。我們想象所有顏色分布在一個(gè)區(qū)域內(nèi)，每一種色彩空間用在這個(gè)區(qū)域內(nèi)的一個(gè)三角形表示，每個(gè)角代表紅色，綠 色或者藍(lán)色等等這些顏色所能顯示的最多顏色數(shù)量。所以任何RGB數(shù)值在這個(gè)三角形區(qū)域內(nèi)都是一個(gè)真實(shí)存在的點(diǎn)。我們可以從以下方面做進(jìn)一步的了解：
-
在一個(gè)色彩空間里存在的顏色并不是你能想象到或者看到的所有顏色；在這個(gè)三角形之外的顏色是這個(gè)顯示設(shè)備所無法顯示出來的，即便是你的顯示器在制造特性上標(biāo)明它能顯示更多的顏色。（譯者注：顯示的顏色數(shù)除了跟自己的顯示器有關(guān)，還跟這個(gè)軟件所使用的色彩空間有關(guān)系。）
-
由于每一種色彩空間在這個(gè)色彩區(qū)域內(nèi)都用不同形狀的三角表示，所以在不同的色彩空間，即使是你認(rèn)為的同一種顏色，顯示效果也可能有差別。
假如你把一種顏色從一種色彩空間轉(zhuǎn)成另一個(gè)色彩空間，實(shí)際上，這個(gè)色彩空間會盡可能的適配你要的顏色，讓他們盡可能的在同一個(gè)位置（譯者注：由于色彩空間的 改變，其實(shí)轉(zhuǎn)化后的顏色并不能完全一致）。也就是說這個(gè)RGB的數(shù)值會根據(jù)這個(gè)色彩空間的定義而做出改變。如果你原先所使用的這個(gè)顏色剛好位于這個(gè)色彩空 間的邊緣位置，改變后的色彩空間會讓你的顏色呈現(xiàn)更真實(shí)或者失真（譯者注：取決于這個(gè)色彩空間所能顯示的顏色數(shù)）。簡而言之：轉(zhuǎn)變色彩空間是比較危險(xiǎn)的行 為，因?yàn)槟闼吹降念伾赡軙l(fā)生變化。
在做數(shù)字設(shè)計(jì)而非印刷（平面）設(shè)計(jì)時(shí)，大部分設(shè)計(jì)師需要關(guān)注的是RGB顏色而非色彩空間。當(dāng)你在 HTML代碼中設(shè)置顏色的時(shí)候，你只能用到RGB色。也就是說，用戶所使用的瀏覽器將接管色彩空間的管理。Safari瀏覽器遵循W3C的標(biāo)準(zhǔn)，使用 sRGB色彩空間。最新版本的Chrome瀏覽器則使用你顯示器指定的色彩空間，如果你使用一個(gè)沒有經(jīng)過色彩校準(zhǔn)的顯示器，同樣的RGB顏色值，在不同的 瀏覽器中看起來可能會完全不一樣。
當(dāng)你把一張圖片保存到電腦硬盤中，這張圖片文件中其實(shí)是包含色彩空間信息的。為了讓RGB顏色看起來一 致，這張圖片中會通常會包含色彩空間的信息以便表達(dá)這個(gè)RGB數(shù)值所表達(dá)的顏色。為了讓這張圖片的體積更小一些，很多網(wǎng)絡(luò)上的圖片會將此信息移除（這也就 是Save For Web這個(gè)功能所做的事情），這時(shí)瀏覽器會將所有的圖片的色彩空間默認(rèn)為是sRGB，即便你之前在電腦上保存的這張圖片使用了完全不一樣的色彩空間。舉個(gè) 例子，Mac電腦上的圖片預(yù)覽應(yīng)用會完全遵循這張圖片所預(yù)置的色彩空間來顯示圖片色彩。所以，現(xiàn)在問題來了，同一張圖片在電腦中預(yù)覽，和在不同的瀏覽器比 如Safari，chrome中，顏色看起來會有差別，這也難怪大家會產(chǎn)生困惑。
Sketch中的顏色管理
我們選擇不在Sketch中使用復(fù)雜的色彩管理支持，因?yàn)檫@會讓很多用戶感到困擾。于此相反，我們認(rèn)為使用Sketch的大部分用戶是web或者移動(dòng)端設(shè)計(jì) 師，因此Sketch的色彩管理也會著重對這部分用戶做適配。畢竟，Web瀏覽器強(qiáng)制使用sRGB色彩空間，iOS系統(tǒng)上則完全沒有色彩空間的概念。
所以Sketch做了什么呢？當(dāng)你在Sketch中選區(qū)一種顏色，我們只存儲RGB的數(shù)值。而在顯示器上進(jìn)行查看的時(shí)候，使用你自己的顯示器所應(yīng)用的色彩空 間。用這種方式，我們可以保證如果你在屏幕的其它部分取了一種顏色，Sketch中顯示的顏色和顯示器上顯示的顏色會盡可能的保持一致。
當(dāng)我們導(dǎo)出一張圖片，這張圖片將會使用sRGB色彩空間，同樣，這個(gè)色彩空間配置信息會被存儲到這張圖片的metadate中，除非在導(dǎo)出這張圖片的時(shí)候， 你勾選了“Save for Web”選項(xiàng)（此時(shí)這張圖沒有色彩空間信息）。無論你使用哪種方式導(dǎo)出圖片，在Safari等瀏覽器中，這張圖都將使用sRGB色彩空間。在使用電腦的 Preview軟件打開這張圖片的時(shí)候，它會自動(dòng)識別這張圖片的sRGB信息，并把它的顏色渲染為和在safari中一樣（譯者注：也就是說如果你選了 “Save for web”，那么顏色就不保證在preivew里是sRGB了）。我們相信通過這種方式，可以讓顏色的顯示盡可能的保持一致。
不過，還是有個(gè)缺點(diǎn)。當(dāng)你打開剛剛你導(dǎo)出的這張圖片，并在preview中顯示，然后把preview窗口和Sketch窗口并排顯示在同一個(gè)屏幕里。這時(shí) 你會發(fā)現(xiàn)，這兩者的顏色并不那么一致。請記住，原因是Sketch在自己的工作區(qū)內(nèi)繪制圖片的時(shí)候，使用的是顯示器所設(shè)置的顏色配置文件。但是當(dāng) preview來繪制圖像時(shí)，則直接把他當(dāng)作sRGB色彩模式來繪制，不論你的屏幕色彩模式如何設(shè)置，Preview都使用sRGB模式為第一選擇。
另外，Preview和Safari中的色彩也可能不一致，因?yàn)樗麄兤渲械囊粋€(gè)會完全忽略掉屏幕的配置文件。請一定要注意，你的網(wǎng)站也可能會被另一個(gè)安卓設(shè) 備所查看，這個(gè)安卓設(shè)備可能完全沒有使用sRGB色彩空間?；蛘?，在一臺年代比較久遠(yuǎn)的iPHone設(shè)備中，它也可能會使用完全不同的色彩配置文件。（譯 者注：配置文件導(dǎo)致圖片在不同設(shè)備上顏色顯示的差異）
結(jié)論就是，去糾結(jié)不同數(shù)字設(shè)備上顯示的圖形顏色的細(xì)微差異是沒有太大意義的。但是，Sketch盡可能的讓這種差異不明顯。如果你在sketch和在Css中使用同一個(gè)RGB顏色值，顏色會是非常統(tǒng)一的（前提是你的瀏覽器遵循W3C的標(biāo)準(zhǔn)來渲染圖形）。
Sketch 讓你在保存時(shí)永遠(yuǎn)都是sRGB模式，或者你可以選擇去掉色彩模式配置文件，讓保存的文件小那么一點(diǎn)點(diǎn)。但是，不管你如何保存，最終圖片在web瀏覽器里的 顯示效果都是一致的。作為一個(gè)web或者移動(dòng)端設(shè)計(jì)師，這應(yīng)該是你期望的顯示效果，這也是Sketch工作的原理。
只需要注意一點(diǎn)，使用屏幕取色器從不同的窗口中取的顏色并不能保持一致的RGB顏色值（譯者注：因?yàn)椴煌膽?yīng)用可能使用不同的色彩空間）。
