如何取出图片中任意颜色的十六进制色值
2026-05-15
一句话答案： 把图片丢进 ToolKoala 的取色器，点你想要的那个像素，复制十六进制（和 RGB）值——全在你的浏览器里，什么都不上传到服务器。这是从截图、照片或设计稿里抓出精确颜色、且不用安装任何东西的最快办法。
怎么取出十六进制色值
- 打开 取色器，把你的图片或截图拖进去（PNG、JPG、WebP 都行）。
- 把光标移到图片上。一个放大镜会显示你即将取样的像素，免得你差一个像素。
- 点准那个像素。工具会直接从内存里的画布读出该像素的 RGB 值。
- 复制十六进制色值（比如
#3B82F6）或 RGB 字符串。想点多少个像素就点多少个。
因为它在本地读取像素数据，所以没有往返服务器、也不用等。用它的时候打开浏览器的开发者工具网络（Network）标签页——你会看到零个上传请求。这正是关键所在。
我实际拿它来干什么
- 匹配品牌色。 客户发来一张扁平 PNG 的 Logo，没有品牌规范。取一下那个蓝，拿到
#1D4ED8，搞定。 - 搭配色板。 从一张你喜欢的照片或截图上取五六个颜色，不用瞎猜就有了一个起始色板。
- 修不匹配。 「这个按钮的色调稍微不对」——把两个都取一下，对比十六进制值，找出那个差一点点的值。
如果你的浏览器够新（Chrome、Edge），还有原生的 EyeDropper API，能取屏幕上任意像素，不只限于上传的图片内。ToolKoala 的取色器改用画布，这样它在各浏览器间表现一致，也能用于你还没在别处打开过的文件。
和其他工具的老实对比
- macOS 数码测色计 —— 免费，macOS 自带。取屏幕上任何东西都很棒，但它默认用一个奇怪的色彩空间，而且复制成十六进制的流程很别扭（你得翻进设置里）。没有 Windows 版。
- Chrome 开发者工具吸管 —— 免费，已经在你浏览器里了。打开 Styles 面板，点一个色块，按吸管。用着不错，但它埋在开发工具里，而且只取已渲染页面的颜色。
- Photoshop（约 $23/月）—— 吸管出色又精确，但为了读一个像素就启动一个月费 $20 多的应用，太过头了。
- 浏览器取色器扩展 —— 方便，但取舍在这儿：一个能在任意页面吸色的扩展，通常会请求权限去读取你访问的每一个页面。对一个取色器来说，这要托付的信任太多了。我宁愿把文件丢进一个什么都不上传的标签页，也不愿给后台扩展全面的读取权限。
常见问题
怎么从截图里取出十六进制色值？ 截好图，丢进像 ToolKoala 这样的浏览器取色器，点你想要的像素。不用上传图片就能立刻拿到十六进制和 RGB。
十六进制和 RGB 有什么区别？
它们描述的是同一种颜色。十六进制（#3B82F6）是一种用于 CSS 和设计工具的紧凑六位写法；RGB（59, 130, 246）把红/绿/蓝通道列成数字。大多数工具，包括这个，两个都给你。
能从一个实时网站而不是文件里取色吗？
能——用 Chrome 开发者工具的吸管，或浏览器原生的 EyeDropper API 做屏上取样。要从你已有的图片文件取样，免上传的取色器更省事。
它精确到具体像素吗？ 是的，只要你取样的是原图。如果图片被压缩过（重度 JPG）或缩放过，你看到的颜色可能已经相对源文件略有偏移——那是文件的问题，不是取色器的问题。
— Milo 🐨