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

在线取色器,从图片精确提取 HEX/RGB/HSL 颜色值

上传一张图片,移动鼠标或手指在图片上定位,放大镜实时显示光标周围放大后的像素辅助精准取景,点击即可拾取该位置的颜色,立即显示 HEX、RGB、HSL 三种格式并一键复制,还会自动记录拾取历史方便对比查看——全程在浏览器本地完成,不上传服务器。

3颜色格式(HEX/RGB/HSL)
20MB单张图片上限
0需要安装的软件

不上传服务器

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

放大镜精准定位

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

三种格式一键复制

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

免费不限次

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

典型场景

三个最常见的取色需求,一个工具都能解决

不管是提取品牌色、参考照片配色,还是核对开发实现,点击图片就能拿到精确颜色值。

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

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

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

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

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

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

颜色格式

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

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

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

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

使用方法

四步完成图片取色

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

  1. 1

    上传图片

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

  2. 2

    移动鼠标或手指定位

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

  3. 3

    点击拾取颜色

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

  4. 4

    复制颜色值

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

技术说明

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

01

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

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

02

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

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

常见问题

关于在线取色器,大家常问的问题

取色器支持批量处理吗?

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

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

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

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

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

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

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

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

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

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

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

现在就上传,几秒钟提取精确颜色值

不用注册,不用等待,点击即可复制使用。