在移動開發(fā)過程中，從UI圖上獲取顏色是日常開發(fā)中常有的事。不過從圖片獲取顏色也有很多種操作方式，很多人在日常中取到的并不是“正確”的值。
上策：避免從圖片中取值
最好的情況就是不需要開發(fā)者從設(shè)計圖上獲取顏色。常見的方式有以下三種。
設(shè)計圖上直接標注：sketch-measure
在設(shè)計圖上直接標注，這類操作的典型應用是sketch的measure插件。
在sketch中可以為選中元素標注尺寸、margin和其他一些屬性。
但是直接標注有幾個顯而易見的缺陷：
- 標注的元素會影響設(shè)計圖美觀
- 設(shè)計師可能需要為所有元素進行標注，工作量不??；如果只標注一些元素，進行開發(fā)的時候開發(fā)者還是需要自己進行測量
- 設(shè)計圖更改多次后發(fā)給開發(fā)，不知道最終是哪個版本
設(shè)計圖交付為HTML：marketch
優(yōu)化一步的方案是交付給開發(fā)的并不是一張標注好的圖片，而是可以點擊元素查看屬性的網(wǎng)頁。這方面的典型是marketch：
measure在后面的版本中也加進了類似的功能，在線演示: http://utom.design/news/ 。
這個方案解決了設(shè)計師需要手動標注元素的工作。導出的網(wǎng)頁部署到內(nèi)網(wǎng)上也可以方便的保證開發(fā)訪問到的是最新的設(shè)計圖。
現(xiàn)成的在線spec標注軟件：zeplin
導出成網(wǎng)頁還需要解決網(wǎng)頁部署的問題，就像github的代碼托管，也有一個類似的spec標注線上托管服務：zeplin。
Zeplin有一個sketch插件，可以直接以artboard為單位同步到zeplin上。zeplin不僅有網(wǎng)頁端，還有本地的客戶端。除了傳統(tǒng)的元素標注外還提供了很多方便的功能，比如可以自動生成切圖，標記每個版本的更新記錄，對設(shè)計圖進行標注說明等。
還可以為多格式文字生成代碼：
不會出錯的取值方案：PS
一個保守的不會取錯值的方案是使用專業(yè)的圖片編輯軟件，打開圖片后使用取色工具進行拾取。
雖然結(jié)果準確，但是過程還是挺痛苦的。首先你需要有這么一個圖片編輯工具，PS價格昂貴包也很大；其次每次找到圖片后都需要操作一番也讓人覺得有些繁瑣。
從屏幕取色
直觀的方式是使用系統(tǒng)的測色計直接從屏幕取色。
從Launchpad進入在“其他”文件夾下：
需要特別強調(diào)的是直接從屏幕取到的顏色和設(shè)計圖的真實顏色可能不一樣。淘寶賣家經(jīng)常在介紹里提到顏色可能受顯示器色差影響也是一樣的道理。從顯卡輸出色彩給顯示器，到顯示器展示的過程中，顯示器也會有自己的調(diào)教。不同的顯示器有著不同的發(fā)光原理，同款顯示器的硬件也會有一定范圍的偏差，出廠需要前都會經(jīng)過教色。
拋開硬件的因素，軟件層面要注意的就是選對模式。
展開“顯示原生值”后會看到一堆選項：
如果是直接從圖片中選擇，一定要選擇圖片對應的色彩配置?，F(xiàn)在主流的還都是sRGB。但是蘋果從iPhone 7開始支持 P3 色域，也有一些先進的設(shè)計師設(shè)計時不再使用sRGB。不同的色彩空間自然導致取到的色值不同。
這里簡單的貼一張圖，P3 的色域比 sRGB 更廣，同樣的RGB值對應的顏色是不同的。更多的這方面知識可以看這篇：漫談顯示器色彩管理。
但是在編輯軟件里就需要選擇“顯示原生值”獲得才是正確的值。
道理也簡單，這個時候顏色的值軟件直接告訴操作系統(tǒng)，操作系統(tǒng)是根據(jù)應用程序里的值渲染的，屏幕的原生值就是對的。導出成圖片后，有對應的編碼格式，則需要選中正確的編碼才能還原。
這里圖中展示的色值是導出的png圖片的值。但是透過截圖還是可以分辨出左右兩張圖片的藍色并不同。（Sketch目前不支持色彩管理，也是一件悲傷的事。）
選擇完顏色的操作
選擇完顏色自然需要使用這個色值。那么如何獲取到顏色值呢？使用快捷鍵cmd+L鎖定挑中的顏色后，選擇“將顏色拷貝為文本”。
這個時候你的剪貼板會是對應的3個RGB值：
0 147 255。但是這種格式的意義不大。因為作為開發(fā)者，無論是在 xib 中還是代碼中使用，這個格式都不能直接使用。如果借助alfred，你可以在輸入顏色值后把格式調(diào)整成
0，147，255后，使用 color 這個 workflow 進行轉(zhuǎn)換。
神器xScope：Loupe
xScope是一個老牌的輔助工具。使用里面的Loupe挑選顏色會使流程更簡單。在界面的右側(cè)可以選擇色彩空間。我們選擇第三個“Gneric RGB- for Xcode”
主界面的左上角可以選擇顏色的顯示格式。
按住shift+cmd+c挑選顏色，顏色就會出現(xiàn)在右邊的面板中：
此時選中我們要輸出的格式，可以是rgb，可以是css的#，也可以是直接的代碼。然后選中你挑的顏色，復制就獲得了最終輸出的格式。如果你選擇了UIColor-Swift,你的剪貼板就會有這樣的字符串：
UIColor(red:0.00, green:0.58, blue:1.00, alpha:1.0)。方便你直接在Xcode中使用。
專業(yè)取色：Sip
另一個廣泛使用的專業(yè)取色是sip 。不僅支持多種格式的顏色格式。
還提供顏色模板的功能，而且支持存儲到云端，甚至支持了touch bar。
歡迎關(guān)注我的微博：@沒故事的卓同學。
