选择一张图片，先在浏览器本地缩样，再用自实现的中位切分（Median Cut）算法提取 5、8 或 12 个主色，点击色块复制 HEX，可一键导出为 CSS 变量；图片不上传，全程本地运行。
它能帮你做什么
做海报、设计页面、给 PPT 定主色时，常常想从一张参考图里抓出一套协调的颜色。图片取色·主题色提取就是把图里最有代表性的几种颜色聚出来，直接拿到它们的十六进制值，省去一个个手动吸色的麻烦。
中位切分是怎么提取的
图片先画到本地 Canvas，并缩到最长边不超过 200 像素以加快处理，然后统计像素在 RGB 色彩空间里的分布：中位切分（Median Cut）反复沿「颜色跨度最大」的那一轴，把像素桶从中间（按数量而非按范围）劈开，直到切出足够多的桶，每个桶取平均色作为一个代表色。这种算法对「主体明确、色块清晰」的图效果最好；它按像素数量聚类，所以占比大的颜色更容易被选为主色。
选几个颜色、怎么复制
可选 5、8 或 12 个主色，数量越多越能覆盖次要色，但也可能出现彼此接近的近似色。每个色块点击即复制其 HEX 值。小图或大面积渐变的图，结果容易相近，建议先裁剪出主体区域再提取。
导出 CSS 变量
「导出 CSS」会生成形如 :root{--c1:#9a3412;--c2:#…} 的 CSS 自定义属性，按颜色占比从高到低排成 --c1、--c2……，复制进样式表后即可在别处用 var(--c1) 引用，快速把一张图的配色落成一套主题变量。
常见问题
是怎么提取的？图片会上传吗？
图片先画到本地 Canvas 并缩至最长边 200 像素，再用本页自实现的中位切分算法按像素数量聚类出代表色，全程浏览器本地运行，不上传。
什么图片提取效果好？
海报、Logo、产品图等主体明确、色块清晰的图片最准。小图或大面积渐变图结果可能相近，建议先裁剪主体再提取。
小结
裁好主体、选好色数、点块复制、导出变量——一套来自参考图的配色，几秒就能落到你的 CSS 里。