🎨 Image Palette Analyzer

Upload an image and analyse its pixels with Canvas to extract the dominant colour and a full palette with proportions, all locally.

📐 工作原理与说明

按颜色量化统计频次：占比 = 该色像素数 / 总像素数，取占比最高的若干色为主色

用 Canvas 读取图片像素并按颜色量化统计出现频次，取占比最高的若干色作为主色并生成完整调色板，同时给出各色占比，用于从参考图快速提取配色方案。

输入数据（逗号或换行分隔）

📚 深度解析：调色板提取（从图片上传，Canvas分析）

从一张渐变封面提取 6 色调色板

输入：上传一张 1200×800 的渐变封面图。处理：Canvas 逐像素统计颜色频次，合并相近色并取前 6 个主色，计算各自占比。输出：主色 HEX 列表（如 #FF6B35 占 31%、#7C3AED 占 24%…）及占比条形，可一键复制为 CSS 变量。

大图会卡吗？: 提取在浏览器本地用 Canvas 完成，建议先缩到 2000px 以内；像素越多统计越慢但仍是本地运算，不上传服务器。
占比是怎么算的？: 按颜色量化后的像素数量除以总像素；相近色会先做合并再排序，因此占比是近似视觉分布，非精确色彩管理数值。
能直接导出给设计软件吗？: 可复制 HEX 或导出 CSS 变量片段，再粘进 Figma、代码或设计系统即可，结果以浏览器实时计算为准，纯前端本地处理、数据不上传；生成的样式与代码仅作快速产出参考，正式项目请以设计系统、规范与浏览器实测为准。