图片配色提取 — 从图片提取主色调与占比（HEX/RGB），无需上传
将图片拖放到此处，或点击选择
支持 PNG、JPEG、WebP 和 GIF
图片不会上传——所有处理均在您的浏览器本地完成。
相关外部工具
部分链接为联盟营销链接。
相关工具
这款免费图片配色提取工具可在浏览器本地从照片、插画或截图中提取主色调配色板，图片不会上传到任何服务器。将 PNG、JPEG、WebP 或 GIF 拖入后，工具会使用 median cut 量化算法自动提取代表色，并显示每种颜色的 HEX 代码、RGB 值及其大致占比（%）。可自定义提取颜色数量（2-12），一键复制任意 HEX，或将整个配色板导出为 CSS 变量或 JSON。
使用方法
- 将图片拖放到上方区域，或点击打开文件选择器。支持 PNG、JPEG、WebP 和 GIF。
- 主色调配色板立即显示，每个色块显示 HEX 代码、RGB 值及该颜色的大致占比（%）。
- 使用滑块选择提取颜色数量（2-12），配色板即时更新，无需重新加载图片。
- 点击色块或复制按钮复制其 HEX。使用「复制所有 HEX」一次获取所有颜色。
- 切换到导出标签页，获取可直接粘贴的 CSS 变量块或 JSON，然后复制或下载。
- 无需安装，无需注册。您的图片不会离开您的设备。
功能与工作原理
主色调提取（全图配色板）
本工具使用 median cut 量化算法分析整张图片，将相似颜色归为一组并为每组选取代表色，呈现图片的整体配色。为保持速度，分析前会将图片缩小至小样本（长边 ≤ 160px）。
每种颜色的 HEX、RGB 和占比（%）
每种提取的颜色显示 HEX（#RRGGBB，大写）、RGB 值及大致占比，按占比从大到小排列。由于各颜色独立四舍五入，总和可能不完全等于 100%。
自定义提取颜色数量
使用滑块将颜色数量设置为 2 到 12。更改数量是即时的，无需重新加载图片。
复制和导出（CSS 变量 / JSON）
每个色块有复制 HEX 的按钮，「复制所有 HEX」可一次获取所有颜色。导出面板可生成 CSS 变量块或包含 HEX、RGB 和比例的 JSON 对象，颜色值始终 CSS 兼容。
不上传——图片保留在您的设备上
图片加载、缩放和颜色分析均使用浏览器的 Canvas API 在本地完成。您的图片不会发送到任何服务器、存储或共享。
使用场景
从参考图或照片中提取配色方案
拖入您喜欢的照片、插画或设计截图，配色板显示主要颜色及其比例，是建立匹配配色方案的绝佳起点。
从 Logo 或品牌素材中获取品牌色
拖入 Logo 或品牌素材，获取其中每种颜色的精确 HEX 代码，确保您的网站和文档使用正确的品牌色。
将颜色直接导出为 CSS 或 JSON
使用导出面板将 CSS 变量或 JSON 直接复制到您的代码中，占比显示哪种颜色是主色调，哪种是强调色。
注意事项与限制
- 近似值：工具在分析前缩小图片并将相似颜色归为一组，因此提取的颜色和百分比是近似值。
- 百分比之和可能不等于 100%：各颜色独立四舍五入，总和可能略有偏差。
- 颜色数量可能少于请求数：如果图片颜色较少，只返回实际存在的颜色，不会添加虚假颜色。
- 透明像素被排除：完全或大部分透明的像素（alpha < 128）不会被计算。
- GIF 动画：只分析第一帧，工具将其视为静态图片。
常见问题
- 我的图片会上传到服务器吗？
- 不会。所有处理均使用 Canvas API 在浏览器本地完成。您的图片不会被发送、存储或共享到任何地方。
- 可以提取整个配色板，而不只是一种颜色吗？
- 是的，这是主要功能。该工具使用 median cut 量化分析整张图片，返回最具代表性的颜色作为配色板，每种颜色都带有其占比。
- 每种颜色的占比（%）准确吗？
- 这是近似值。分析前会缩小图片并将相似颜色归为一组，因此百分比是近似值，而非精确像素计数。
- 可以提取多少种颜色？
- 2 到 12 种。使用滑块设置数量。如果图片颜色较少，只返回实际存在的颜色，不会添加虚假颜色。
- 支持哪些图片格式？
- PNG、JPEG、WebP 和 GIF（仅第一帧）。不支持 SVG、HEIC 等格式。
- 可以在代码中使用提取的颜色吗？
- 可以。每种颜色都有一键复制 HEX 的按钮，导出面板可生成 CSS 变量或包含 HEX、RGB 和比例的 JSON 对象。
- 透明 PNG 怎么处理？
- 透明像素（alpha 低于 128）被排除在分析之外，因此不会在配色板中显示为黑色或白色。完全透明的图片不会返回颜色。