从截图里取一个颜色，过去要打开图片编辑器、打开吸管、再从颜色对话框里读出六个十六进制字符。屏幕取色器把中间这些步骤省掉了：光标移过去，读出数值，粘进样式表。它听起来微不足道，而这正是值得认真对待的原因——你读到的那个数值并不是被设计出来的颜色，而是某一块特定屏幕当前发出的颜色，中间还经过了系统色彩管理、浏览器缩放和截图链路的各种处理。一个好用的取色器会给你数值，也会给你上下文；草率地使用它，则会把错误的数值一路带进线上，直到设计评审时才被发现。本页指向做了很多年这类工具的 Browserling，下面讲的是取色最容易出错的几个地方。
取色器实际量到的是什么
数值来自 canvas，也就是浏览器看到的、按 sRGB 合成的像素值。在你点击之前有三件事可能已经改变了它：显示器的伽马与亮度设置会改变每一个数值，所以并排的两台显示器上，同一个文件看起来并不一样；管理广色域显示器的操作系统可能把 P3 内容映射到 sRGB，于是一个在 P3 里设计的颜色读回来会略偏灰；而一旦浏览器被缩放，光标下的像素就不再是原设计里的那个像素。这些都不是工具的缺陷，而是对屏幕取样这件事本身的性质。如果你需要权威数值，就从设计源头取——Figma 画板、CSS 变量、官方品牌素材，取色器只用来核对交付结果有没有跑偏。
拍下来的颜色不是品牌颜色
从海报、名片或现场产品照片里取色，量到的是灯光而不是油墨。相机的自动白平衡会整体偏移色相，光面会叠加高光反射，手机在压缩色度时对高饱和颜色改动最大。结果就是：这个色值在你屏幕上看着对，印到别处就错了。如果你必须匹配实物，正确的流程是用供应商给出的颜色规格，或用分光光度计实测，把屏幕取样当作仍需打样的起点。网页用途则更简单：直接从原始设计文件取，比任何取色器都更快也更准。
取到的颜色要和对比度一起验
单独一个颜色只算做了一半决定。在把某个文字色或按钮底色定下来之前，先检查它与实际背景的对比度：WCAG 2.1 无障碍指南要求正文文字至少 4.5:1，大号文字和界面边界至少 3:1，这些数字来自亮度计算而不是个人口味。取色器顺手生成的配色是个好起点，但一个在色相上变化丰富的配色，完全可能在可读性上不合格。两个习惯基本能覆盖大多数问题：只检查你真正会用到的那些颜色组合，而不是配色表里的所有组合；再在灰度下或在深色模式下检查一遍，因为只靠颜色传达信息的界面，去掉颜色后就可能垮掉。
常见问题
这个取色器免费吗？
本页链接的工具是免费提供的，本站也一样。有的工具会要求你完成一个小验证或看一段广告再继续，那是它们的收入来源；读取颜色这个基本功能不需要注册账号。
我的浏览器里吸管点不动，是什么原因？
屏幕取色依赖某个并非所有浏览器都提供的接口。Chrome 和 Edge 提供了网页可以调用的吸管界面，Firefox 和 Safari 没有暴露同样的能力，依赖它的网页要么退回手动取样，要么干脆不启动。如果从屏幕取色不是必需，改为载入图片后取色，这条路径在任何现代浏览器里都能用。
取到的 HEX 和设计文件完全一致吗？
只有当设计本身是 sRGB、且显示器经过校准时才会一致。广色域设计、非标准的显示器配置文件以及不同的亮度设置，都会改变取样读到的值。请把取色结果当作一次测量，最终颜色在交付前仍要与原始素材核对。
可以从电脑里的图片取色吗？
把图片载入页面再取样，在任何现代浏览器里都可以，而且这是更可靠的一条路径，因为它不依赖屏幕取色接口。不过从照片里取到的值受限于原图：JPEG 压缩、缩放和光线强弱都会让数值轻微偏移，所以不要把取样值当成规格值。