图片取色器

什么是图片取色器？

图片取色器是一种读取图片中某个像素精确颜色，并以 HEX 代码、RGB 三元组或两者形式报告的工具。设计师、开发者和艺术家用它从照片、截图、设计稿或任何位图中捕捉颜色，以便在代码、设计软件或品牌规范中复用相同的色调。与其在拾色器对话框中凭肉眼猜测，不如直接点击你想要的像素，得到一个精确且可复现的数值。

在底层，浏览器将图片解码到画布上，getImageData API 会返回光标下精确像素的红、绿、蓝和 alpha 值。这些数字随后被格式化为 CSS rgb() 字符串，并转换为 #RRGGBB 的 HEX 代码。由于读取发生在你浏览器中的画布上，任何像素数据都不会离开你的设备——整个过程完全本地且私密。

本工具能做什么？

图片取色器在浏览器中加载任意 PNG、JPG、WebP、GIF、BMP 或 HEIC 文件，将其绘制到画布上，并允许你点击任意位置采样单个像素。每次点击它会报告：

• HEX 代码。6 位 #RRGGBB 表示，可直接粘贴到 HTML、CSS 或设计工具中。
• RGB 三元组。CSS 的 rgb(r, g, b) 形式，每个通道取值 0 到 255。
• 像素位置。采样像素的 x、y 坐标，便于追溯颜色来源。
• 实时预览。大色块显示当前选中颜色，点击前悬停指示器会跟随光标。
• 历史记录。下方列出最近 10 个采样颜色，每个可点击重新选中，并各有复制按钮。

本工具没有下载按钮——它用于采样而非导出。输出就是你复制到剪贴板的 HEX 或 RGB 字符串，可粘贴到 CSS、设计文件、品牌手册或缺陷报告中。

何时使用图片取色器

当你需要从现有图片中匹配或复制颜色、而不是凭空创造时，取色就派上用场了。常见场景包括：

• 品牌一致性。从 Logo、页头或营销图片中提取精确的品牌色，让新设计与之一致。
• 设计交付。从设计稿截图中读取颜色，翻译成开发者的 CSS 变量。
• 照片修图。采样肤色、天空色或阴影色，在画笔或调整图层中复用。
• 无障碍审计。从截图中读取前景和背景色，计算对比度。
• 复刻 UI。通过采样截图，匹配现有网站的按钮或链接色。
• 艺术与手工。从参考照片中取色，用于调颜料、选毛线或挑布料。

由于取色器读取的是真实像素值，它比从屏幕上的小色块凭眼猜测更可靠——尤其在高 DPI 显示器上，一个视觉点可能覆盖多个像素。

如何从图片中取色

使用本工具只需几秒，全程在浏览器中完成。请按以下四步操作：

1. 上传图片。点击上方上传区域或拖入 PNG、JPG、WebP、GIF、BMP、HEIC 文件。
2. 悬停预览。在渲染后的图片上移动光标——小指示器会跟随指针，让你在确认前精确瞄准。
3. 点击采样。点击你想要的像素。HEX 代码、RGB 三元组和像素位置会出现在结果面板中，颜色也会加入历史记录。
4. 复制数值。点击"复制 HEX"或"复制 RGB"将数值放入剪贴板，再粘贴到 CSS、设计文件或笔记中。

所有步骤都通过 Canvas API 在浏览器本地运行。图片绝不会被上传到服务器，因此采样完全私密，适合处理机密或个人照片。

HEX、RGB 与 HSL 的区别

颜色可以用多种格式书写，每种各有优势。HEX（如 #0EA5E9）紧凑，是 HTML、CSS 和大多数设计工具的默认格式——# 后每两个字符以十六进制字节编码一个通道。RGB（如 rgb(14, 165, 233)）使用 0 到 255 的十进制数字，便于口述或计算，因此在编程和调试中常见。HSL（如 hsl(199, 89%, 48%)）描述色相、饱和度和亮度，当你想调整色调或通过旋转色相构建调色板时往往更受青睐。

本取色器报告 HEX 和 RGB，因为它们是最通用的可粘贴格式。如果你需要 HSL，一次快速转换——或使用我们的颜色工具——即可将 HEX 或 RGB 转为 HSL。重要的是三者描述的是同一种屏幕颜色，因此复制哪种格式取决于你打算粘贴到哪里。