图片取色器
点击像素即可从任意图片中取色。放大镜显示精确像素，并给出 HEX、RGB 和 HSL 值以及已取颜色的历史记录。
将图片拖放到此处，或点击选择图片
也可以直接从剪贴板粘贴图片（Ctrl+V / ⌘V）
完全在浏览器中运行，您的数据不会被上传。
相关工具
查看全部什么是 图片取色器？
上传或粘贴图片后，点击任意位置即可读取该像素的准确颜色，格式包括 HEX、RGB（半透明时为 RGBA）和 HSL。放大镜会显示光标周围的像素，X/Y 输入框可定位到精确的像素，每一个取到的颜色都会保存在可点击的历史记录中。
如何使用 图片取色器
- 拖放、选择或粘贴图片（用 Ctrl+V 粘贴截图效果很好）。
- 把指针移到图片上查看放大视图，然后点击取色。
- 也可以输入精确的 X 和 Y 像素坐标。
- 点击 HEX、RGB 或 HSL 值即可复制；可从已取颜色中重复使用之前的颜色。
示例
输入
40×20 image whose top-right quadrant is pure green, pixel X=25, Y=5
输出
#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)
何时使用 图片取色器
用于从 Logo 或截图中匹配品牌色、从照片中为设计取样颜色，或检查某个界面元素的准确颜色。请注意，JPEG 压缩和抗锯齿会略微改变像素颜色，所以请在纯色区域而不是边缘取样。想一次获取整套调色板，请使用图片调色板提取。
图片取色器 的工作原理
图片以完整分辨率绘制在 canvas 上，并用 getImageData 一次性读取其像素。点击位置会从屏幕坐标映射到图片像素坐标，该索引处的 RGBA 值被转换为 HEX 和 HSL（色相以度为单位，饱和度和亮度以百分比表示）。放大镜在不做平滑的情况下重绘 11×11 像素的邻域。
常见用例
- 查找 Logo 中品牌色的 HEX 代码。
- 从网站截图中取样颜色，以便在 CSS 中复用。
- 检查两个界面元素是否真的使用了相同的颜色。
- 从照片中收集颜色，制作情绪板。
安全提示
图片使用 Canvas API 在你的浏览器本地解码、处理和编码，不会上传到任何服务器。
常见问题
为什么颜色与我预期的略有不同？
JPEG 等有损格式以及边缘的平滑处理会改变像素值。请在纯色区域的中间取色，或用 X/Y 输入框选择精确的像素。
支持透明图片吗？
支持。半透明像素会显示为带 alpha 值的 rgba()；HEX 值显示的是 RGB 部分。
可以在浏览器之外取色吗？
不可以，只能从你加载的图片中取色。想从屏幕上的任何内容取色，可以先截图，再用 Ctrl+V 粘贴进来。