图片取色与配色提取工具
在浏览器中从任意图片提取主色和平均色，每个颜色都以可复制的 HEX 值显示。
正在加载工具…
图片取色与配色提取工具 — 拖入任意图片，即可立即提取它的配色：最主要的几种主色，再加上整体平均色，每个都带有色块和一键复制 HEX 的按钮。你可以自行设置要提取的主色数量（2 到 12 个）。图片通过 HTML canvas 完全在你的浏览器中读取，绝不会上传到服务器。
图片取色与配色提取工具 是什么？
图片取色器是一款免费的在线配色提取工具，可在浏览器中直接从任意图片提取主色和平均色。设计师、前端开发者，以及任何构建品牌或灵感板的人，都可以拖入照片、Logo 或截图，几秒内得到一份 HEX 配色。它使用 HTML canvas 的 getImageData 读取图片像素，将其量化分桶，并按每种颜色出现的频率排序，因此最常用的颜色会排在最前面。你可以设置配色数量（提取多少种主色，2 到 12 个），每种颜色都以色块和可复制的 HEX 值显示，同时还会给出图片的整体平均色。
如何使用 图片取色与配色提取工具
- 将图片拖放到拖放区，或点击该区域从设备中选择文件（PNG、JPEG、WebP 或浏览器能打开的任意其他图片）。
- 在「配色数量」输入框中设置你想要的主色数量，范围为 2 到 12。
- 查看「平均色」一行，了解整幅图片混合后的单一平均色及其 HEX 值。
- 查看「主色」列表，按出现频率从高到低排列，每个都带有色块和 HEX 值。
- 点击任意颜色旁的复制按钮，即可将该 HEX 值复制到剪贴板。
示例
从 Logo 提取品牌配色
拖入一张 Logo 的 PNG，将「配色数量」设为 4，即可得到最常用的四种颜色作为 HEX 色块，可直接粘贴到设计令牌或 CSS 变量中。
从照片找到搭配的背景色调
载入一张主视觉照片，查看「平均色」一行，得到一个与整幅图片协调的混合 HEX 值，可用作区块背景或回退颜色。
从插画构建更大的色板
拖入一张色彩丰富的插画，将「配色数量」调高到 12，即可提取一组按图片覆盖面积排序的丰富主色。
常见问题
- 我可以使用哪些图片格式？
- 浏览器能打开的任意图片（拖放区接受 image/*），包括 PNG、JPEG 和 WebP。图片会被绘制到 HTML canvas 上，并在本地读取像素以提取颜色。
- 主色是如何挑选出来的？
- 工具读取图片像素，将相近的颜色归入同一个桶，再按每个桶包含的像素数量排序。排名靠前的桶成为你的主色，按出现频率从高到低显示，每个都取该桶的平均色。
- 我可以提取多少种颜色？
- 你可以将「配色数量」设置在 2 到 12 种主色之间。除此列表之外，整幅图片的整体平均色始终会单独显示。
- 为什么颜色和原图会略有差异？
- 为了提速，较大的图片在读取前会被缩小，相近的颜色也会被归为一组，因此每个色块是一组颜色的平均值，而非某个精确像素的颜色。结果是一份忠实的代表性配色，而不是逐像素取色。
- 我的图片会被上传到任何地方吗？
- 不会。图片完全使用 HTML canvas 在你的浏览器中 100% 本地处理。它绝不会上传到 deftdeck 或任何服务器，因此本工具可离线使用，并能为你的图片保密。