点一个像素——读出数值

点击即可拿到 HEX、RGB、HSL。不用开设计套件。

  • 本地处理,图片不上传
  • 免费,无次数限制
  • 放大镜精准取色 + 一键复制

上手路径

最短路径 · 图片取色

不需要安装任何软件,全程在网页里完成,放大镜辅助精准定位。

  1. 1

    上传图片

    点击选择或直接把图片拖进网页,支持 JPG、PNG、WebP、GIF,单张不超过 20MB,每次只处理一张。

  2. 2

    移动鼠标或手指定位

    在图片上移动光标,放大镜实时显示周围放大后的像素,红框标出即将拾取的具体位置。

  3. 3

    点击拾取颜色

    在目标位置点击或松开手指即可拾取颜色,立即显示 HEX、RGB、HSL 三种格式数值。

  4. 4

    复制颜色值

    点击对应格式旁的复制按钮,把颜色值复制到剪贴板粘贴使用。

疑难排查

取色器支持批量处理吗?

取色器是点击读取像素颜色值的交互式查看功能,本身不产生任何导出文件,也就没有「批量」的概念——不管上传的图片有多大,你都是逐个点击具体位置来读取颜色,所以这个工具只支持单张图片上传,不提供批量模式。

取色是在我的电脑或手机上完成的,还是要上传到服务器?

完全在你当前设备的浏览器里完成,借助浏览器原生的 Canvas 像素读取能力直接从图片数据里读出对应位置的颜色数值,全程不会把原图上传到任何服务器。

为什么放大镜里看到的颜色,和最终拾取到的颜色可能有细微差别?

放大镜里显示的是光标当前悬停位置周围一小块区域放大后的效果,实际拾取的是红色方框标出的那一个具体像素的颜色;如果图片本身有渐变或噪点,紧邻的像素颜色会有细微差异,只要以红色方框标出的像素为准点击拾取,颜色就是精确对应的,不会有偏差。

拾取到的颜色历史记录会保存吗,刷新页面后还在吗?

拾取历史只保存在当前页面的浏览器内存里,方便你在同一次操作中对比多个拾取过的颜色,刷新页面或关闭页面后历史记录会清空,不会永久保存或上传,如果需要长期保留某个颜色值,建议先复制粘贴到你自己的笔记或设计工具里。

HEX、RGB、HSL 三种颜色格式应该用哪个?

HEX(如 #FF3B30)是网页开发和大多数设计工具里最常用的格式,简洁且容易粘贴使用;RGB(如 rgb(255, 59, 48))在需要单独调整红绿蓝三个通道数值时更直观;HSL(如 hsl(4, 100%, 59%))按色相、饱和度、明度描述颜色,在需要在同一色相基础上调深浅或饱和度时更方便。三种格式描述的是同一个颜色,按你实际要粘贴到的工具或代码选择对应格式即可。

取色的精度如何,能读到图片的真实原始颜色吗?

可以。取色器读取的是图片解码后的原始像素数据,不受页面显示大小影响——即使图片在页面上被缩小展示,拾取时依然是按图片本身的真实分辨率精确读取对应位置的像素颜色,不会因为缩放显示而产生颜色偏差。

  • 原图不进我们的服务器

    取色和像素读取全程在浏览器本地完成,图片不会经过任何服务器

  • 放大镜精准定位

    悬停时实时放大显示光标周围像素,红框标出即将拾取的具体像素

  • 三种格式一键复制

    HEX、RGB、HSL 同时显示,点击复制按钮直接粘贴到设计工具或代码里

  • 不开号也能反复导出

    不用注册、不用付费,也没有隐藏的使用次数限制

适用情境

这些情况打开本页通常更省事

不是功能清单,而是「什么时候值得拖一张图上来」。对不上号就换工具,别硬用。

从设计稿/网页截图提取品牌色

看到喜欢的网站配色或品牌视觉,截图上传后直接点击关键色块,拿到精确的 HEX 值用于自己的设计或代码。

从照片提取自然色调用于配色

从一张风景或人像照片里提取天空、皮肤、植物等自然色调,作为设计方案或插画配色的参考基准。

核对设计图与开发实现的颜色是否一致

开发还原设计稿时,分别在设计图截图和实际页面截图上取色对比 HEX 值,快速确认颜色是否还原准确,不用肉眼猜测。

颜色格式

HEX、RGB、HSL 三种格式速查表

同一个颜色的三种不同描述方式,根据要粘贴使用的场景选择对应格式。

格式写法示例常见使用场景
HEX#FF3B30网页 CSS、大多数设计工具(如 Figma、Photoshop)的颜色输入框
RGBrgb(255, 59, 48)需要单独查看或调整红、绿、蓝三个通道数值的场景
HSLhsl(4, 100%, 59%)按色相、饱和度、明度描述,方便在同一色相上调深浅或饱和度

三种格式描述的是完全相同的颜色,只是数值表示方式不同;页面上每种格式都可以一键复制,直接粘贴到你使用的设计工具或代码编辑器里即可。

技术说明

关于本地取色,这两点值得了解

  1. 01

    读取的是图片真实分辨率下的原始像素

    图片会先在浏览器里解码并绘制到一个和原图分辨率完全一致的画布上,页面上看到的只是这个画布缩小显示的效果;点击拾取颜色时,会按显示位置换算回画布的真实像素坐标读取颜色,所以不管图片在页面上显示得多小,取色精度始终对应图片的原始分辨率,不会因为缩放显示而失真。

  2. 02

    为什么取色器不支持批量处理,也不产生下载文件

    取色器的功能是「点击读取一个像素的颜色值」,是纯交互式的查看工具,本身不会生成任何需要下载的图片文件,自然也不存在「多张图片各自处理出多个结果」的批量语义;如果需要从多张图片分别取色,直接依次上传逐张查看即可,每次切换图片会清空当前的拾取历史。

文件还在你这边,直接拖一张试试

不用开号。满意再批量,不满意就换参数重来。