Token导航 LogoToken导航

图像配色 · 主色提取 · 本地分析

图像 配色

上传本地图片后提取主色并生成可复制的配色方案,图片只在浏览器本地分析。

提取图片主色

上传图片后在浏览器本地统计主要颜色,生成可复制的 HEX 色值。

色板数量可调

可按需求提取 3 到 10 个颜色,适合设计稿起色、封面配色和品牌素材整理。

本地分析不上传

图片像素只在浏览器本地分析,不上传服务器,也不依赖第三方取色接口。

Image Palette · 浏览器本地分析

图像配色

上传本地图片后提取主色,生成可复制的 HEX 配色板。图片像素只在浏览器本地分析,不会上传服务器。

原图尺寸

--

原图大小

--

主色数量

--

处理方式

浏览器本地

适合从海报、产品图、封面图中快速拿到第一版配色参考。
请选择图片开始提取配色。
选择图片后本地提取主色,不上传服务器。

工具使用说明

怎么用图像配色

1

上传参考图片

选择海报、产品图、封面图或截图作为配色来源。

2

设置提取数量

根据配色复杂度选择需要提取的主色数量,页面会自动刷新色板。

3

复制色值

点击单个色块复制 HEX,或一键复制整组色值用于 CSS、设计稿和组件变量。

功能说明

这个工具解决什么问题

从图片快速建立配色

图像配色适合从视觉参考中提取第一版主色,减少手工取色和反复截图的时间。

提取结果适合做起稿参考,最终品牌色仍建议人工微调。

敏感图片默认本地分析

产品图、客户图和未发布设计稿不适合上传到外部服务。

这页直接在浏览器里读取像素并生成色板,不会把图片发送到服务器。

常见问题

关于图像配色,用户常问这些

图像配色会上传图片吗?

不会。图片只在浏览器本地分析,不会上传 tokendh.com 服务器。

提取的颜色为什么和肉眼看到的不完全一样?

工具会对颜色做分桶统计,得到的是主要色彩趋势,不是逐像素精确取色。

色值能直接用于 CSS 吗?

可以。复制出的 HEX 色值可直接用于 CSS、设计变量和设计稿标注。

能提取透明图片的颜色吗?

浏览器能读取的透明 PNG 可以提取,但透明区域可能影响统计,建议先裁掉无关留白。