这个工具做什么
主色调提取把一张图片压缩成一小块「颜色名片」:占比最高的若干种颜色,按出现比例排序,给出 hex 与 RGB 值。做 UI 配色找灵感、给幻灯片挑背景、为宣传图定基调时,比肉眼从图里挑色快得多,也客观得多。
常见的取色器只告诉你「鼠标指的那一个像素」,而本工具统计的是全图像素分布——一颗 1% 的像素噪声不会混进结果。输出支持一键复制 hex,也可下载 JSON 留档。全程本地计算。
如何使用
- 拖入图片 PNG / JPG / WebP 均可。色彩简单的图标、海报效果最好;照片颜色过渡丰富,取出的色板更像「氛围概括」。
- 调整颜色数量 默认取 6 种(3–10 可调)。相近的颜色会先合并再排序,所以数量少时结果依然「点得开」,不会出现一排近似的蓝。
- 点击复制,下载留档 点色块即复制 #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。