图片像素取色器
检查解码图片像素的 HEX、RGB、HSL、Alpha 和坐标，导出单个 JSON 样本
工具说明
查看 PNG、JPEG、WebP 或 AVIF 经浏览器解码后的像素。响应式预览中的指针位置会映射回完整分辨率画布。样本包含大写六位 HEX、RGB、取整到角度和百分比的 HSL、范围为 0 到 255 的 Alpha，以及从左上角 0,0 开始的 X/Y 坐标。HEX 不包含透明度，需另看 Alpha 字段。最近邻放大镜显示 7×7 邻域，所选像素居中，图片边缘也保持这一位置。可将当前单个样本导出为 JSON；这不是多色调色板提取工具。EXIF 方向、浏览器颜色转换、HDR 处理、有损解码与透明度取整都可能影响解码值，因此不能保证是原始编码通道值，也不是经过校准的显示器测量结果。加载另一张图片时立即清空旧画布和样本，延迟解码不会在清空后恢复旧内容。单张输入不超过 40 MiB，单边不超过 8192 像素，总计不超过 3200 万像素。文件在当前页面处理，不保存为浏览器草稿。
场景配方
从交付截图核对实现颜色
目标：收集像素证据，同时不把它误当原始 Design Token
- 打开最高质量截图，在目标区域平坦内部取多个像素。
- 比较 HEX 与 RGB，避开抗锯齿边缘、阴影和压缩块。
- 记录坐标和导出样本，修改代码前再到源设计系统确认目标 Token。
结果：得到可复现的像素样本，用于支持但不替代 Design Token 核验。
常见问题
X 和 Y 表示什么？
它们是解码图片中的零起始坐标：X 向右增加，Y 向下增加。EXIF 方向可能让网格相对 JPEG 存储像素旋转。
HEX 包含透明度吗？
不包含。HEX 仅含 RGB；Alpha 为独立整数，0 表示透明，255 表示不透明，并写入导出的 JSON。
取样的是缩放后的截图吗？
不是。即使 CSS 将预览缩小，指针坐标也会映射到完整分辨率的解码画布。
为什么数值可能与设计稿不同？
浏览器颜色管理、EXIF 方向、HDR 转换、压缩和透明度取整都可能改变解码像素。建议在平坦内部取样，并另行核对设计稿中的颜色定义。
JSON 包含完整调色板吗？
仅包含当前所选样本的颜色字段、Alpha 和坐标。如需多点样本，请分别保存。
统计中包含像素值或文件名吗？
不包含。手动成功取样每张图仅记录一次动作，内置示例不计入手动结果。
继续浏览