跳到正文
SPCXTools

图片取色器

点击图片任意位置,获取精准的 HEX、RGB 和 HSL 颜色代码 —— 以及图片的主色调调色板。

本地运行——文件不会离开你的设备

正在加载工具…

如何使用图片取色器

  1. 1选择一张图片,将其拖放到页面上,或使用 Ctrl+V(Mac 上为 ⌘+V)粘贴屏幕截图。
  2. 2在图片上移动鼠标指针。放大镜会显示光标所在位置的精准像素。
  3. 3点击取色。右侧会显示该颜色的 HEX、RGB 和 HSL 代码 —— 点击 复制 即可使用。
  4. 4使用 主要颜色 调色板获取图片的主色调,通过 已取颜色 找回之前的取色记录。

从任意图片中精准取色

在照片、网页截图、Logo 或设计稿中看到了喜欢的颜色,想要获取它的颜色代码?这款在线图片取色器就像一个适用于所有图片的吸管工具:只需打开图片,点击任意像素,即可获取 HEX、RGB 和 HSL 颜色代码,方便直接粘贴到 CSS、Figma、Photoshop、Canva 或 PowerPoint 中。放大镜功能会逐像素显示光标下方的区域,帮你精准定位;同时还会自动生成该图片的主色调调色板。

功能特点

  • 吸管工具支持浏览器能打开的任意图片格式 —— JPG、PNG、WebP、GIF、SVG、AVIF 和 HEIC。
  • 放大镜可逐像素放大光标所在的区域。
  • HEX、RGB 和 HSL 颜色代码,提供一键复制按钮。
  • 主色调调色板,自动从整张图片中提取。
  • 取色历史最多保留 16 种颜色,方便你对比和回溯。
  • 粘贴截图,支持直接从剪贴板读取图片。
  • 保护隐私:图片仅在本地处理,绝不会离开你的设备。

我应该使用哪种颜色格式?

格式 示例 适用场景
HEX #1E90FF CSS、HTML、Figma、Canva 及大多数设计工具
RGB rgb(30, 144, 255) CSS、Photoshop、Office 办公软件、编程开发
HSL hsl(210, 100%, 56%) CSS(适合需要调整亮度或饱和度时使用)

如果需要将提取的颜色转换为 CMYK 或 HSV 等其他格式,或者测试其与黑白文字的对比度,请使用颜色转换器。

使用场景

匹配品牌色:从公司 Logo 或网页截图中提取精准的蓝色,保持演示文稿风格一致。

创建配色方案:以照片的主色调为基础,为网站、海报或幻灯片主题进行配色。

网页开发:当设计稿是图片而非源文件时,直接从中提取颜色。

数字艺术与手工艺:获取参考照片中的颜色代码,用于绘画软件、刺绣或编织图解。

获取精准结果

请尽量选择尺寸最大、压缩率最低的图片版本:PNG 截图能保持颜色完全准确,而 JPG 照片在边缘处可能会有轻微的色彩偏移。使用放大镜放大图片,并避开抗锯齿边缘(此处的像素会混合两种颜色)。如果你只需要大图的一部分,可以先裁剪图片,以便更方便地操作。

常见问题

如何获取图片中颜色的 HEX 代码?
在本工具中打开图片,然后点击您想要提取颜色的位置。HEX 代码(例如
可以从截图中提取颜色吗?
可以。像往常一样截图,然后在本页面按 Ctrl+V(Mac 上按 ⌘+V)直接粘贴即可——无需先保存为文件。
图片的主色调是如何计算出来的?
本工具会对图片的缩小版进行采样,将相似的颜色分组并列出最常见的颜色。它会跳过几乎相同的颜色,从而让色板呈现出层次分明的色调。
为什么提取的颜色与原图设计有轻微色差?
保存为 JPG 格式的图片经过了压缩,这会导致颜色发生轻微偏移(尤其是边缘处)。截图也会受到显示器色彩配置文件的影响。如需获取准确的品牌标准色,请从 PNG 图片中提取,或查看原始设计文件。
我的图片会被上传吗?
不会。图片完全在您的浏览器本地打开并读取,不会有任何数据发送到服务器。因此,您可以放心处理私密截图和未公开的设计图。
可以在手机上使用吗?
可以。轻触图片即可提取颜色。当您触摸图片时,放大镜会跟随您的手指移动。