免费转换器

从图片提取 调色板

即时从任意图片中提取主要颜色。一键获取HEX和RGB值。免费、安全,完全在浏览器中运行。

拖拽图片到此处

支持PNG、JPG、WEBP、GIF。最大50MB。

关于此工具

调色板提取分析图像并识别主色或代表色。结果是一小组颜色(通常为 5-8 种),可以捕捉图像的视觉特征。设计师使用提取的调色板来协调其他设计元素(补充英雄图像的 UI 颜色、源自摄影的品牌调色板、匹配情绪图像的配色方案)。

提取过程使用聚类算法(k 均值或类似算法)将所有图像像素分组为所需数量的颜色簇。每个簇的中心变成调色板颜色。最大的簇代表主色;该算法还可以根据视觉重要性(饱和度、对比度)而不是原始像素计数来加权,以呈现引人注目的强调色。

该工具使用 JavaScript 在您的浏览器中运行。图像被解码为像素数据,进行采样以减少计算量,并进行聚类。输出是带有十六进制代码、RGB 值和比例条的调色板,显示每种颜色在图像中的流行情况。

为什么提取调色板

使用提取的调色板设计与现有图像相协调的作品比通过眼睛挑选颜色要快得多。网页设计师围绕英雄图像构建登陆页面,营销人员制作与关键产品照片匹配的资产,以及品牌设计师分析竞争对手图像,所有这些都受益于算法调色板提取。

调色板还支持内容管理。通过按主色对图像进行分类,您可以构建用户按颜色浏览照片、产品或设计的界面。构建这样的系统需要系统地提取调色板,这是通过编程提取实现的。

使用方法

上传,选择调色板大小,获取颜色。

  1. 上传您的图片: 将 JPEG、PNG 或 WebP 拖到上传区域。支持最大 50 MB 的文件。
  2. 选择调色板尺寸: 5-8 种颜色涵盖了大多数用例。 3-4 为紧密聚焦的调色板; 10+ 用于精细提取。较大的调色板包含更微妙的颜色,但其实用性却逐渐减弱。
  3. 提取物: 集群在您的浏览器中运行。较小的调色板提取速度更快;高分辨率图像的较大调色板需要几秒钟的时间。
  4. 使用调色板: 可以直接复制十六进制代码。调色板可以导出为 JSON、CSS 自定义属性或色样图像。

常见用例

技术细节

K-均值聚类迭代:将每个像素分配给最近的聚类中心,重新计算中心作为分配像素的平均值,重复直到收敛。在全分辨率图像上运行速度很慢;采样(每隔 N 个像素)以最小的质量损失加速。

色彩空间很重要。 RGB 中的聚类会生成按 RGB 距离加权的调色板,这与感知距离不匹配。 LAB 或 HSV 中的聚类会产生在感知上更加一致的调色板 - 看起来相似的颜色会更可靠地组合在一起。

输出:每个聚类中心的十六进制代码,加上每个聚类中图像像素的百分比。该百分比代表视觉普及率;最大的簇是最主要的颜色。

最佳实践

常见问题

提取了多少种颜色?
该工具通常会提取 5-8 种主色,具体取决于图像的复杂性。颜色很少的简单图像会产生更少、更清晰的样本。复杂的照片产生更广泛的范围。
提取算法如何工作?
该工具使用颜色量化(中值切割或 k 均值聚类)对相似像素进行分组并识别最具代表性的颜色。这会产生视觉上有意义的颜色,而不是最常见的单个像素值。
我可以为我的品牌使用提取的颜色吗?
是的。这是一种从情绪板、照片或产品图像中获取品牌调色板的流行技术。提取的十六进制代码可以直接在 CSS、设计工具或品牌指南中使用。
为什么提取的颜色与我看到的不完全匹配?
颜色提取将相似的像素分组在一起。肉眼看起来像一种颜色的渐变可能会被平均为稍微不同的色调。此外,显示器校准会影响颜色在屏幕上的显示方式。
输出是什么格式?
默认情况下为十六进制代码。大多数工具还导出 RGB、HSL 和其他颜色空间值。 CSS 自定义属性或 JSON 输出对于编程使用非常有用。
我的图像是否已上传到服务器?
不会。提取发生在您的浏览器中。
调色板是否与品牌形象相匹配?
算法提取是描述性的,而不是规定性的。输出描述图像;该品牌可能有相关但不同的调色板。使用提取作为起点,然后进行细化以实现品牌一致性。
我可以从视频中提取内容吗?
仅使用此工具进行单帧提取。对于视频调色板提取,对帧进行采样并从每个帧中提取,然后聚合。