提取图片主色调

在线提取图片的主色调:分桶统计像素并按占比输出 Top 色板(hex + RGB),适合 UI 配色参考与快速取色。浏览器内完成,图片不上传。

文件不上传 .png、.jpg、.jpeg、.webp 单文件最大 50MB
拖入图片提取主色调
支持 .png、.jpg、.jpeg、.webp · 单文件最大 50MB

参数

输出占比最高的 N 种颜色(同色系会先合并)。

这个工具做什么

主色调提取把一张图片压缩成一小块「颜色名片」:占比最高的若干种颜色,按出现比例排序,给出 hex 与 RGB 值。做 UI 配色找灵感、给幻灯片挑背景、为宣传图定基调时,比肉眼从图里挑色快得多,也客观得多。

常见的取色器只告诉你「鼠标指的那一个像素」,而本工具统计的是全图像素分布——一颗 1% 的像素噪声不会混进结果。输出支持一键复制 hex,也可下载 JSON 留档。全程本地计算。

如何使用

  1. 拖入图片 PNG / JPG / WebP 均可。色彩简单的图标、海报效果最好;照片颜色过渡丰富,取出的色板更像「氛围概括」。
  2. 调整颜色数量 默认取 6 种(3–10 可调)。相近的颜色会先合并再排序,所以数量少时结果依然「点得开」,不会出现一排近似的蓝。
  3. 点击复制,下载留档 点色块即复制 #hex;「下载 JSON」保存完整调色板(含 RGB 与占比),方便后续脚本处理。

常见问题

为什么结果里没有我想找的那个颜色?

占比排序只保留最多的颜色:面积很小的点缀色(logo 上的高亮、按钮色)可能排不进前 N。把颜色数量调大,或先裁剪出那块区域再取。

照片和图标的效果差很多?

照片色彩连续过渡,量化桶会摊薄每种颜色;图标色块平坦,结果干净利落。对照片,把数量调到 8–10 更有参考价值。

占比能当成 UI 配色权重吗?

可以,占比之和恒为 1。常见做法:最高占比色做背景、次高做正文反色、低占比做点缀——与「60-30-10 法则」思路一致。

两个很像的颜色会不会重复出现?

不会。合并规则会跳过与已选色距离小于 64(RGB 欧氏距离)的桶,输出保证彼此拉开。

超大图片会卡吗?

统计是 O(像素数) 的单次遍历,且在 Worker 内进行;2000 万像素级别也在数秒内完成,页面不会卡死。

图片会被上传吗?

不会。解码与统计都在浏览器 Worker 内完成,文件不出设备。

限制与边界

量化基于 RGB 4bit/通道(4096 桶),不是感知均匀色彩空间;渐变丰富的照片可能合并相近色。

输出 3–10 种颜色;占比之和恒为 1(透明像素不计)。

只做统计取色:不做基于调色板的图片重着色。单文件最大 50MB。

相关工具