← 返回首页

🎨 颜色提取

从照片里提取主色调,一键复制 HEX 色值,做配色参考

📁
点击或拖拽图片到这里
支持 PNG / JPG / WebP

原始图片

原始图片

(处理结果见下方色卡)

处理结果
当前:8 种

配色方案(点击色值可复制)

处理中…

颜色提取怎么用

  1. 上传想要取色的图片
  2. 拖动滑块选择提取几种颜色(3–16)
  3. 点「提取颜色」,下方生成色卡
  4. 点击任意色值即可复制,或点「复制全部色值」一次性带走

它的原理是什么

提取主色调用的是 K-means 聚类:先把图片里所有像素的颜色看成三维空间中的点,然后随机放 K 个"中心",反复把每个点归到最近的中心、再重新计算中心位置,直到稳定。

稳定后的 K 个中心就是图像的 K 个主色。为了让结果稳定,算法会采样(大图不会逐像素算)并迭代 12 次。

最后按亮度(0.299R+0.587G+0.114B)从暗到亮排序,方便你直接当作配色条使用。

常见使用场景

下面这些情况用它最顺手:

设计师取色

从参考图里提取配色,直接用到设计稿

PPT 配色

从公司 Logo 或产品图提取品牌色

家居与穿搭

从照片中提取主色,搭配软装或服饰

前端开发

快速拿到图片的 HEX 色值写进 CSS

规格与参数说明

输入格式PNG / JPG / WebP
提取数量3–16 种可调
算法K-means 聚类(迭代 12 次,自动采样)
输出色值HEX 与 RGB,点击即复制
排序按亮度从暗到亮

关于颜色提取的常见问题

提取的颜色不准怎么办?

K-means 的初始中心是随机的,同一张图多次提取可能略有差异。可以增减数量再试,或多次提取取稳定出现的颜色。

为什么看不到很亮或很暗的颜色?

算法按像素数量聚类,占比很小的颜色(比如画面里一点点高光)可能不会被单独聚成一类。这种情况可以增加提取数量。

透明区域会影响结果吗?

不会。程序会跳过透明度低于 50% 的像素,只对可见部分取色。

能保存色卡图片吗?

当前版本只提供色值复制。需要图片可以截图,或用「图片拼接」把色块拼成一张。