图片像素取色器
使用放大镜检查准确像素并导出 HEX、RGB、HSL、Alpha 和坐标
转换与创建
🔒 100% 本地运行 — 你的数据不会离开当前页面由 ToolsKit 编辑团队维护•最近更新：2026年8月23日•最近复核：2026年8月23日
工具说明
图片像素取色器把本地 PNG、JPEG、WebP 或 AVIF 解码到浏览器 Canvas，并检查准确源像素。Pointer 坐标会从响应式预览映射回全分辨率图片，因此显示的 HEX、RGB、HSL、Alpha 和 X/Y 来自原始像素网格，而不是 CSS 缩放截图。Nearest-neighbor 放大镜显示附近 7x7 像素，所选样本可导出 JSON。Canvas 取样报告浏览器解码后的像素值；Color Profile、HDR Tone Mapping、Premultiplied Alpha、显示器校准和有损压缩都可能让视觉 Swatch 与设计系统源值有差异。图片不会离开浏览器。
场景配方
01
从交付截图核对实现颜色
目标：收集像素证据，同时不把它误当原始 Design Token
- 打开最高质量截图，在目标区域平坦内部取多个像素。
- 比较 HEX 与 RGB，避开抗锯齿边缘、阴影和压缩块。
- 记录坐标和导出样本，修改代码前再到源设计系统确认目标 Token。
结果：得到可复现的像素样本，用于支持但不替代 Design Token 核验。
常见问题
取样的是全分辨率图片吗？
是，缩放预览上的 Pointer 位置会映射回 Canvas 源像素网格。
会显示哪些颜色值？
会报告大写 HEX、RGB、HSL、Alpha 和准确 X/Y 像素坐标。
放大镜显示什么？
它使用 Nearest-neighbor 放大 Pointer 周围 7x7 像素。
为什么取样值可能与设计稿不同？
Color Profile、浏览器解码、显示器校准、HDR 映射和有损压缩都会改变观察像素。
可以导出所选颜色吗？
可以，本地 JSON 文件会包含所有报告字段。
图片会上传吗？
不会，解码、Canvas 取样、放大和导出都在本地运行。
继续浏览