无需上传、100% 本地处理、无需账户

颜色调色板提取器

上传图片以提取其主色。获取每个色块的 HEX 代码,一键复制。一切都在浏览器中运行。

颜色调色板提取器 的工作原理

色彩调色板提取器分析你的图像,使用在 Canvas 中对像素数据运行的 k-means 聚类算法识别视觉上最主导的颜色。结果是一组带有 HEX 值的颜色样本,你可以单独复制。没有图像字节离开你的浏览器;像素采样在 Web Worker 中本地运行,使主线程保持响应。

提取将数十万个单独的像素颜色分组为较少数量的代表性聚类。输出颜色的数量可配置,因此你可以提取紧凑的五种颜色调色板或更广泛的十二种颜色集。这对于快速从徽标中提取品牌颜色、识别照片的主导色调用于情绪板,或检查用户上传图像中出现的颜色非常有用。

颜色调色板提取器 的分步使用说明

  1. 将图像拖到上传区域或点击浏览。
  2. 设置你要提取的颜色数量(通常为 5 到 12 种)。
  3. 点击「提取」。像素聚类在 Web Worker 中本地运行。
  4. 查看生成的颜色样本及其 HEX 值。
  5. 点击任意样本将其 HEX 代码复制到剪贴板。

常见使用场景

  • 设计师从品牌照片中提取主导调色板,确保新营销材料与现有色彩故事匹配。
  • 开发者识别用户上传头像中的主要颜色,以动态生成匹配的 UI 强调色。
  • 艺术家通过从多张参考图像中提取调色板并比较提取的 HEX 代码来构建参考情绪板。
  • 博主从头图照片中提取五种主导色调,为文章布局选择互补的文字和按钮颜色。

常见问题

颜色提取算法是如何工作的?

工具通过 Canvas.getImageData() 读取图像中的所有像素值,为了速度进行下采样,然后运行 k-means 聚类。每个聚类的质心成为一种输出颜色。k-means 按颜色接近度对像素进行分组,使主导视觉色调作为质心颜色出现。

提取颜色需要上传图像吗?

不需要。像素采样在浏览器的 Web Worker 中进行。图像从你的本地磁盘读取,绘制到 OffscreenCanvas 上,像素数组在内存中处理。数据不离开你的设备。

为什么提取的颜色看起来与我在图像中看到的略有不同?

k-means 质心代表一组像素颜色的数学平均值。一种非常常见但略有变化的颜色(具有轻微渐变变化的蓝天)将产生代表平均色调的质心,而不是你能指向的任何精确像素值。结果是代表性平均值,不是特定像素的样本。

可以从带有透明度的照片中提取调色板吗?

完全透明的像素(alpha = 0)被排除在聚类之外,以避免透明区域将提取的颜色偏向黑色或白色(取决于 Canvas 背景填充)。半透明像素按其 alpha 值加权包含在样本中。

颜色代码是什么格式的?

工具输出 HEX 代码(如 #3A7BD5)。如果你需要 RGB、HSL 或其他格式,请将 HEX 值复制到颜色转换器工具中,该工具接受 HEX 并转换为所有常见的颜色模型。