图片取色器 - 获取任意像素的HEX色值

上传图片,指向任意像素,读出它精确的HEX、RGB和HSL值。像素网格放大镜会显示十字准星下方的内容,方向键可以一次挪动一个像素,并且没有任何东西会离开您的浏览器。

为什么要从图片里取单个颜色

多数关于颜色的问题都是针对某一个具体位置,而不是整张图片。有人递给您一张已定稿设计的截图,您需要按钮那块精确的填充色才能在CSS里复现它。客户发来一张logo的JPG,您得先拿到那个品牌红,才能围绕它做别的东西。您在把图表系列的颜色对齐幻灯片标题的颜色。您在检查照片里看起来一模一样的两个色块是不是真的同值,还是有一个暗了两档。在所有这些场景里,自动配色板都是错的答案——它会返回覆盖面积最大的六种颜色,而您真正需要的那个颜色,可能只是一块40像素的点缀,任何聚类算法都不会把它捞出来。能够直接指到那个像素,才是这件事的全部。当源文件已经不在时,这也是最快的路。设计规范会漂移,源文件会丢,而一张拍平的PNG导出图往往是某个颜色仅存的记录。把它读回来只要一秒钟,而且不需要装任何设计软件。同样的道理也适用于那些本来就没有设计师参与的工作:摄影师在调色前采一个肤色,开发者从bug报告的截图里复制一个背景色,老师从一幅画里取几种颜色做练习页。因为一切都在本地运行,未发布的样机和内部截图不会离开您的机器。

源文件已经找不到时,从一张拍平的截图里还原某个按钮、徽标或logo的精确填充色
指向您真正在意的那个像素,而不是接受自动配色板认定的那几个主色
借助方向键微调和13乘13像素的放大镜,稳稳落在一像素细边或抗锯齿细边上
把同一个像素复制成HEX、RGB或HSL,带透明度时还能拿到HEXA和RGBA

如何从图片中取色

四步,不用注册也不用安装。文件由页面直接读取——没有任何东西被上传到服务器。

1

把图片拖到上传区、选择文件,或者直接从剪贴板粘贴。JPG、PNG、WebP、GIF和SVG都可以。

2

把指针移到图片上。放大镜会显示十字准星周围的像素网格,右侧面板实时更新。在触摸屏上请按住并拖动——放大镜位于手指上方,因此永远不会被挡住。

3

用方向键或屏幕上的方向按钮做精调:按一次精确移动一个源像素。如果图片为了适应栏宽被缩小了,可以切换到实际大小。

4

点击、轻触或按回车保留颜色,然后复制它的HEX、RGB或HSL值。保留过的颜色会留在最近列表里,随时可以再复制。

常见问题

