图片像素信息
移动鼠标查看图片坐标、像素颜色和RGB值。
工具资源加载中...
图片像素信息在线工具
图片像素信息工具可以读取图片任意位置的像素颜色,实时显示坐标、RGBA、RGB、HEX 和 HSL 数值,并通过放大镜观察附近像素。适合前端开发取色、UI 设计、图片排查、透明度检查和网页配色分析。
精准取样
移动鼠标或触摸图片,读取指定像素的准确坐标。
多种颜色值
同时提供 HEX、RGB、RGBA 和 HSL 颜色表示。
像素放大镜
放大附近像素区域,方便检查边缘颜色和透明通道。
一键复制
复制 HEX 颜色后可以直接用于 CSS、设计标注和前端代码。
图片像素信息使用方法
- 1上传需要取色或检查的图片。
- 2移动鼠标到图片目标位置,侧边面板会实时显示像素数据;点击可以固定结果。
- 3查看像素坐标、颜色预览、RGB、RGBA、HEX 和 HSL 值。
- 4需要在网页或设计文件中使用时,点击复制 HEX。
RGBA 与透明度说明
RGB 表示红、绿、蓝三个颜色通道,HEX 是 RGB 的十六进制写法;RGBA 在 RGB 基础上增加 Alpha 透明度通道,Alpha 为 255 表示完全不透明,越小表示越透明。PNG 等支持透明通道的图片更适合检查 RGBA 数据。
常见问题
为什么图片显示缩放后仍能读取准确像素?
工具会根据图片在页面中的显示比例,把鼠标坐标映射回原始画布像素,因此读取的是原图坐标,而不是屏幕 CSS 像素。
可以取透明 PNG 的颜色吗?
可以。RGBA 数值中的最后一项会显示透明度,侧边颜色预览也会使用该像素的颜色。
图片会上传到服务器吗?
不会。图片通过浏览器 Canvas 读取像素,取样过程在本地完成。
工具说明
移动鼠标查看图片坐标、像素颜色和RGB值。
使用图片像素信息工具在线查看指定位置的坐标、HEX、RGB和透明度,适合前端开发和设计取色。