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