在线图片颜色提取工具

在线图片颜色提取工具说明

上传并显示单张图片，可按指定位置提取HEX、RGB和HSL颜色并生成自选色板。工具加载图片时会随机提取十个默认像素颜色，之后只提取您明确点击位置的像素颜色。

使用方法：在线图片颜色提取工具

1. 上传图片后，工具会先随机选择十个图片位置生成默认10色调色板；随后可继续点击需要采样的位置，把更多颜色加入色板。
2. 点击图片时会显示取色标记、当前颜色预览，以及 HEX、RGB、HSL 数值。
3. 继续点击不同位置可累计颜色；达到设置的数量上限后会移除最早选择的颜色。
4. 可调整色板容量、复制单个格式，并通过导出弹窗复制 CSS/Code 或下载 SVG/PNG。

工具作用

• 按用户指定位置精确读取图片像素，而不是由算法猜测主要颜色。
• 同时生成可视化色板与标准颜色格式。
• 帮助设计师和开发者从参考图片中还原准确配色。

取色原理

应用场景

• 网页与 UI：从参考图中精确拾取背景、按钮或文字颜色。
• 摄影与插画：从主体、高光、阴影等指定位置建立色板。
• 品牌设计：从标志或产品图中读取关键颜色。

隐私说明

图片解码、位置采样和颜色换算均在浏览器本地完成，不会上传您的图片。

实际示例

假设您上传了一张品牌海报，希望提取主标志的深蓝色和背景的浅灰色。点击标志区域，工具会显示该像素的HEX、RGB和HSL值，例如HEX #1A2B3C、RGB(26, 43, 60)、HSL(210°, 40%, 17%)。继续点击背景，得到浅灰色HEX #E5E5E5。工具会自动将这两个颜色加入色板，并生成一个包含10种颜色的调色板，您可以导出为CSS变量或PNG图片。

输入与输出

输入：一张本地图片（PNG、JPEG、WebP等），以及您点击的像素位置。

输出：所选像素的颜色值（HEX、RGB、HSL），以及一个可自定义容量的色板，支持导出为CSS、代码片段、SVG或PNG。

限制与注意事项

• 图片缩放显示时，点击坐标会映射到原始像素，但缩放可能导致相邻像素混合，建议放大后采样。
• 色板容量有限，默认10色，可调整，但超过上限会移除最早的颜色。
• 颜色转换基于整数通道，HEX和RGB为整数，HSL可能涉及舍入，来回转换可能有微小差异。

常见问题

为什么点击同一区域得到的颜色略有不同？

图片缩放、压缩伪影或相邻像素差异可能导致采样点变化，建议放大并多次采样取平均值。

上传的图片会发送到服务器吗？

不会，图片解码和像素采样均在浏览器本地完成，不上传。

如何导出色板？

点击色板下载图标，选择CSS、Code、SVG或PNG格式，CSS和Code支持一键复制。