图片

从图片提取主色调配色

提取图片中的主要颜色，给出 HEX 和 RGB 值，并附上可直接使用的 CSS 变量代码。

拖放图片到此处，或点击选择

支持 JPG、PNG、WebP、GIF、AVIF、SVG

本工具完全在浏览器中运行——数据不会离开您的设备。

什么是从图片提取主色调配色？

从照片中提取配色，是快速搭出和谐色彩方案最省力的办法。挑一张氛围合意的图片，取出它的主色调，再用它们做背景、文字和点缀——结果几乎总能协调，因为这些颜色本来就共存于同一个画面里。

本工具使用 k-means 聚类把像素分组，每个聚类的中心即为一个代表色。这种做法比单纯统计出现次数最多的颜色更接近人眼的感受——照片里几乎不存在两个数值完全相同的像素，因此单纯计数会得出毫无意义的结果。

使用方法

  • 把图片拖放到方框中，或点击选择文件。
  • 拖动滑块选择要提取的颜色数量，可选 2 到 12 种。
  • 顶部色条按各颜色在图片中所占比例显示。
  • 点击色块复制其 HEX 值，或复制底部整段 CSS 变量代码。

常见问题

提取多少种颜色合适？

五到六种能覆盖多数设计需求：一个背景色、一个文字色、一个强调色，外加两三个辅助色。数量太多会得到一堆相近色，反而不好用。

百分比是什么意思？

指属于该聚类的像素占比。占比高的通常是背景或画面中最大的区域；占比低的往往是高光细节——而这些恰恰最适合在设计中充当强调色。

为什么重新运行结果会略有不同？

k-means 是迭代算法，结果取决于初始点。本工具采用固定的初始化方式，所以结果稳定；但改变颜色数量会让全部聚类重新划分，而不只是简单增减一种颜色。