图片主色调提取

选择一张本地图片,工具会在浏览器中读取像素并量化出占比最高的主色调,输出 HEX、RGB 与占比。图片仅在本机解析,不会上传服务器。

选择图片 等待选择
点击选择或拖拽图片到此处
支持 PNG / JPG / WEBP / GIF 等浏览器可解析的图片格式,图片仅本地读取。

为控制计算量,分析时会先把图片等比缩放到最长边 240 像素再采样像素,因此提取结果与原始像素统计可能存在细微差异。

主色调结果
采样像素 —
主色数量 —
图片尺寸 —
处理耗时 —
选择图片后,主色调将显示在这里。

提取结果基于像素分桶统计,受缩放采样影响,结果仅供参考。

处理规则
  • 图片通过 FileReader 读为 Data URL 后绘制到 canvas,全程在浏览器本地完成,不会上传服务器。
  • 分析前将图片等比缩放到最长边 240 像素,以控制大图的取像素开销。
  • 把每个像素的 R/G/B 各取高 3 位(0–7)划分为 8×8×8 的色块桶,统计各桶像素数量。
  • 每个色块的颜色取该桶内像素的算术平均值,占比为该桶像素数除以采样像素总数。
  • 按桶内像素数从多到少排序,取前 N 个作为主色调;数量相同时按首次出现顺序排列。
  • 「忽略全透明像素」可排除 alpha 为 0 的像素,避免透明背景影响统计。
  • 提取结果为像素统计近似值,受缩放采样与色块划分影响,结果仅供参考。