有三件事会把数值拉开。第一,图片被绘制到画布上时,多数浏览器会忽略它内嵌的ICC配置文件,所以一张标记为Display P3或Adobe RGB的照片会被当作sRGB来读——而Photoshop这类有色彩管理的编辑器会应用配置文件,报出另一个数。第二,您的显示器按自己的色域和校准来呈现sRGB,同一个值在两块屏幕上看起来就是不同。第三,JPG的有损压缩确实会改变边缘附近的像素值,所以一块看似平整的区域里可能藏着好几个略有差异的颜色。这里给出的数字是实际存储的那个字节,也就是CSS和代码将会复现的那个值。
画布返回的是未预乘的颜色,也就是RGB和alpha分开存储。一个被制作成50%白色、下面什么都没有的像素,读回来是rgb(255, 255, 255)加alpha 128——这个组合在屏幕上任何地方都不会真正出现。只要alpha低于255,本工具就会同时给出原始数值、8位的HEXA和RGBA写法,另外还会给出这个像素落在白色背景上时的结果,而那通常才是您真正想要的数字。
本页面采样您指向的那个像素。配色板页面分析整张图片,把它量化成若干聚类,返回其中占比最高的四到十种颜色,并按覆盖面积排序。当您知道自己在意哪个位置时用这一个——一个logo标记、一个按钮、一片叶子。当您想从整张图片提炼一套配色、心里并没有具体像素时,用配色板页面。
不会。文件由页面本身读取,在您的标签页里解码进画布,采样也在那里完成。没有副本被发往服务器,什么都不会被存储,最近取色列表只存在于打开着的标签页里,关掉就消失。这对未发布的样机、内部仪表盘,以及任何您不会随便粘进网页表单的东西都很重要。
用按住拖动,而不是轻点。放大镜画在接触点的上方而不是下方,所以手指还在屏幕上时您就能看到像素网格,采样点会跟着拖动走。最后一两个像素请用屏幕上的方向键:每按一次精确移动一个源像素,这是任何指尖都做不到的。抬起手指或按下确认按钮即可保留颜色。
准。浏览器把画布总面积限制在约1670万像素——大约4096乘4096——所以2400万或5000万像素的文件无法作为一张全分辨率画布显示,预览会画得更小并附上说明。采样并不经过这个预览。每一次读数只围绕指针重绘一个小窗口,按1比1取自解码后的文件,所以您拿到的就是文件里的那个像素。您不需要先裁剪图片,一张5000万像素照片里的单像素细节,读出来也和制作时一模一样,不会糊进邻近像素里。
可以,但各有一个注意点。动图GIF只按第一帧绘制,所以动画后面才出现的颜色是取不到的——请先把您需要的那一帧导出来。SVG会先被栅格化再采样,因此您得到的是渲染结果的颜色,包含施加在形状上的不透明度、滤镜或渐变,而不是标记里写着的原始填充色。如果SVG没有声明固有尺寸,它会按1024像素宽栅格化。
它们描述的是同一个像素,所以取决于您要粘到哪里。HEX是最紧凑的写法,多数设计工具和样式表都用它。RGB在您需要微调某个通道或用数字比较两个颜色时更好读。当您想要的是一个变体而不是这个颜色本身时,就复制HSL:保持色相和饱和度、只改明度,就能得到相配的浅色或深色。当像素带透明度时,还会额外出现8位的HEXA或RGBA值。

更多图片工具

探索其他强大的图片编辑工具

压缩图片

减小文件大小

调整大小

更改尺寸

裁剪图片

裁剪区域

格式转换

转换格式

照片编辑器

编辑照片

旋转图片

旋转图片

镜像翻转

水平/垂直翻转

添加水印

添加水印

添加边框

为图片加边框

圆角裁剪

添加圆角效果

滤镜调整

亮度对比度等

模糊面部

隐藏面部

马赛克

局部打码

去除背景

去除背景

提升质量

AI 提升

添加文字

在图片上加字

图片拼接

拼接多张图片

HTML 转图片

网页转图片

GIF 转图片

提取序列帧

裁剪空白

移除空白边缘

批量重命名图片

安全地批量修改文件名

圆形裁剪

将图像裁剪为圆形

黑白

将图像转换为灰度

分割图像

将图像切割为网格

合并图像

将多张图像合并为一张

更改DPI

设置图像DPI元数据

图像转Base64

将图像编码为Base64

图片转PDF

将多张图片合并成一个PDF

HEIC 转 JPG

将 iPhone 的 HEIC 照片转换为 JPG

EXIF 元数据移除器

查看并清除照片中隐藏的元数据,包括 GPS 位置信息

Favicon 生成器

全套图标加 HTML

色板

从图片中提取颜色

Base64转图片

把Base64解码还原成图片

HEIC转PNG

把iPhone的HEIC照片转成无损PNG

文字穿插图片

把文字放到照片主体背后,全程在浏览器中完成

签名制作

手写签名并下载为透明PNG

签名去背景

把纸上的墨迹变成透明背景

透明背景制作

把背景变成透明

表情包生成器

为图片加上上下两行大字

图片放大

把图片放大 2 倍、3 倍或 4 倍

PDF 转 JPG

把 PDF 页面转成 JPG 图片

PDF 转 PNG

把 PDF 页面转成 PNG 图片

证件照制作

把 ID 照裁切到官方尺寸