从图片中提取颜色（主色提取工具）
上传图片后，可自动提取照片或插画中使用的主要颜色（主色）。所有处理均在浏览器内完成，图片不会被发送到服务器。
如何从图片中提取颜色
想知道一张照片、插画或 Logo 中最常出现的颜色时，用取色器一个一个手动挑选会很麻烦。本工具可以帮您完成这项工作：只需上传图片，就能自动列出图片中占据较大面积的代表色（即"主色"），并立即显示可复制的 HEX 值和 RGB 值，方便直接粘贴到 CSS、Figma、Photoshop 等设计工具中使用。
在内部实现上，工具会先把图片绘制到浏览器的 Canvas 元素上并读取像素数据，然后把相近的颜色归并（量化）为若干个较粗的分组，统计每个分组的出现次数，再选出出现频率最高的分组作为代表色。透明 PNG 图片中的透明部分会被自动排除在统计之外，因此即使是背景透明的抠图，提取结果也会集中在主体本身的颜色上，而不是背景。较大的图片在分析前会先在内部被缩小，因此即便是几百万像素的照片也几乎能瞬间完成处理。由于全部计算都在您的浏览器本地完成，图片数据不会离开您的设备，即便是比较私密的照片也可以放心使用。
从图片中提取颜色的步骤
- 上传图片 将图片文件拖放到指定区域，或点击该区域从文件选择对话框中选取图片。
- 选择要提取的颜色数量 在"要提取的颜色数量"中选择 4、8 或 12。每次更改选项后结果都会立即重新计算，无需重新上传图片。
- 查看提取出的色块 色块会按出现频率从高到低排列，每个色块旁都会显示对应的 HEX 值和 RGB 值。
- 复制 HEX 值 点击任意色块下方的复制按钮，即可将对应的 HEX 值发送到剪贴板，随时粘贴到 CSS 或设计软件中。
用好本工具的小技巧
- 点击色块下方的复制按钮即可将其 HEX 值复制到剪贴板，可直接粘贴到 CSS 或设计工具中使用。
- 可以从 4、8、12 中选择提取的颜色数量。简单的 Logo 配色适合选 4 色，想仔细分析照片的丰富色调则可以选择 12 色。
- PNG 图片中透明的部分会被自动排除，提取结果会更聚焦于主体本身的颜色，而不是透明背景。
- 所有处理都通过 Canvas API 在本地浏览器中完成，图片数据不会发送到任何服务器，即使是敏感图片也可以放心使用。
- 提取的颜色按出现频率从高到低排列，排在前面的颜色在图片中占据的面积更大。
可以这样使用本工具
从现有 Logo 制定配色方案
上传 Logo 图片即可以 HEX 值的形式获取其中使用的确切颜色，方便让网站或幻灯片的配色与品牌形象保持一致。
从产品照片中寻找品牌色候选
提取包装或产品照片中的代表色，可以为确定企业色或活动页面的强调色提供具体参考。
把握照片或插画的色彩平衡
在 4 色和 12 色之间切换，既能一眼看出图片整体的大致色调，仔细观察时也能看到更细致的色彩分布。
将颜色交付给 CSS 或设计工具
复制提取出的 HEX 值，直接粘贴到 CSS 变量或 Figma、Photoshop 的取色器中，省去手动凭肉眼记录颜色的麻烦。
术语表
- 主色
- 在图片中占据最大面积，或出现频率最高的代表性颜色。本工具列出的色块正是这些主色，并按占图片比例的高低排序。
- HEX 值
- 一种用两位十六进制数分别表示颜色红、绿、蓝三个分量的表示法，例如"#3366cc"。"#"后依次是红、绿、蓝三个分量，广泛用于 CSS 和各类设计软件。
- RGB 值
- 用光的三原色——红（Red）、绿（Green）、蓝（Blue）——分别以 0 到 255 之间的数字来表示颜色的方法。三个数值的组合几乎可以还原任何可见颜色。
- 颜色量化
- 把相近的颜色归并为数量更少的分组的处理过程。本工具将 RGB 每个通道划分为 32 为单位的分组，从而把 JPEG 压缩等原因造成的细微色差归入同一颜色统计，而不会被当作噪声。
- Alpha 值（透明度）
- 表示图片中每个像素不透明程度的数值。透明 PNG 中背景透出的部分 Alpha 值较低，本工具会自动将这些像素排除在颜色统计之外。
- Canvas API
- 浏览器提供的一种用于绘制和分析图像、图形的 JavaScript 接口。本工具借助它逐像素读取图片，并在您的设备本地完成颜色提取，全程不会把数据发送到服务器。
常见问题
闲话 ― 从照片中寻找品牌色的工作
从照片或产品包装中提取"所使用的颜色"，是网页设计和平面设计工作中的常见任务。在制定品牌视觉规范时，设计师通常会先从现有的照片素材或 Logo 中提取代表色，再以此为基础考虑企业色或强调色的候选方案。过去需要用取色工具逐一手动拾取的工作，如今可以通过本工具这样的"主色提取"算法自动完成。
颜色提取有多种算法。本工具采用的"分桶量化 + 频率统计"方法，将每个像素的 RGB 值粗略归入某个分组并统计出现次数，是一种计算成本低、运行速度快的简单方法。而更高级的方法，例如 k-means 聚类算法，会根据颜色空间中的距离进行分组，能得到更自然的分组结果，但计算量也随之增加。
有趣的是，同一张图片根据提取的颜色数量不同，给人的印象也会截然不同。只提取 4 种颜色时，会呈现出图片整体的大致色调（偏暖还是偏冷）；而提取到 12 种颜色时，则连阴影和反光带来的细微色差也能被捕捉到。根据用途调整提取数量，就能从同一张图片中获取不同粒度的信息。