在线批量图片颜色提取工具

具体示例：从三张产品图中提取品牌色

假设您有三张产品照片，分别拍摄了红色、蓝色和绿色的杯子。您希望为每个产品建立独立的色板，以便用于网页设计。您可以将三张图片同时上传，工具会为每张图片随机选择十个默认颜色。然后，您分别点击每张图片中杯子的主体区域（例如点击红色杯子的杯身），工具会提取该位置的像素颜色，并显示 HEX、RGB 和 HSL 值。您可以继续点击背景、阴影等位置，累积颜色。最终，每张图片会生成一个独立的色板，最多保存当前容量内的样本，满容量时新颜色替换最早样本。您可以将每个色板导出为 CSS 变量或 SVG 文件，用于前端开发。

输入与输出

输入：多张 PNG、JPEG 或 WebP 图片，每张图片可以独立点击取色。图片在浏览器中显示，您可以通过鼠标点击选择位置。

输出：每张图片对应一个色板，色板中包含您点击位置的颜色卡片，色条中的每个色块可复制HEX；旁边当前颜色面板只显示最新样本的HEX、RGB和HSL值。您可以点击颜色卡片复制单个格式，或通过导出弹窗复制整个 CSS/Code 片段，也可以下载 SVG 或 PNG 格式的色板图片。

处理限制与注意事项

取色完全在浏览器本地完成，图片不会上传。但请注意：

• 大图按比例缩小到最大760×520的Canvas后取色；点击映射到预览像素，不能保证与未缩小原图的某个像素完全相同。
• 色板容量默认有上限（例如 10 个颜色），达到上限后新颜色会替换最早的颜色。您可以在设置中调整容量。
• 导出的 SVG 和 PNG 色板仅包含颜色块和数值，不包含图片本身。

常见问题

为什么我点击的位置提取的颜色和图片看起来不一样？

可能是由于屏幕显示的色彩配置（如 sRGB 与 Adobe RGB）差异，或者图片本身包含透明区域。工具读取浏览器解码并缩放后的Canvas RGB值，忽略该像素的alpha，不能作为原文件RGB或显示器校准的证明，因此可能与屏幕显示略有不同。

可以提取图片中某个区域的平均颜色吗？

目前工具只支持点击单个像素提取颜色，不支持区域平均。如果您需要平均色，可以先用其他工具处理图片。

导出的 CSS 代码格式是什么？

导出的 CSS 代码会生成类似 :root { --color-123456: #123456; } 的变量，方便您直接复制到项目中。具体格式以导出弹窗中的预览为准。