配色工具
上传图片自动提取主色调，一键生成协调的配色方案，复制色值或导出 CSS 变量。纯浏览器本地处理。
点击或拖入图片
PNG / JPG / WebP / SVG · 全程本地处理，不上传
提取颜色数
配色方案
配色方案基于图片主色生成，适合延展品牌色或做 UI 配色。
还没有图片，上传一张看看它的主色调。
颜色由中位切分法（median cut）从图片像素统计得出，占比越高越靠前；点击任意色块即可复制色值。
怎么用
- 上传一张图：照片、插画、品牌 Logo 都可以，工具会统计像素分布。
- 设定数量：选择提取 4 到 10 个主色，数量越多层次越细腻。
- 选配色方案：在提取的主色之外，可基于主色生成互补、类似、三角或单色阶方案。
- 导出使用：点击色块复制单个色值，或一键复制全部 HEX、CSS 变量，也可下载 PNG 色卡。
常见问题
主色是怎么算出来的？
用中位切分法（median cut）：把图片缩放到小尺寸后统计所有像素，反复沿颜色跨度最大的通道切分，直到得到指定数量的色组，每组取平均色作为代表色，再按像素占比排序。
图片会被上传到服务器吗？
不会。取色在浏览器本地通过 Canvas 完成，图片不经过网络，商业素材和未发布的品牌图都能放心用。
互补色、类似色、三角配色有什么区别？
互补色取色轮上相对 180° 的颜色，对比强烈适合强调；类似色取相邻 30° 左右，柔和统一；三角配色取相隔 120° 的三色，丰富而平衡；单色阶只改明度与饱和度，最安全不出错。
提取的颜色可以直接做品牌色吗？
建议以它为起点再手动微调：算法提取的是统计意义上的平均色，通常会略微发灰，实际使用时可适度提高饱和度，并在深浅背景下各验证一次对比度。