图片主色调提取
用简化 k-means（k=5）在缩小后的画布上提取图片主色调，显示每个颜色的占比与 HEX/RGB，可复制 CSS 变量或下载调色板图片。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
图片只在浏览器本地处理，不会上传
采样时先把图片缩到 100×100，再用 k-means 迭代 10 次聚类，结果可复现。
先选择一张图片
选择图片后，这里会给出主色调、占比与 CSS 变量。
这个工具能做什么
- 从截图或海报里提炼配色：k-means 聚成 3/5/8 个主色，按占比排序，一眼看出画面的主要色调。
- 把主色直接搬进设计系统：一键复制 CSS 变量（--color-1: #RRGGBB;）粘贴到样式表里。
- 做品牌色调研时下载调色板 PNG，色条宽度按占比分配，可以放进汇报文档当参考图。
- 给前端项目挑占位色、骨架屏颜色、图表配色：先用真实图片提取，比凭感觉选更协调。
示例
输入
一张只有两种颜色的图片：8 个纯红像素（#FF0000）+ 4 个纯蓝像素（#0000FF）
输出
--color-1: #FF0000; // 占比 66.7% --color-2: #0000FF; // 占比 33.3%
这是纯逻辑层的真实结果：k=2、迭代 10 次、固定种子 42，所以同样的像素输入每次都会得到同样的颜色与占比。界面默认 k=5 并先把图片缩到 100×100 再采样，颜色数量和采样尺寸都会影响最终结果。
常见问题
为什么每次提取的配色都一样，换个工具却不同？
因为这里用固定种子（42）的 k-means++ 初始化，结果可复现；很多工具用随机初始化，同一张图跑两次可能给出不同的簇。代价是极端情况下固定种子可能落在不太理想的初始点上，想要别的结果可以换颜色数量（3/5/8）再试。
为什么透明区域不参与统计？
采样时 alpha 低于 128 的像素会被跳过，否则透明区域的 RGB 值（通常是 0,0,0）会把主色带偏。如果整张图都是透明像素，工具会提示「没有不透明像素，无法提取主色调」。
提取出来的颜色是图片里真实存在的颜色吗？
不完全是。每个簇的最终颜色是该簇所有像素的算术平均，所以可能是一个「介于两者之间」的颜色；同色像素足够多时（比如纯色块）就正好等于原色。想要像素级精确的某个颜色，请用图片取色器。
调色板里的占比之和为什么不是 100%？
占比按「落到该簇的不透明像素数 ÷ 有效像素总数」计算并四舍五入到 0.1%，所以显示值的和可能有零点几的偏差。空簇会被直接丢弃，因此实际返回的颜色数可能少于设定的 k（例如图片本身只有两种颜色时）。
图片会被上传吗？
不会。缩放、采样与聚类都在浏览器里用 canvas 和纯 JavaScript 完成，页面没有任何上传接口，图片内容也不会被保存。
关键词：主色调配色提取dominant colorscolor palettek-means调色板取色css 变量