图片配色提取

什么是图片配色提取？

如何使用图片配色提取

1. 1

   上传图片：点击页面中的『上传图片』按钮，在本地文件弹窗中选中你需要提取主配色的图片文件，等待图片加载完成即可进入下一步。

2. 2

   设置数量：拖动提取数量设置滑块，根据自己的需求调整需要提取的颜色数量，范围支持2到10种，调整后会自动重新生成结果。

3. 3

   查看结果：在结果区域查看生成的可视化色板，每块颜色会标注对应的十六进制色值，点击对应颜色就能一键复制色值使用。

4. 4

   导出结果：你可以选择导出完整的配色板图片保存到本地，也可以一键导出所有颜色对应的CSS变量代码，按需选择即可。

什么场景会用到？

计算示例

注意事项

• 不同的提取数量设置会得到不同结果，数量越少越偏向提取画面中占面积最大的主色，数量越多会越细碎。
• 工具基于像素色彩统计聚类提取配色，若图片大面积是纯色渐变，提取的色值会略偏离极端端点色，属于正常结果。
• 导出CSS变量格式为`--color-1: #XXXXXX;`，可直接复制粘贴到前端项目的样式文件中使用。
• 透明PNG图片会自动忽略透明像素，仅提取实际有内容区域的色彩，不会将透明通道计入统计。

常见问题

参考资料

• W3C CSS Color Module Level 4 规范
• 行业通用图像处理k-means色彩聚类提取实践

本工具采用W3C标准十六进制色值输出，支持常见的JPG、PNG、WEBP图片格式，所有提取逻辑均经工具集编辑组验证复算，页面内容定期更新适配使用需求。