图片主色调提取

什么是图片调色板提取器？#

每一张图都自带一小撮真正在起作用的颜色——logo 的品牌蓝、产品图的暖中性色、插画的双色调。调色板提取器就是把这些代表性颜色自动抽出来，让你能复用：搭一套配套的界面主题、挑一个不撞色的按钮色、生成 CSS 变量、或者只是搞清楚这张图里到底哪些色块占主导，而不是你眼睛以为重要的那些。

本页在浏览器内运行 median-cut（中位切分）颜色量化。载入图片后，它先缩小到一个便于采样的尺寸，逐像素读取，然后算法反复沿着最宽的颜色通道做切分，直到凑出你指定的 Top-N（2–16）个色样。每个色样都会带上它在这张图里的占比，另外还单独给出全部像素的算术平均色，可导出为 HEX 列表、CSS 变量文件或结构化 JSON。

怎么使用#

1. 把图片拖到虚线 拖放区（或点一下选文件）。PNG、JPEG、WebP 都行；带透明通道的 PNG 会被正确处理，因为透明像素在计数前就先跳过了。
2. 拖 Top N 滑块（2–16）决定要抽几个代表色。6 是兼顾平衡的默认值；2 或 3 能把最主导的那对色孤立出来。
3. 看右侧的 色样列表：每一行展示颜色、它的 HEX/RGB/HSL 值，以及落在该桶里的采样像素百分比，按主导程度从高到低排。点哪个值就复制哪个。
4. 侧栏的 平均色 卡片给出全部像素的算术平均——当你想要一个整体背景调、而不是一份排名时用它。
5. 选 下载格式：
   • HEX 列表（.txt） —— 每行一个 #RRGGBB，主导色在前，可直接粘进设计工具。
   • CSS 变量（.css） —— 一个 :root { --palette-1: …; …; --palette-avg: …; } 块，能直接塞进样式表。
   • JSON（.json） —— 结构化色样，含 hex、rgb、count、share，外加平均色和采样元信息。
6. 点 下载 存盘。

主要特性#

• 自研 median-cut 量化。 专业图像工具同族的算法，在你这个标签页里跑：沿最宽通道在中位数处切一刀，反复在当前最宽的色盒上切，直到凑够你要的数量。
• 诚实的占比数字。 每个色样都带真实采样像素占比，所谓”主导”是按面积算的主导，不是凭感觉。
• 平均色与主导色分开。 像素算术平均单独报告，和排名榜单并列——一趟回答两个不同的问题。
• 透明像素跳过。 alpha 低于一个小阈值的像素不计入，所以带透明的 PNG 报的是真正画上去的颜色，而不是一摊和透明度搅在一起的浑浊色。
• 三种导出形态。 给设计工具的 HEX 列表、给样式表的 CSS 变量、给程序的 JSON——都从你眼前这套色样生成。
• 100% 本地。 浏览器解码、浏览器采样，不上传。

实例演示#

丢一张品牌 logo 进来——深品牌蓝铺在白底上、带一点小点缀，假设蓝色占了画布约 60%。Top N 设成 4，一次典型抽取长这样：

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

主导色样是品牌蓝，约 58%，白色其次。注意还多出来两个蓝——一个更深的暗调、一个更浅的色调——是算法因为它们跨过了中位切分边界而找出来的，这恰好就是你会拿去做悬停态和阴影色的那几个。导出成 CSS 变量，你拿到一个即插即用的主题：

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg 是全部像素的算术平均——一个偏品牌调的柔和中蓝，很适合做带品牌倾向的页面底色。

常见问题#

百分比加起来不正好是 100%。#

显示时做了四舍五入（底层数值在 JSON 导出里精确到四位小数）。还有一小部分残差来自计数前先跳过了透明像素，所以总和反映的是真正被采样的不透明像素。

抽出来的色样比我要的少。#

median cut 在所有剩余色盒都已成纯色（三通道范围都为 0）时会提前停下——确实没什么可切了。在一张只有 3 色的图上要 8 个色样，返回的是 3 个，而不是硬凑出 8 个。

平均色跟主导色差这么多？#

它们回答的是不同的问题。主导色是出现频率最高的那个桶；平均色是每个像素的算术平均，几个面积不小但颜色不同的区域会把均值从最高频的值拉开。一张半红半绿的图，平均色是偏褐的、但没有任何一个主导色是褐色——两个值都对。

只能处理纯色图形，还是照片也行？#

都行。纯色图形给出干净、分得开的色样；照片因为有真实的连续色调，会给出一组更有层次的色阶。照片的话把 Top N 调到 8–12，才能抓全更丰富的范围。