直接答案
图片调色板提取工具在本地通过 HTML5 Canvas 获取像素阵列，应用中位切分（Median Cut）或 K-Means 聚类算法分析三维色彩空间，快速提炼出最具美感与代表性的主色调组合。
如何使用此工具
1
拖入图片文件
导入 JPG、PNG 或 WebP 格式的摄影图或设计稿。
2
设置调色板样本数量
根据需要选择提炼出 5 至 10 种主导代表色。
3
检视各颜色色值代码
点击对应色块即刻查看 HEX、RGB 与 HSL 详细参数。
4
复制导出配色代码
一键导出 CSS 变量声明、JSON 数组或快速复制色值。
三维 RGB 色彩空间像素聚类与量化算法
算法将图像像素映射为三维色彩空间中的点集，沿着方差最大的色彩轴迭代递归切分包围盒，最终将各子空间的像素质心作为代表色，有效兼顾主导底色与小面积点缀高对比强调色。
- 通过等距采样降低大图的计算冗余，实现数千万像素超清大图的秒级流畅分析。
- 主色调配合辅助强调色，能为 UI 界面、海报搭配与室内设计提供天然和谐的调色参考。
实用示例
从落日海滩风光照片中提取自然灵感配色
输入： 照片：sunset.jpg（包含夕阳橙红、暮色深蓝、金黄沙滩等色彩元素）
输出： 提取配色：#1a2a3a（深海蓝）、#e65c00（落日橙）、#f9d423（晚霞黄）、#ff8c42（晚霞粉红）、#f4e8c1（细沙米白）
为新项目的品牌设计与插画绘制提供源于大自然的专业级配色参考。
限制
- 包含大量噪点或极端过度曝光的照片，提取出的一些过渡色彩可能存在轻微的聚类偏移。
常见问题
我提取商业设计稿的配色时，图片数据安全吗？
百分之百安全。所有像素矩阵采样均在您个人电脑的浏览器内存中运行，绝无任何后端传输与云端留存。
提取出的色盘支持哪些导出格式？
支持一键复制单色 HEX、批量导出包含全部色值的 JSON 数组，以及直接可用的 CSS 自定义变量声明（如 --color-primary）。
权威技术标准与参考文献
- MDN Web Docs：HTML5 Canvas 像素级数据操作 ↗ — 直接提取 ImageData、访问底层的 RGBA 缓冲区以及进行色彩空间量化的技术标准。
- W3C 相对亮度与色彩视觉平衡准则 ↗ — 评估色彩明暗平衡度与视觉舒适度的基准标准。