在线批量图片颜色提取工具
批量显示多张图片，按各图片指定位置提取颜色并分别生成可复制色板. 此工具无需安装，所有处理均在当前浏览器本地完成，不会上传输入内容或本地文件。
开始使用
在线批量图片颜色提取工具说明
批量显示多张图片，按各图片指定位置提取颜色并分别生成可复制色板。工具加载图片时会随机提取十个默认像素颜色，之后只提取您明确点击位置的像素颜色。
使用方法：在线批量图片颜色提取工具
- 一次上传多张图片后，工具会在每张图片上随机选择十个默认颜色；随后可分别点击各图片目标位置，建立独立色板。
- 点击图片时会显示取色标记、当前颜色预览，以及 HEX、RGB、HSL 数值。
- 继续点击不同位置可累计颜色；达到设置的数量上限后会移除最早选择的颜色。
- 可调整色板容量、复制单个格式，并通过导出弹窗复制 CSS/Code 或下载 SVG/PNG。
工具作用
- 按用户指定位置精确读取图片像素，而不是由算法猜测主要颜色。
- 同时生成可视化色板与标准颜色格式。
- 帮助设计师和开发者从参考图片中还原准确配色。
取色原理
图片加载到浏览器 Canvas 后，根据点击坐标读取该像素的红、绿、蓝通道，再转换为 HEX、RGB 和 HSL。图片缩放显示时，工具会把屏幕点击坐标映射回 Canvas 像素坐标。
应用场景
- 素材整理：批量为照片、封面或商品图建立位置取色色板。
- 品牌审核：比较多张素材在相同视觉位置使用的颜色。
- 系列设计：为一组图片分别选取主体色、背景色和强调色。
隐私说明
图片解码、位置采样和颜色换算均在浏览器本地完成，不会上传您的图片。
具体示例：从三张产品图中提取品牌色
假设您有三张产品照片，分别拍摄了红色、蓝色和绿色的杯子。您希望为每个产品建立独立的色板，以便用于网页设计。您可以将三张图片同时上传，工具会为每张图片随机选择十个默认颜色。然后，您分别点击每张图片中杯子的主体区域（例如点击红色杯子的杯身），工具会提取该位置的像素颜色，并显示 HEX、RGB 和 HSL 值。您可以继续点击背景、阴影等位置，累积颜色。最终，每张图片会生成一个独立的色板，包含您点击的所有颜色。您可以将每个色板导出为 CSS 变量或 SVG 文件，用于前端开发。
输入与输出
输入：多张 PNG、JPEG 或 WebP 图片，每张图片可以独立点击取色。图片在浏览器中显示，您可以通过鼠标点击选择位置。
输出：每张图片对应一个色板，色板中包含您点击位置的颜色卡片，每张卡片显示 HEX、RGB 和 HSL 值。您可以点击颜色卡片复制单个格式，或通过导出弹窗复制整个 CSS/Code 片段，也可以下载 SVG 或 PNG 格式的色板图片。
处理限制与注意事项
取色完全在浏览器本地完成，图片不会上传。但请注意：
- 图片在屏幕上缩放显示时，点击位置会映射到原始像素坐标，因此取色准确。
- 色板容量默认有上限（例如 10 个颜色），达到上限后新颜色会替换最早的颜色。您可以在设置中调整容量。
- 导出的 SVG 和 PNG 色板仅包含颜色块和数值，不包含图片本身。
常见问题
为什么我点击的位置提取的颜色和图片看起来不一样？
可能是由于屏幕显示的色彩配置（如 sRGB 与 Adobe RGB）差异，或者图片本身包含透明区域。工具提取的是原始像素值，不进行色彩管理，因此可能与屏幕显示略有不同。
可以提取图片中某个区域的平均颜色吗？
目前工具只支持点击单个像素提取颜色，不支持区域平均。如果您需要平均色，可以先用其他工具处理图片。
导出的 CSS 代码格式是什么？
导出的 CSS 代码会生成类似 :root { --color-1: #RRGGBB; } 的变量，方便您直接复制到项目中。具体格式以导出弹窗中的预览为准。
此工具无需安装，所有处理均在当前浏览器本地完成，不会上传输入内容或本地文件。