首页图片取色器

图片取色器

上传或拖拽图片后点击像素即可读取HEX与RGB色值,支持坐标显示、最近颜色记录与一键复制

图片上传与取色画布

上传或拖拽图片后,点击任意像素即可读取颜色。

画布缩放100%

拖拽图片到这里

支持 JPG、PNG、GIF、BMP、WebP、SVG 等常见格式。

请先上传图片,或点击“加载示例图”后再取色。

画布未加载完成,请稍后再试。

当前取色结果

点击左侧画布后,这里会展示坐标、RGB 与 HEX。

待取色
坐标[--, --]
HEX--
RGB--

点击画布会自动尝试复制当前 HEX,同时把该颜色加入最近取色。

局部放大镜

移动到画布上可查看局部放大与预览色值。

最近取色



说明文档

工具简介

图片取色器支持上传或拖拽本地图片,点击画布任意像素即可读取对应颜色,并展示坐标、RGB 与 HEX 值。

核心功能

  • 支持本地图片上传、拖拽导入与“加载示例图”手动体验。
  • 支持按像素坐标读取颜色,实时显示 HEX 和 RGB。
  • 支持整体画布缩放与局部放大镜预览,便于精细取色。
  • 支持一键复制当前 HEX,并自动记录最近取色。
  • 支持从最近颜色再次复制,便于配色对比与复用。

使用步骤

  1. 点击“选择图片”上传本地图片,或直接拖拽文件到上传区域。
  2. 可先通过缩放控件放大画布,配合局部放大镜观察细节区域。
  3. 在画布内点击目标像素,读取对应的坐标、RGB、HEX。
  4. 使用“复制 HEX”或“复制当前 HEX”快速复制色值。
  5. 在“最近取色”中点击历史颜色,可再次复制常用色值。

适用场景

  • 网页与 App 界面配色提取。
  • 前端开发中的样式还原与 CSS 调试。
  • 海报、截图、素材图的颜色复刻。
  • 设计评审时快速确认目标色值。

常见问题

  • 点击后没有变化:请确认点击位置在画布范围内,且图片已成功加载。
  • 复制失败:请检查浏览器剪贴板权限,或手动复制右侧 HEX 文本。
  • 颜色看起来不一致:请优先使用原图像素,压缩图片可能导致色值偏差。

隐私说明

图片读取、像素采样与颜色转换均在浏览器本地完成,不会上传图片内容到服务器。