图片取色器，免费

像素取色器与调色板提取器：两种不同的工具

有一个常见混淆值得先说清楚：这是一个像素取色器，而非调色板提取器。这两种工具听起来相似，且都涉及图像，但它们回答的是不同的问题：

• 像素取色器（本工具）：您点击精确位置，工具读取该单个像素的颜色。适用于需要某个特定元素颜色的情况：Logo上的品牌红、参考照片中天空的精确蓝色、截图中UI背景的米白色。
• 调色板提取器：工具分析整张图像并统计返回主导的5-8种颜色。适用于希望从整体图像中获取配色方案灵感，而非某个特定像素点的情况。

如果您实际上想要统计主导颜色，从图片提取调色板，免费才是正确的工具。两个工具相互补充：先提取调色板了解整体配色，再用本取色器获取特定的强调色。

工作原理

浏览器将您上传的图像绘制到HTML <canvas> 元素上。当您点击时，工具调用 ctx.getImageData(x, y, 1, 1)：这是一个Canvas 2D API方法，以四元素数组（红、绿、蓝、透明度）的形式返回单个像素的RGBA值。这些值随后被格式化为HEX、RGB和HSL以供显示。放大镜是第二个Canvas，它复制光标周围的小区域并放大渲染，让您能清楚看到将要选取的像素。所有运算均在您的浏览器本地完成；图像字节从不被传输。

何时使用像素取色器

• 品牌匹配：提取Logo的精确颜色，用于设计或营销素材的其他地方。
• 参考摄影：从参考图像中找到精确的天空色调、肤色或自然材质颜色。
• 设计QA：验证截图与规格颜色在像素级别完全匹配。
• 逆向分析现有网站：当DevTools不可用时（来自同事的截图、竞争对手的界面），获取按钮或背景的实际渲染颜色。
• 设计稿分析：从情绪板或设计稿中提取精确颜色。
• 手机截图检查：在桌面端检查手机截图，无需原始设备。
• 无障碍审计：读取文字或UI元素的实际渲染颜色（由于抗锯齿或透明度叠加，可能与源CSS不同）。

HEX、RGB、HSL：同一颜色，三种表示法

本工具以三种格式输出同一颜色值，因为不同场景偏好不同的格式：

• HEX：#2b7190。紧凑的六位字符，网页设计和大多数复制粘贴工作流的事实标准。可直接用于CSS、设计工具的颜色选择器或Markdown。
• RGB：rgb(43, 113, 144)。底层数字形式。在需要独立调整各通道时，或在需要十进制值的工具中（Tailwind的任意值、程序化生成）时很有用。
• HSL：hsl(199, 54%, 37%)。色相/饱和度/亮度，对人类更直观。「相同色相、略微更亮」在HSL中只需改一个数字，但在HEX或RGB中需要多通道联动。

抗锯齿陷阱

逐像素取色器读取的是光标下精确的像素，但在真实图像中，该像素的颜色可能并不是您所想象的颜色。抗锯齿处理将字母、图标和曲形轮廓的边缘与周围背景混合，使其看起来平滑。因此，点击白底黑字的「边缘」可能得到灰色，而非纯黑色。两个避免此陷阱的实用习惯：

• 从实心形状的中心取色，而非从发生抗锯齿处理的边缘取色。
• 使用放大镜确认您正处于清晰的品牌颜色像素上，而非混合的边缘像素。

JPEG压缩与参考图像质量的重要性

JPEG压缩会引入细微的颜色失真，尤其是在对比度边缘和纯色平坦区域周围。导出为JPEG再重新导入的「纯红色」（#FF0000）品牌颜色可能读取为 #FE0102 或类似值，接近但与原始值不完全相同。对于精确的品牌颜色匹配，建议使用：

• PNG或无损WebP源图像，用于提取重要颜色。
• 矢量源文件（SVG、PDF）在高缩放比例下渲染，矢量颜色是精确的。
• 直接从设计工具（Figma、Sketch、Photoshop）获取，而非从截图中取色。

浏览器级和操作系统级的吸管工具替代方案

还有几种从屏幕上取色的其他方式：

