Token导航 LogoToken导航

图片拾色 · 本地处理 · HEX / RGB / HSL

图片取色器 拾色器

选择本地图片后在预览图上点击取色,实时输出 HEX、RGB 和 HSL 色值,图片只在浏览器本地处理,不上传服务器。

点击拾取颜色

选择本地图片后在预览图上点击任意位置,即可拾取该点颜色。

三种格式同步输出

同屏查看 HEX、RGB 和 HSL 色值,便于设计、前端和配色记录复用。

图片不上传服务器

文件读取、Canvas 预览和像素采样全部在浏览器本地完成。

图片取色 · 浏览器本地处理

图片取色器

从本地图片中点击提取颜色,输出 HEX、RGB 和 HSL,适合设计取样和品牌色复核。图片不会上传服务器。

#000000

HEX

#000000

RGB

rgb(0, 0, 0)

HSL

hsl(0, 0%, 0%)

处理方式

本地

HEX:#000000

RGB:rgb(0, 0, 0)

HSL:hsl(0, 0%, 0%)

请选择图片开始取色。
选择本地图片后点击预览图即可取色,不上传服务器。

工具使用说明

怎么用图片取色器/拾色器

1

上传图片

选择需要拾色的本地图片、截图、界面图或海报。

2

点击拾色

把鼠标移到目标区域并点击,页面会读取该像素对应色值。

3

使用色值

把 HEX、RGB 或 HSL 复制到 CSS、设计工具或品牌色记录里。

功能说明

这个工具解决什么问题

图片取色器/拾色器能做什么

选择本地图片后在预览图上点击取色,实时输出 HEX、RGB 和 HSL 色值,图片只在浏览器本地处理,不上传服务器。

它适合从图片里快速确认主色、辅助色、按钮色、背景色和品牌色。

为什么默认本地拾色

浏览器 Canvas 可以直接读取图片像素,因此不需要服务端上传或第三方接口。

本地处理能减少隐私风险,尤其适合内部设计稿、截图和未公开素材。

常见问题

关于图片取色器/拾色器,用户常问这些

图片会上传服务器吗?

不会。图片只在当前浏览器读取和取色,本站不会保存图片。

取色结果有哪些格式?

当前输出 HEX、RGB 和 HSL,覆盖常见设计和前端使用场景。

能从 Logo 图片取品牌色吗?

可以,上传 Logo 后点击目标区域即可得到对应颜色。

为什么点击边缘区域颜色可能不一样?

图片边缘常有抗锯齿和半透明混合像素,建议放大后多点几次确认。