尚未选取颜色
图片预览
将图片拖放到此处
或点击浏览
JPG | PNG | WebP | GIF
#000000
移动鼠标预览颜色 · 点击取色并保存到历史记录
当前颜色
HEX
—
RGB
—
HSL
—
颜色历史记录 （最多 12 个）
什么是图片颜色提取？
图片颜色提取可让你将鼠标悬停在图片的任意位置，并即时查看该像素的精确颜色。点击即可锁定颜色，并将其复制为 HEX、RGB 或 HSL。颜色历史记录面板最多保存 12 个已取颜色，便于随时参考——适合设计师、开发者，以及任何需要从照片或截图中匹配颜色的人。
如何使用图片颜色提取
- 点击拖放区或拖拽文件到其中，即可上传任意图片。
- 将鼠标移到图片上，即可在浮动标签和侧边面板中查看实时颜色预览。
- 点击图片任意位置即可取色，并保存到历史记录。
- 使用复制按钮将 HEX、RGB 或 HSL 值复制到剪贴板。
- 点击历史记录面板中的任意色块，即可将该颜色恢复到主显示区域。
了解颜色提取 ▾
示例
输入
上传品牌截图，并将鼠标悬停在标志颜色上
输出
#1A73E8 · rgb(26, 115, 232) · hsl(217, 80%, 51%) — 可直接复制
常见使用场景
- 从标志或截图中识别精确的品牌颜色
- 从照片中匹配背景颜色，用于 UI 设计
- 从设计稿中提取 CSS 颜色值
- 点击多个颜色并使用历史记录面板，构建迷你调色板
为什么使用此工具
- 使用 Canvas getImageData 实现像素级精确取色——无舍入。
- 三种输出格式（HEX、RGB、HSL），每种均可一键复制。
- 完全在浏览器中运行——图片绝不会离开你的设备。
常见问题
我的图像会上传到服务器吗？
不会。所有处理都通过 HTML5 Canvas API 完全在你的浏览器中完成。你的图片绝不会离开你的设备。
提取的颜色值有多准确？
这些值是像素级精确的——该工具使用 Canvas getImageData API 读取光标下像素的精确 RGBA 值，然后通过数学方式将其转换为 HEX、RGB 和 HSL。
这与调色板提取器有何不同？
调色板提取器会自动从图片中采样主色。此工具让你手动点击任意特定像素以获取其精确颜色，从而精确控制要提取的颜色。
复制按钮使用什么格式？
每种格式都会复制为可直接使用的字符串：HEX 复制为 #RRGGBB，RGB 复制为 rgb(R, G, B)，HSL 复制为 hsl(H, S%, L%)。