调色板提取器

调色板提取器可以从一张图片里自动找出出现得最多的几种颜色,并以色块加十六进制色值(例如 #F07848)的形式列出来,点一下色块就能复制色值。它适合在做海报、PPT、网页配色时,想快速了解一张参考图的整体色调。需要先说清楚它不做的事:它不能指定提取几种颜色(固定最多 6 种),不会输出 RGB、HSL 或 CSS 变量,也不会判断哪些颜色「搭配起来好看」,它只是统计各种颜色出现的频率。

操作步骤

1. 点击页面中间的虚线上传区(显示「点击或拖拽图片到这里上传」),在文件选择框里挑一张图片;也可以直接把图片文件拖进这个区域。
2. 图片读取完成后,上传区会显示图片预览,下方随即出现标题为「提取出的主色调(点击可复制)」的一排色块,每个色块上写着它的十六进制色值。
3. 点击任意一个色块,该色值会被复制到剪贴板,色块上的图标会短暂变成对勾,约 1 秒后恢复。
4. 想换一张图,再次点击上传区选择新文件即可,结果会自动刷新,不需要手动清空。

一个按真实代码算出来的例子

为了说明色值是怎么得出来的,我们把工具的统计逻辑单独拿出来,用一组构造的像素数据跑了一遍:4000 个像素为 RGB(250,120,60),3000 个为 RGB(20,30,40),1500 个为纯白 RGB(255,255,255),1000 个为 RGB(245,125,55),另有 500 个透明度只有 100 的半透明绿色像素。实际输出依次是:#F07848(4000 个)、#181830(3000 个)、#FFFFFF(1500 个)、#F07830(1000 个),一共只有 4 种,半透明的那 500 个像素被直接忽略了。这里有三点值得注意:第一,#F07848 并不等于原始的 RGB(250,120,60),因为工具先把每个通道按 24 为步长取整再统计,所以显示的是「归并后」的颜色,与原图某个像素的精确值通常有细微差别;第二,RGB(245,125,55) 因为取整后蓝色通道落在了不同的档位,被当成另一种颜色 #F07830 单独列出,肉眼看它与第一个橙色几乎一样;第三,当图片里归并后的颜色种类不足 6 种时,色块数量就会少于 6。如果你需要某个位置的精确色值,应该用站内的「图片取色器」去点那个像素。

支持范围与已知限制

• 只接受浏览器识别为图片的文件(文件类型以 image/ 开头),选了别的文件类型不会有任何提示,界面也不会变化。
• 分析前图片会被缩放到 100×100 像素的小图再统计,速度很快,但图片里极小的细节或很小面积的点缀色可能因此被忽略。
• 颜色以 24 为步长归并,输出的是归并后的近似色值,不是原图中某个像素的精确值;相近的颜色有时仍会因为落在不同档位而分成两个色块,调色板里可能出现几乎一样的两种颜色。
• 完全透明或半透明(透明度低于约一半)的像素不参与统计,所以带透明背景的 PNG 不会把透明区域算成颜色。
• 大面积的白色或黑色背景同样是「一种颜色」,会占据一个色块,并不会被自动排除。
• 色块上文字的深浅只根据红色通道的数值来判断,个别颜色(例如高亮绿色)上的文字可能不够清晰,但不影响色值本身。
• 复制依赖浏览器剪贴板权限,如果浏览器拒绝,点击后不会有提示,此时可以手动抄下色块上的色值。
• 固定提取最多 6 种颜色,不能调整数量,也不能导出整套色板文件。

常见问题:为什么我用取色软件测到的色值和这里不一样?

因为这里输出的是归并后的近似色。工具会把 0 到 255 的每个颜色通道按 24 的步长四舍五入,所以结果的每个通道都是 24 的整数倍(超过 255 的部分会被截到 255,例如纯白会得到 #FFFFFF)。它的目标是回答「这张图大体是什么颜色」,而不是还原某个像素。要精确色值,请用能点选像素的取色工具。

常见问题:为什么提取出的颜色少于 6 种,或者有两个颜色看起来很像?

色块数量取决于图片归并后一共有多少种颜色,图片色彩单一时可能只有几种。至于相似色重复出现,是因为归并是按固定档位切分的,处在档位边界两侧的相近颜色会被算成两种。遇到这种情况,选其中一个使用即可。

常见问题:图片很大会不会卡?

不会因为分辨率而明显变慢,因为统计前已经缩小到 100×100。不过读取一个非常大的图片文件仍要占用浏览器内存,如果页面反应迟钝,可以先把图片压缩一下再上传。

常见问题:提取出的颜色可以直接商用吗?

颜色值本身只是数字,但图片本身可能有版权。从别人的作品里提取配色用于参考通常没有问题,是否可以把原图或其高度近似的配色用于商业用途,需要你自己根据图片来源和使用场景判断。

隐私与处理方式

图片通过浏览器自带的文件读取功能载入,绘制到页面内部的画布上统计颜色,全部在你的浏览器里完成。从代码看,这个工具没有任何上传图片的网络请求,也不会保存你的图片。刷新或关闭页面后,图片和提取结果都不会保留。