上周给一个品牌做 VI 延伸，客户发来一张 PDF 截图，里面 logo 的蓝色在显示器上看是 #1A73E8，我用取色器点上去却显示 #1B74E9。差了一个数值，但用在名片上就是“不对”。后来发现是截图压缩导致的色差，不是工具的问题。这个瞬间让我意识到：取色器本身没错，但上传图片的源文件质量、显示器的色彩配置、以及取色点的像素精度，才是决定结果是否可信的关键。
上传图片后取色不准，问题出在哪一步？
最快拿到准确色值的路径，不是打开工具就点，而是先确认图片的“底子”。取色器的工作原理是读取鼠标点击位置像素的 RGB 值，如果图片本身被压缩过、或者截图时色彩空间被转换，那取出来的数值天然就偏了。
我的真实最短链路是：
- 把图片拖进取色器页面，先不管颜色，看图片预览是否清晰——如果边缘有锯齿或色块边界模糊，说明图片已经被压缩过，这时候取色结果不可信。
- 如果图片清晰，用取色器的放大镜功能（鼠标移到图片上会自动放大局部）确认取色点是否落在纯色区域，而不是渐变或抗锯齿边缘。
- 取完一个颜色后，立即点击历史色列表里的色块，看它在预览区显示的视觉效果是否与源图一致——如果明显偏亮或偏暗，说明显示器色彩配置有问题，需要校准。
这一步省掉了来回截图、反复对比的时间，以前取一个品牌色要反复确认三次，现在一次到位。
三个真实场景分别怎么用？
场景一：从 UI 设计稿里提取规范色
输入：一张 Sketch 导出的完整界面截图，包含按钮、背景、文字。
操作：在取色器上传后，先取按钮主色（#007AFF），然后取背景浅灰色（#F2F2F7）。注意：文字颜色不要直接取黑色字，因为设计稿里的文字通常是 #1C1C1E 或 #3A3A3C，取色器能准确识别。
产出：得到主色、辅助色、文字色共 6 个色值，直接复制进设计规范文档。
场景二：从摄影作品中提取氛围色
输入：一张日落照片，想提取天空的渐变主色。
操作：上传后，在天空区域点三个不同位置——最亮处、中间色、最暗处。取色器历史色会按顺序记录，然后手动调整亮度和饱和度，就能得到一套近似渐变色的色板。
产出：三组 RGB 值，用于海报背景的线性渐变。
场景三：从印刷物料扫描件中还原品牌色
输入：一张纸质名片扫描件，颜色偏黄（纸张底色影响）。
操作：先取纸张底色（比如 #F5F0E8），然后取 logo 红色（显示为 #C0392B）。注意：因为纸张底色偏暖，实际 logo 色应该比取出来的更冷一些。这时候需要手动在取色器输出框里微调 RGB 中的 G 值，增加 5-10 个单位来抵消纸色。
产出：修正后的品牌红，接近原始设计值。
什么时候别用它？
取色器不是万能的。以下三种情况，我建议你直接放弃它：
- 当你需要从双面印刷品扫描件里取色时。因为扫描仪会同时读取纸张背面的透印，取出来的颜色混合了背面的油墨，误差可能达到 15-20 个 RGB 单位。这时候应该用分光光度计。
- 当你需要从渐变色图片里取“中间值”时。取色器只能取单点像素，无法计算渐变的平均色或主色。如果你需要渐变的“视觉重心色”，应该用 Photoshop 的“模糊平均”滤镜处理后，再导入取色器。
- 当你显示器未校色且图片来自网络时。浏览器会做颜色管理，但如果你用普通显示器（sRGB 覆盖率低于 95%），取出来的色值在别人设备上看会偏。这时候取色器给出的数值是准确的，但显示效果不可信。
诚实说，取色器在色值精度上能做到 ±1 个 RGB 单位，只要图片源文件是原始导出而非压缩后的 JPEG。如果你遇到明显偏差，先检查图片本身，而不是怪工具。
搭配哪些工具更顺手？
我通常把取色器和 JSON 格式化工具 放在同一个浏览器标签组里。为什么？因为从取色器拿到色值后，我需要把它们组织成 JSON 格式的配色方案文档，方便前端工程师直接粘贴使用。取色器没有导出功能，但复制色值后用 JSON 格式化工具整理成对象，效率很高。
另一个常用组合是取色器加在线色盲模拟器。取完色后，把色值贴进模拟器里看对比度是否达标——这是很多设计师容易忽略的一步，但取色器本身不提供这个功能，需要外部工具补充。
取色器的历史色列表只保留最近 10 个颜色，如果你在做一个 12 色配色方案，建议每取 5 个就复制到本地文档里，避免被覆盖。这个小限制不是 bug，是设计取舍——轻量工具不承诺无限记录，但足够应付单次项目。