图片配色提取

示例：《千里江山图》局部

故宫博物院介绍，北宋王希孟的《千里江山图》卷为绢本设色，承袭「青绿法」，以石青、石绿等矿物颜料为主。上图是维基共享资源上公有领域局部图的 512 像素副本。设为 6 种颜色、聚类平均色，结果是：

#645736 26.0%、#8A7543 23.2%、#73663D 17.6%、#74744D 17.3%、#48432B 8.5%、#4E6769 7.0%。

画面大部分是泛黄的绢底，青绿只剩下 #4E6769 这一种灰青色，占 7.0%。这说明提取的是这张扫描图的颜色，不是颜料本身的颜色：九百多年的绢色、扫描时的白平衡都会写进结果。想做「青绿」风格的配色，可以点这张色卡的色阶，在色阶生成器里得到更亮、更饱和的同色相阶梯。

关掉突出鲜艳的点缀色后，聚类只看面积，青绿分到一个更暗的组：#8B7542 28.3%、#73633B 24.0%、#6B5B34 20.6%、#645533 16.0%、#53645B 5.7%、#4C442B 5.2%（最常见的色调）。

示例：透明背景的 Logo

电商主图、App 图标常用透明背景的 PNG。这张 400 × 400 的 PNG 只有红色圆 #E11D48 和黄色圆心 #FACC15。设为 2 种颜色：#E11D48 82.6%、#FACC15 17.3%，状态栏注明 71.4% 的像素透明、不计入。

设为 6 种颜色时，多出来的 4 种是抗锯齿边缘上红黄之间的过渡色，例如 #E43342 0.2%。它们确实存在于图中，但占比很小；看到这类不到 1% 的颜色，把颜色数调低即可。

计算方法

• 采样：不超过 262,144 像素的图片逐像素统计；更大的图缩小读取，且不做平滑，每个样本都是原图里的真实像素，边缘不会混出原图没有的颜色。
• 颜色组：每通道 32 级（每级含 256 个取值中的 8 个），共 32,768 组，与 Color Thief 的中值切割相同精度。像素按不透明度计权。
• 聚类：在 OKLab 中做加权 k-means，直线距离对应看上去的色差。种子按固定顺序选取，没有随机步骤。开启「突出鲜艳的点缀色」时，色相与彩度的差按两倍计算，小面积的饱和色能单独成组。
• 合并：相距小于 0.02 的聚类合并，0.02 是 CSS Color 4 色域映射采用的最小可察觉差。

导出与调色板文件

代码导出按屏幕顺序把颜色命名为 palette-1 到 palette-n，并把占比写在注释里。色值可选 HEX、rgb()、hsl()、oklch()，小数位刚好能换算回同一个 8 位颜色。上面的局部图导出为 CSS 变量：

:root {
--palette-1: #645736; /* 26.0% */
--palette-2: #8A7543; /* 23.2% */
--palette-3: #73663D; /* 17.6% */
--palette-4: #74744D; /* 17.3% */
--palette-5: #48432B; /* 8.5% */
--palette-6: #4E6769; /* 7.0% */
}

.gpl 文件可在 GIMP、Inkscape（放进调色板目录）与 Krita 中使用；.ase 文件可载入 Illustrator、Photoshop 与 InDesign 的色板。

与同类工具对比

2026 年 10 月 2 日实测：

• 256-tools 的图片配色提取同样显示占比，同一张图两次结果相同。但它读取的是缩小并平滑过的图：一张由 #1E3A8A、#F8FAFC、#F97316 三色组成的横幅（面积 72% / 25% / 3%），给出 71.2% / 24.2% / 3%，另加两个原图中没有的混合色 #475E9F 与 #CFD6E7（各 0.8%）。本工具对同一张图给出准确的三色与 72.0% / 25.0% / 3.0%。
• Color Thief 2.7.0（npm）对这张横幅取到三种原色，但不给占比。node-vibrant 4.0.4 按「鲜艳、柔和」等 6 个角色分类，颜色由 5 位分组还原，海军蓝变成 #1C3C8C。

限制

• 超过 262,144 像素的图片会抽样，只有几个像素大的细节可能漏掉。
• 「最常见的色调」只有在一种颜色占其颜色组一半以上时才是精确原色，否则是该组的平均色。
• 超出 sRGB 的颜色（如 Display P3 照片）按 sRGB 截取。色板显示后，工具会以 Display P3 再读一遍同样的采样像素，状态栏给出完全不透明像素中超出 sRGB 的比例。浏览器支持 OffscreenCanvas 时，打开的文件在后台 Worker 中解码和检查，大照片转换到 Display P3 的工作不在页面线程上进行（提示可能比色板晚几秒出现）；示例插画和 SVG 文件在页面中按每次 16 行分段读取。浏览器不能按 Display P3 绘制时，状态栏会说明无法检查。
• 动图 GIF 只取第一帧。HEIC 只有 Safari 能打开，相机 RAW 需先转换。

只想取某一个像素的颜色，请用取色器；想看配色在色觉障碍者眼中的样子，可放进色盲模拟器，文字可读性用颜色对比度检测器。