图片取色器

在线图片取色器：从任意图片中提取精确颜色

图片取色器是一款完全免费的在线工具，让你无需安装任何专业设计软件，就能从一张图片的任意位置提取出精确的颜色值。它提供五种取色渠道：本地上传、粘贴截图、图片链接、屏幕吸管与色值反查。其中本地上传、粘贴截图、屏幕吸管与色值反查全部在你本机浏览器内完成，图片不会离开你的设备；只有「图片链接」这一渠道会由本站服务器代为下载该图片一次，抓取后直接返回浏览器，不保存图片、不记录链接、也不做二次转发。

无论是设计师要从品牌 Logo 里取标准色，还是开发者想要复刻某个网站界面的配色，又或是普通用户想弄清楚一张照片里"那个好看的蓝色到底是什么颜色"，这款取色器都能在几秒内给出准确的答案。

颜色是怎么被"取"出来的？

一张图片在计算机中本质上是很多个像素点的集合，每个像素拥有一个唯一的颜色值。取色器会在你把图片加载到本地后，读取你鼠标点击位置那个像素的 RGB 数据，再通过数学换算把它转成三种常见的颜色表示方式：HEX（十六进制，常用于网页 CSS 和设计稿）、RGB（红绿蓝三通道数值）和 HSL（色相、饱和度、亮度）。

本地上传、粘贴截图和屏幕吸管这三个渠道的所有计算都在浏览器内存中完成，没有网络请求，所以即使是几十兆的高清图片也能瞬间响应，取色结果也不会因图片上传压缩而失真。屏幕吸管采用「冻结一帧」的快照模式：点击开始后选择屏幕或窗口，工具截取当前画面并立刻结束共享，你再在静止画面上逐点取色。

五种渠道怎么用？

1. 本地上传：把图片拖拽到虚线框内，或点击"选择文件"从电脑中挑选（支持 JPG / PNG / WebP / BMP / GIF，最大 50MB）。
2. 粘贴截图：用系统截图工具截好图（Win: Win+Shift+S，macOS: ⌘+Shift+4），回到本页按 Ctrl/⌘ + V 直接粘贴，无需先保存成文件。
3. 图片链接：粘贴一张图片的 https 直链，点击"加载图片"，由服务器代抓一次后在本机取色。
4. 屏幕吸管：点击"开始屏幕取色"，选择屏幕、窗口或标签页，截取一帧后点击画面取色（需 Chrome / Edge 桌面版）。
5. 色值反查：打开系统取色器选色，或直接输入 #FF6B35、rgb(255,107,53)、hsl(12,100%,61%) 这样的色值，立即换算成三种格式。

图片加载后，把鼠标移到图上会实时预览当前悬停位置的颜色与坐标；移动到目标位置并点击，该像素的颜色就会被锁定。在下方结果区点击 HEX / RGB / HSL 任意一个色值，即可一键复制到剪贴板。切换渠道不会清空已加载的画面，只有点击"选择其他图片"才会重置。

取色时容易踩的坑

① JPEG 压缩带来的色偏。 JPEG 是有损格式，边缘和渐变色带附近往往会有轻微的颜色噪点，取到的色值可能与你的"第一印象"略有偏差。对严格取色，建议优先使用 PNG 或 WebP。
② 别忽略透明度。 如果图片带透明通道（如 PNG 图标），取到的可能是带 alpha 的半透明色，放到纯色背景上会显得不同。遇到半透明像素时，工具会输出 8 位 HEX（如 #FF6B3580）与 rgba()/hsla() 并给出提示；完全透明的像素会明确告诉你而不是显示成黑色。
③ 取色的位置很关键。 同一个色块，取它的"中心纯色区"和取它靠近阴影、高光的边缘，结果可能差好几个色阶。要取标准色，应尽量落在色块均匀的中间区域。

认识 HEX、RGB、HSL 三种色值

HEX 以井号开头（如 #FF6B35），是网页开发最常用的格式，两位一组分别代表红、绿、蓝的浓度。RGB 用三个 0–255 的数字描述颜色（如 rgb(255,107,53)），适合程序化处理。HSL 则更贴近人的直觉——它把颜色拆成"色相（是什么颜色）、饱和度（颜色多鲜艳）、亮度（颜色多亮）"，设计师改配色时通常用 HSL 更容易调节。

拿到这三个值后，你就能直接在 CSS、Sketch、Figma、Photoshop 里使用它们，无需再手动比对。

取色结果该怎么理解和使用？

提取出的色值可以直接用于网页配色、品牌视觉规范、数据可视化配色方案，或作为后续调色和二次创作的起点。如果你还想确认某个前景色在特定背景上是否清晰可读，可以配合本站的「颜色对比度检查器」进一步验证是否符合 WCAG 无障碍标准，让配色既好看又好用。