浏览器本地图像颜色提取
图片取色器是一款在浏览器中运行的实用工具，允许用户从本地设备选择一张图片，并精确提取其中任意像素的颜色数值。在载入图片后，工具会立即读取并显示该图片中心像素的颜色值与坐标。
用户只需将指针在图片上移动，即可逐像素采样颜色。为了辅助高精度操作，工具配备了放大镜功能，提供指针周围像素的放大视图。在图片上点击鼠标，即可将当前采样的颜色保存至历史记录中。
除了鼠标操作，工具还支持键盘微调。用户可以使用方向键在图片上移动十字准星进行采样。配合键盘操作时，按下 Shift 键并使用方向键可将准星一次性移动 10 个像素。确定像素后，按下 Enter 或 Space 键即可保存当前采样的颜色。
支持的图像格式与尺寸限制
本工具支持导入单张图像文件，兼容多种主流及现代图像格式。具体支持的格式与 MIME 类型如下：
| 格式名称 | 对应的 MIME 类型 |
|---|---|
| PNG | image/png |
| JPG / JPEG | image/jpeg |
| WebP | image/webp |
| GIF | image/gif |
| AVIF | image/avif |
| HEIC / HEIF | image/heic, image/heif |
如果用户拖入不支持的文件类型，系统将触发错误提示：“不支持这种文件类型,请换成 PNG、JPG、WebP、GIF、AVIF 或 HEIC 图片。”。若图像文件因损坏或格式不兼容而无法读取，则会显示：“打不开这张图片,它可能已损坏或格式不受支持。”。
为了保证浏览器运行性能，导入的图像若长边超过 4096 像素，系统会自动对其进行等比例缩放。
颜色模型输出与复制
每次成功采样像素时，工具会同时输出三种主流的颜色模型数值：
- HEX：十六进制颜色代码（例如
#FFFFFF），常用于 HTML 和 CSS 网页开发。 - RGB：红（Red）、绿（Green）、蓝（Blue）三原色数值，直观反映光强组合。
- HSL：色相（Hue）、饱和度（Saturation）、亮度（Lightness），便于设计师按视觉感知调整色彩。
点击界面上显示的任意一个颜色数值（HEX、RGB 或 HSL），该数值就会被直接复制到系统剪贴板中。如果浏览器因安全策略阻止了此操作，界面会提示：“复制失败 —— 浏览器拦截了剪贴板访问。”。
边缘情况与透明度处理
在提取颜色时，有几种特殊的技术细节需要注意：
- 半透明像素：如果目标像素包含 Alpha 通道（即半透明），工具会直接读取该像素自身的颜色与透明度，而不会将它与背景色混合计算。此时界面会显示提示信息：“Alpha
{n}% —— 这个像素是半透明的。”。 - 压缩与抗锯齿偏差：工具读取并展示的是图像文件中实际存储的精确像素值。如果导入的图片经过 JPEG 格式压缩，或者属于含有抗锯齿边缘的屏幕截图，其像素值可能已经因算法插值而发生了微调，导致提取到的数值与肉眼预期的纯色存在偏差。
- 历史记录上限：已保存的颜色记录最多可存储 12 个条目。如果两个像素的 RGB 数值完全相同，但 Alpha 透明度不同，它们仍会被视作不同的颜色并作为独立条目存入历史记录。在未保存任何颜色时，历史区域会显示：“保存的颜色会显示在这里,点色块可重新载入。”。
隐私保护与本地处理
本工具在设计上完全基于客户端运行。图片直接从你的设备读取,不会离开浏览器,也不会上传到 BroBroGo。所有的图像解码、像素采样和颜色数值计算均在用户的本地浏览器线程中完成，不依赖任何后端服务器。
当用户完成工作后，点击“重新开始”按钮，工具将清除当前载入的图像、清空已保存的颜色历史记录，并将整个界面重置回初始状态。
常见问题
怎么从图片里取色?
把鼠标移到图片上,面板会实时显示指针下方像素的颜色,放大镜会放大局部,方便你对准到具体那一个像素。点一下就把这个颜色存进取色记录。你也可以先点中图片,用方向键移动准星,再按回车。
能得到哪些颜色格式?
每取一个像素,都会同时给出 HEX、RGB、HSL 三种写法。点任意一个数值即可复制,直接粘进 CSS 或设计软件里用。
为什么取到的颜色有时和预想的不一样?
你拿到的是图片里那个像素真实存下的颜色值。如果图片是 JPEG 或截图,压缩和抗锯齿可能早已让边缘像素有了细微偏差;而半透明像素是按它自身读取的,不含它背后的内容。