• CSS EyeDropper API（new EyeDropper()）。MDN的说明：「此功能可用性有限，因为它在一些主流浏览器中尚不支持，未达到Baseline标准。」 目前支持Chrome和Edge（自Chrome 95起），不支持Firefox和Safari。以 { sRGBHex } 的形式返回颜色。支持时效果良好，但参差不齐的支持意味着基于Canvas的取色器在跨浏览器场景中仍有其价值。
• macOS数字颜色测量仪：macOS内置应用，可读取屏幕上任意像素的颜色。
• Windows PowerToys颜色选择器：Microsoft的官方PowerToys工具集包含像素取色器。
• 浏览器DevTools：Chrome和Firefox在检查器中编辑CSS时，颜色选择器UI均内置了吸管工具。

网页取色器仍有其存在价值的原因：适用于通过Slack或邮件收到的共享截图，无需安装软件，可在任何操作系统的任何浏览器上运行，且图像永远不会离开您的设备。

隐私

图像携带的信息往往不止像素本身：EXIF元数据可能包含照片拍摄地点的GPS坐标、相机序列号和原始拍摄时间戳。截图可能含有机密界面、草稿文字或预发布品牌素材。人脸在多个司法管辖区的隐私法下属于生物特征标识符。本工具完全在您的浏览器中运行，图像从文件系统进入内存Canvas，逐像素采样，离开页面的唯一内容是您复制的颜色值。服务端图像取色工具会上传整张图像；这就是两者的区别。

常见错误

1. 在抗锯齿边缘取色。获得的颜色是形状与背景的混合色。请从实心区域的中间取色。
2. 从高度压缩的JPEG中取色。压缩伪像会细微偏移颜色。对于精确的品牌匹配，请使用更高质量的源文件。
3. 将取色器与调色板提取器混淆。如果您想要整体图像的主导颜色，需要的是调色板提取器，而非像素取色器。
4. 从彩色页面背景上的透明PNG中取色。根据Canvas处理透明度的方式，您可能会通过alpha通道采样到页面背景色。如果精度很重要，请先将图像转换为已知背景。
5. 完全信任截图颜色。某些显示器会应用颜色校准，导致渲染颜色偏离源颜色。取色器读取的像素值是图像中编码的内容，不一定反映原始显示器所显示的内容。
6. 从低分辨率图像中取色并丢失细节。Logo的200×100缩略图可选取的不同像素比原始资源少得多。条件允许时，请使用最高分辨率的源文件。

更多常见问题

本工具与调色板生成器有何区别？

取色器读取您点击的某个特定像素的颜色。调色板生成器分析整张图像并统计返回最主导的颜色。两者用途不同：取色器精确，调色板生成器是解读性的。如需从图像生成调色板，请参阅 从图片提取调色板，免费。

为什么我取到的颜色与品牌规格不同？

两个常见原因。其一，您取色的图像可能已被压缩（JPEG重新编码会将颜色偏移几个RGB值）。其二，您点击的像素可能位于与背景混合的抗锯齿边缘上。对于精确的品牌匹配，请使用矢量源或高质量PNG/无损WebP，并从实心区域的中间取色。

可以在手机上使用吗？

可以，触控设备支持点击取色，不过放大镜行为和像素精确度可能因手机浏览器而异。对于手机端的精确像素操作，较大的触控目标使锚定放大镜的取色器难以操作；条件允许时，建议在桌面浏览器上进行颜色关键操作。

图像会被上传到任何地方吗？

不会。图像通过浏览器的 FileReader / 图像加载API加载到本地Canvas元素中；像素读取通过 getImageData 完成；没有任何内容被传输到服务器，也没有任何分析端点接收到图像。当图像包含EXIF GPS数据、人脸、机密界面截图或您不希望上传的预发布品牌素材时，这一点尤为重要。

既然CSS已经显示颜色值，为什么还要从图像中取色？

CSS显示的是声明的颜色，但实际渲染的像素可能存在差异：渐变、透明度叠加、抗锯齿、暗模式调整、浏览器颜色配置文件处理以及截图压缩都会造成偏差。当您需要知道像素实际是什么颜色时（用于设计QA、无障碍审计或与参考图对比），直接读取渲染像素是唯一可靠的方法。

为什么放大镜有用？

单个像素非常微小，在典型屏幕分辨率下，肉眼无法辨别单个像素。放大镜显示光标下区域的放大视图，让您能确认将要点击的确切像素。对于密集图像、抗锯齿文字或曲线形状（相邻像素差异细微）尤为有价值。