图片配色提取
median cut 主色提取，输出 HEX、占比与 CSS 变量。
选择图片后提取主色调（median cut 算法，透明像素自动跳过），输出 HEX 与占比、CSS 变量。
使用说明
这个工具解决什么问题
做海报想跟一张参考图的色调,写 CSS 想让页面配色和 banner 呼应,人眼挑色主观又说不清占比。这个工具用 median cut 算法把图片像素聚成主色盘:几个主色、各占多少、HEX 是多少,一次算清,还直接给出可粘贴的 CSS 变量。全部计算在浏览器本地完成,图片不上传,未发布的视觉稿也能放心提取。
核心能力
median cut 提取:最大色距下刀的中位切分变体,主色不被切混,主色按占比排前。色数可调:4-12 档,按用途选择,默认 6。占比排序:色带直观展示各主色比例,提案汇报直接引用。CSS 变量输出:一键复制变量代码,贴进样式表即用。快速本地计算:透明像素自动跳过,图片缩样统计,大图秒级出结果,数据不出本机。
使用建议
做主题色先看占比最高的前两位主色,那就是画面的视觉基调;提取结果当起点而非终点,饱和度与明度微调后再入设计;透明底素材直接丢进来,得到的都是实色;色带与占比适合放进提案里说明配色依据;同一张图换不同色数各提一遍,对比后再定稿,比拍脑袋选色可靠得多。
常见问题
颜色数怎么选?
4-12 档可选,默认 6。做主题色选 4-6,做完整配色方案或插图分析选 8-12;色数越多,次要颜色分得越细,主色占比随之被摊薄。
提取算法有什么讲究?
median cut 变体:反复切分像素最多的桶,在桶内跨度最大的通道上按相邻像素的最大色距下刀,而不是机械按中位数切,避免占比高的主色被拦腰切出中间色;每桶取平均色,按占比降序输出,主色永远排最前。
透明像素算吗?
不算。低于透明度阈值的像素不参与统计,透明底 logo、贴纸提取出来的就是实色部分的主色,不会被透明区干扰。
大图提取会慢吗?
图片先等比缩到最长 200px 再统计,速度与效果兼顾,大图也是秒级;缩样只是减少统计量,主色判断口径不变。