吸管工具是图像编辑中使用频率最高的功能之一。点击一个像素，获取它的颜色。简单、快速、不可或缺。但如果你没有打开 Photoshop 或 Figma 呢？如果你只是想从截图或下载的图片中取个颜色，不想启动完整的设计软件呢？
在线吸管工具正好解决了这个问题。直接在浏览器中使用——不用安装软件，不用装扩展，不用注册账号。本文介绍吸管工具是什么，在线工具与浏览器扩展的对比，以及如何在 CSS 和设计工作流中使用它。
什么是吸管工具？
吸管工具（也叫取色器或颜色采样器）用于读取图片中某个像素的精确颜色。点击某个位置后，工具会返回 HEX、RGB 或 HSL 等格式的色值。
吸管工具从 Photoshop 早期开始就是图形设计软件的标配功能。如今几乎每个设计工具都内置了它——Figma、Sketch、GIMP、Canva 等等。但这些工具都需要你先打开软件并把图片加载进去。
浏览器扩展 vs 在线工具
不用设计软件也能获得吸管功能，主要有两种方式：
浏览器扩展
Chrome 和 Firefox 的扩展程序（如 Eye Dropper、ColorZilla）会在浏览器工具栏添加一个吸管图标。点击图标，在任意网页元素上悬停并点击即可取色。
优点：
- 可以对实时网页取色，不仅限于图片
- 常驻工具栏，随时可用
- 能从 CSS 渲染的元素中取色
缺点：
- 需要安装扩展并授予浏览器权限
- 只能对浏览器中可见的网页内容取色
- 无法对上传的图片文件取色（除非图片已经在网页上显示）
- 扩展更新可能导致功能异常或引发隐私问题
在线图片取色器
像 BestPNG 取色器这样的工具，允许你上传任意图片并点击任意位置获取色值。
优点：
- 无需安装或授权
- 支持任何图片文件（PNG、JPG、WEBP、截图）
- 同时显示 HEX、RGB 和 HSL
- 在任何有浏览器的设备上都能使用
缺点：
- 需要上传图片（无法对实时网页取色）
- 需要打开浏览器标签页
什么时候用哪种？
| 场景 | 最佳工具 |
|---|---|
| 从在线网页取色 | 浏览器扩展 |
| 从图片文件提取颜色 | 在线取色器 |
| 在手机或平板上操作 | 在线取色器 |
| 不想安装扩展 | 在线取色器 |
| 快速获取网页 CSS 颜色 | 浏览器扩展 |
对于大多数基于图片的取色需求，在线工具更简单也更灵活。
使用 BestPNG 在线吸管工具
BestPNG 取色器是一个免费的在线吸管工具，支持所有浏览器。
使用方法：
- 打开 bestpng.com/tools/color-picker
- 上传图片（拖放或点击浏览）
- 将光标移到图片上，颜色预览实时更新
- 点击锁定某个颜色
- 复制 HEX、RGB 或 HSL 色值
整个过程在浏览器本地完成。图片不会上传到任何服务器，即使是机密设计文件也完全没有隐私顾虑。
开发者常见用法
从设计稿中匹配颜色
设计师发来一张 PNG 设计稿，你需要按钮、背景和文字的精确颜色写进 CSS。与其发消息问设计师然后等回复：
- 将设计稿上传到取色器
- 点击按钮 → 复制十六进制值 → 粘贴到 CSS
- 点击背景 → 复制 → 粘贴
- 30 秒搞定
从截图中提取颜色
看到一个配色很好的网站，但无法直接查看 CSS（可能是视频中的、PDF 里的，或者是竞品截图）。截个图，上传，直接取色。
从品牌规范中提取 CSS 变量
当品牌规范是 PDF 或图片格式（而不是 Figma 文件）时，用取色器提取所有品牌色，设置为 CSS 自定义属性：
:root {
--brand-primary: #2A7FBA;
--brand-secondary: #E8553D;
--brand-neutral: #F5F5F5;
}
检查对比度
提取前景色和背景色后，使用对比度检查工具验证是否符合 WCAG 无障碍标准。这对确保文字可读性至关重要。
精准在线取色的技巧
避免在边缘处取色
两种颜色之间的边缘通常有抗锯齿像素——过渡像素会混合相邻的两种颜色。在颜色区域的中心点击，而不是在边界处。
注意图片压缩的影响
JPG 压缩会引入微妙的色偏。如果你在匹配品牌色，尽量使用 PNG 源文件。PNG 采用无损压缩，能保留精确的色值。
使用校色过的显示器
显示器的色彩配置会影响颜色的呈现。你屏幕上看起来完美的颜色，在其他设备上可能有所不同。专业色彩工作建议使用校色显示器或在多台设备上交叉验证。
从高分辨率源文件取色
低分辨率图片像素少，压缩伪影多，颜色准确度也更低。尽量使用最高分辨率的源文件进行取色。
Chrome 内置吸管（CSS 颜色输入）
较新版本的 Chrome（95 及以上）在 DevTools 的颜色输入框中内置了吸管功能。点击 CSS 面板中的颜色色块时，会出现一个吸管图标，可以从屏幕上的任意位置取色。
这个功能很实用但有局限——只能在 DevTools 内使用，且需要打开检查器。如果要从独立的图片文件中取色，BestPNG 取色器更直接。
常见问题
在线吸管工具可以在手机上使用吗？
可以。BestPNG 取色器在移动浏览器上正常运行。从相册上传图片，点击想要取色的区域，色值立即显示。
可以从同一张图片中提取多个颜色吗？
可以。使用 BestPNG 取色器时，可以在同一张上传的图片上反复点击不同区域，无需重新上传。每次点击都会更新显示的色值。
在线取色器和 Photoshop 的精度一样吗？
在像素级别的颜色读取上精度完全一样。两者读取的都是你点击的像素的精确 RGB 值。差异在于周边功能——Photoshop 提供区域平均采样、采样范围控制和色彩管理配置。对于简单的"这个像素是什么颜色"的需求，结果完全一致。
怎样从视频中提取颜色？
先截取视频画面的截图，然后将截图上传到取色器。大多数系统都支持快捷键截图（Mac 用 Cmd+Shift+4，Windows 用 Win+Shift+S）。
总结
从图片中取色不需要 Photoshop，也不需要浏览器扩展。BestPNG 在线取色器提供免费、即时的吸管工具，适用于任何设备、任何图片，输出 HEX、RGB 和 HSL 色值，直接用于 CSS 或设计工具。
上传图片，点击像素，复制颜色。就这么简单。