图片取色器
点击图片任意位置取色，放大镜显示 5×5 像素网格与坐标，给出 HEX / RGB / HSL 并保留最多 12 条取色历史，支持粘贴剪贴板图片。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
图片只在浏览器本地处理，不会上传
先选择一张图片
HEX: — RGB: — HSL: — 坐标: — 取色历史: 无
还没有取色，点击图片开始。
还没有取过色
最多保留 12 个颜色，点击可以重新选中。
这个工具能做什么
- 对着一张设计稿或截图取色，拿到 HEX / RGB / HSL 三种写法，直接粘进 CSS 或设计工具。
- 从截图里核对品牌色：放大镜给出 5×5 像素网格和原始坐标，能看清渐变邻近像素的细微差别。
- 整理配色时连续取若干个颜色，取色历史会自动去重并保留最近 12 个，可一次复制成列表或 CSS 变量。
- 别人发来一张效果图问「这个按钮什么色」，直接用 ⌘/Ctrl + V 粘贴剪贴板截图就能取色，不用先存成文件。
示例
输入
在图片上取到 rgb(12, 34, 255) 这个像素
输出
#0C22FF rgb(12, 34, 255) hsl(235, 100%, 52%)
HEX 固定输出大写 6 位写法；HSL 由 RGB 换算并取整，所以 RGB 能转回来的值可能与原始浮点值有 1 以内的偏差。坐标是原图像素坐标，即使预览图被缩放也按原图换算。
常见问题
图片会被上传吗？
不会。图片用 createImageBitmap 在浏览器里解码，像素数据读进内存后就地取色，页面不发起任何网络请求，也没有后端接口。断网时同样可用。
为什么取到的颜色和肉眼看到的不完全一样？
两点原因：一是取的是单个像素，抗锯齿边缘或渐变上相邻像素本来就有差异，先看放大镜里 5×5 网格再点中间；二是如果图片带色彩配置文件（如 Display P3），canvas 会按 sRGB 解释，颜色可能整体偏移。
历史记录里的颜色是怎么排序的？
最新的在最前，重复取同一个颜色不会产生第二条而是把它提到最前，最多保留 12 条。复制历史得到每行一个 HEX，复制 CSS 变量得到 --picked-1: #RRGGBB; 这样的列表。
透明区域取色会怎样？
像素的 alpha 也会被读出来，RGB 值取自该像素的原始通道，所以全透明区域的 RGB 可能是 0,0,0。取色时请避开图片外的透明留白，或者先确认那块区域的视觉效果。
支持哪些图片格式？
浏览器能解码的都支持，常见的是 PNG、JPEG、WebP、GIF（只取第一帧）、BMP 与 AVIF。如果换一张图仍然提示「不是浏览器能解码的图片」，说明该格式在当前浏览器里不支持，例如部分 HEIC 文件。
关键词：图片取色取色器color pickereyedropperhexrgbhsl拾色器放大镜取色