选择图片
最多 10 MiB、1600 万像素。暂不支持动画图。
自有示例 · 三种色块
当前为示例色板；选择图片后会自动提取。
占比如何理解
忽略全透明像素，按其他像素的不透明度计算权重，再归纳代表色。占比保留一位小数，合计可能因舍入略偏离 100%。
代表色与配色方案
3 个代表色
自有示例 · 近似占比
HEX / RGB / HSL自有示例 · 近似占比
#136CE9rgb(19, 108, 233)hsl(215, 85%, 49%)50.0%#172B46rgb(23, 43, 70)hsl(214, 51%, 18%)25.0%#F5B84Brgb(245, 184, 75)hsl(38, 89%, 63%)25.0%:root {
--palette-1: #136CE9;
--palette-2: #172B46;
--palette-3: #F5B84B;
}
色板 PNG 为 1600 × 1000px，包含色值和占比。JSON 保留完整比例，便于后续整理。
图片配色提取
上传 PNG、JPG 或 WebP 图片，提取代表色与近似占比，查看 HEX、RGB、HSL 色值，支持复制 CSS 变量和下载色板 PNG、JSON，方便参考照片配色。
整理：喜爱工具箱 · 更新于 。示例由喜爱工具箱绘制。方法：将图片采样至最长边 256 像素，按透明度加权分组，取组内代表色并合并近似颜色。结果是颜色归纳，不识别物体，也不替代印刷校色。
使用说明
三步完成操作
- 01 · 选择图片
选择静态 PNG、JPEG 或 WebP，文件不超过 10 MiB，尺寸不超过 1600 万像素。
- 02 · 提取代表色
选择 3–8 个颜色，查看全图的代表色与近似占比；色彩较少时返回实际数量。
- 03 · 保存配色
复制单个色值或 CSS 变量，下载 JSON 或包含色值与占比的色板 PNG。
常见问题
使用前先了解这些
为什么颜色数量少于设定数量？
单色或颜色相近的图片没有足够不同的代表色，工具会合并近似颜色，不为凑数生成重复色。
占比代表物体面积吗？
不代表。占比是采样像素按透明度加权后归入每组的比例，属于近似值，也不等于肉眼感知的重要程度。
透明背景如何处理？
完全透明的像素忽略，半透明像素按不透明度加权。全部透明的图片会提示没有可提取颜色。
为什么和另一张图或另一个设备不完全一致？
采样、图片压缩、色彩管理和量化方式会影响结果。色板适合设计参考，不等同于精确的印刷色或原图全部颜色。