从设计稿/网页截图提取品牌色
看到喜欢的网站配色或品牌视觉,截图上传后直接点击关键色块,拿到精确的 HEX 值用于自己的设计或代码。
点击或拖动图片上任意位置拾取颜色
点击图片拾取颜色后,会记录在这里方便再次查看和对比
取色和像素读取全程在浏览器本地完成,图片不会经过任何服务器
悬停时实时放大显示光标周围像素,红框标出即将拾取的具体像素
HEX、RGB、HSL 同时显示,点击复制按钮直接粘贴到设计工具或代码里
不用注册、不用付费,也没有隐藏的使用次数限制
典型场景
不管是提取品牌色、参考照片配色,还是核对开发实现,点击图片就能拿到精确颜色值。
颜色格式
同一个颜色的三种不同描述方式,根据要粘贴使用的场景选择对应格式。
| 格式 | 写法示例 | 常见使用场景 |
|---|---|---|
| HEX | #FF3B30 | 网页 CSS、大多数设计工具(如 Figma、Photoshop)的颜色输入框 |
| RGB | rgb(255, 59, 48) | 需要单独查看或调整红、绿、蓝三个通道数值的场景 |
| HSL | hsl(4, 100%, 59%) | 按色相、饱和度、明度描述,方便在同一色相上调深浅或饱和度 |
三种格式描述的是完全相同的颜色,只是数值表示方式不同;页面上每种格式都可以一键复制,直接粘贴到你使用的设计工具或代码编辑器里即可。
使用方法
不需要安装任何软件,全程在网页里完成,放大镜辅助精准定位。
点击选择或直接把图片拖进网页,支持 JPG、PNG、WebP、GIF,单张不超过 20MB,每次只处理一张。
在图片上移动光标,放大镜实时显示周围放大后的像素,红框标出即将拾取的具体位置。
在目标位置点击或松开手指即可拾取颜色,立即显示 HEX、RGB、HSL 三种格式数值。
点击对应格式旁的复制按钮,把颜色值复制到剪贴板粘贴使用。
技术说明
图片会先在浏览器里解码并绘制到一个和原图分辨率完全一致的画布上,页面上看到的只是这个画布缩小显示的效果;点击拾取颜色时,会按显示位置换算回画布的真实像素坐标读取颜色,所以不管图片在页面上显示得多小,取色精度始终对应图片的原始分辨率,不会因为缩放显示而失真。
取色器的功能是「点击读取一个像素的颜色值」,是纯交互式的查看工具,本身不会生成任何需要下载的图片文件,自然也不存在「多张图片各自处理出多个结果」的批量语义;如果需要从多张图片分别取色,直接依次上传逐张查看即可,每次切换图片会清空当前的拾取历史。
常见问题
取色器是点击读取像素颜色值的交互式查看功能,本身不产生任何导出文件,也就没有「批量」的概念——不管上传的图片有多大,你都是逐个点击具体位置来读取颜色,所以这个工具只支持单张图片上传,不提供批量模式。
完全在你当前设备的浏览器里完成,借助浏览器原生的 Canvas 像素读取能力直接从图片数据里读出对应位置的颜色数值,全程不会把原图上传到任何服务器。
放大镜里显示的是光标当前悬停位置周围一小块区域放大后的效果,实际拾取的是红色方框标出的那一个具体像素的颜色;如果图片本身有渐变或噪点,紧邻的像素颜色会有细微差异,只要以红色方框标出的像素为准点击拾取,颜色就是精确对应的,不会有偏差。
拾取历史只保存在当前页面的浏览器内存里,方便你在同一次操作中对比多个拾取过的颜色,刷新页面或关闭页面后历史记录会清空,不会永久保存或上传,如果需要长期保留某个颜色值,建议先复制粘贴到你自己的笔记或设计工具里。
HEX(如 #FF3B30)是网页开发和大多数设计工具里最常用的格式,简洁且容易粘贴使用;RGB(如 rgb(255, 59, 48))在需要单独调整红绿蓝三个通道数值时更直观;HSL(如 hsl(4, 100%, 59%))按色相、饱和度、明度描述颜色,在需要在同一色相基础上调深浅或饱和度时更方便。三种格式描述的是同一个颜色,按你实际要粘贴到的工具或代码选择对应格式即可。
可以。取色器读取的是图片解码后的原始像素数据,不受页面显示大小影响——即使图片在页面上被缩小展示,拾取时依然是按图片本身的真实分辨率精确读取对应位置的像素颜色,不会因为缩放显示而产生颜色偏差。