如何正确的从UI图中取色

在移动开发过程中，从UI图上获取颜色是日常开发中常有的事。不过从图片获取颜色也有很多种操作方式，很多人在日常中取到的并不是“正确”的值。

上策：避免从图片中取值

最好的情况就是不需要开发者从设计图上获取颜色。常见的方式有以下三种。

设计图上直接标注：sketch-measure

在设计图上直接标注，这类操作的典型应用是sketch的measure插件。

measure
在sketch中可以为选中元素标注尺寸、margin和其他一些属性。

但是直接标注有几个显而易见的缺陷：

• 标注的元素会影响设计图美观
• 设计师可能需要为所有元素进行标注，工作量不小；如果只标注一些元素，进行开发的时候开发者还是需要自己进行测量
• 设计图更改多次后发给开发，不知道最终是哪个版本

设计图交付为HTML：marketch

优化一步的方案是交付给开发的并不是一张标注好的图片，而是可以点击元素查看属性的网页。这方面的典型是marketch：

measure在后面的版本中也加进了类似的功能，在线演示: http://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挑选颜色，颜色就会出现在右边的面板中：
DraggedImage-9.png
此时选中我们要输出的格式，可以是rgb，可以是css的#，也可以是直接的代码。然后选中你挑的颜色，复制就获得了最终输出的格式。如果你选择了UIColor-Swift,你的剪贴板就会有这样的字符串：UIColor(red:0.00, green:0.58, blue:1.00, alpha:1.0)。方便你直接在Xcode中使用。

专业取色：Sip

另一个广泛使用的专业取色是sip 。不仅支持多种格式的颜色格式。

还提供颜色模板的功能，而且支持存储到云端，甚至支持了touch bar。

---

欢迎关注我的微博：@没故事的卓同学。