工具用的顺手吗?
你的反馈能帮助我们做得更好
精准提取图片像素,一键输出RGB与HEX色值。
概览
了解工具能解决的问题、计算或处理逻辑,以及数据边界。
图片取色器适合把截图、照片或设计图中某个位置的颜色读成可复制的数值。将鼠标移到图片上会预览该像素;点击后会把它加入取色列表。每个颜色以两种形式显示:HEX 使用六位十六进制通道写法,例如 #FF5733;RGB 将红、绿、蓝三个通道分别写成 0–255 的整数,例如 rgb(255, 87, 51)。两种表示可以对应同一组 RGB 通道,便于粘贴到样式代码或设计备注中。
移动鼠标只更新当前预览,不会自动加入列表;点击图片才会固定一个取样结果。列表保存本次页面操作中最近选取的颜色,最多保留 30 项。可以复制单项 HEX,也可以一次复制列表中的 HEX 和 RGB 文本;列表还支持逐项删除或清空。
HEX 把红、绿、蓝通道写成六个十六进制字符,适合在 CSS 等样式文本中简洁记录;RGB 把三个通道分别写成十进制数字,方便逐项阅读或对照。两种写法在这里表达同一个取样结果,例如 #FF5733 对应 rgb(255, 87, 51)。W3C 的 CSS 颜色规范定义了这两类常见写法。
指南
按步骤完成操作,并通过示例核对输入与结果。
取色过程在当前浏览器中读取所选图片像素;图片文件本身不需要随取色请求上传。
选择一张 PNG、JPG/JPEG、WebP、GIF、BMP 或 AVIF 图片。上传区域会显示当前文件大小限制;常规配置的基准上限为 1 MB。
在图片上移动鼠标,观察预览区显示的颜色块、HEX 和 RGB。若要保留这个颜色,点击图片对应位置。
在右侧列表查看已选色值。需要一个值时复制该项的 HEX;需要整理整组样本时使用“复制全部”,再粘贴到文本、样式表或设计记录中。
取错位置可删除该项;开始新一组取色时清空列表后继续点击图片。
场景
查看这项工具在不同工作与生活流程中的用法。
前端开发者可在界面截图上点击按钮、背景或边框的实色区域,复制 HEX 或 RGB 到样式草稿,再在实际页面里比对。采样时尽量避开文字边缘、阴影和渐变交界处。
设计评审时,可连续点击主色、辅助色和局部强调色,把取样值复制成一段清单,供团队讨论或后续复核。若颜色来自被压缩或缩放过的预览图,应把它视为图中像素值,而不是原始品牌色定义。
整理多张截图或页面时,复制色值后可在自己的备注中补上“按钮背景”“标题文字”等来源说明。当前取色列表只保留数值,不附带图片名称、坐标或元素标签;额外记录来源能帮助之后回到原图复查。
问答
集中解答高频疑问与容易混淆的问题。
不会。移动鼠标只更新预览;点击图片才会把当前像素加入取色列表。
复制文本为每项颜色的 HEX 和 RGB 写法,按行排列,便于粘贴到设计记录或代码草稿。
可以。每个列表项旁都有删除操作;也可以清空全部已选颜色后重新取样。
须知
使用前了解适用范围、结果限制与必要提醒。
取色结果来自所选图像经浏览器解码后的对应像素。照片压缩、截图缩放、抗锯齿、透明区域和图像编辑都可能使取到的 RGB 与原始设计值不同;本工具不会推断图片最初使用的品牌色或色彩配置。显示器、系统和软件对颜色的呈现也可能不同,数值相同不代表每个设备上看起来完全一样。
当前只输出 HEX 和 RGB,不提供 HSL、CMYK 或 RGBA;透明图像的结果也不含透明度通道。渐变、压缩或抗锯齿边缘的像素可能呈现混合值,结果以实际取样点为准。文件大小以页面上传区当前显示为准;图片太大或浏览器无法解码时,可先另存为支持格式并缩小尺寸,再重新取色。
推荐
查找相关工具、专题与可用的 API 能力。