图片配色提取器

上传图片自动提取主色（2-12 色），附 WCAG AA/AAA 对比度检查、色对速查、应用 mock UI 预览。支持导出 CSS / Tailwind / SCSS / JSON / SVG / PNG。

本地 Canvas WCAG 合规 三种算法 色对速查 UI 预览
就绪
  1. 1上传图片
    2. ›
  2. 2提取 + WCAG
    3. ›
  3. 3应用 + 导出
① 上传图片 & 提取参数 支持 JPG · PNG · WebP · BMP · GIF · ≤ 10 MB
🖼️选择文件后会在这里预览
色数越多越细，越少越主导。色板丰富选 8-12，主题色选 4-6。
纯色 < Median cut / K-means · 渐变多 < K-means · 高频主色 < 量化
算法最大递归深度 8 层，单图秒级出结果
⑤ 导出色卡 提取完成后才能导出
CSS 给出 :root 变量 · Tailwind 给 extend.colors 配置 · SCSS 给 Sass map + function · JSON 含 RGB/HSL/对比度 · SVG/PNG 是带 HEX 标签的色卡图 · 复制全部 = CSS + JSON

适用场景

适合 UI 设计师快速从设计图 / 客户图生成色板与设计 tokens；前端工程师一键导出 CSS / Tailwind / SCSS 变量；品牌运营从海报 / 商品图提取主色应用到落地页；数据可视化作者复用统一配色。算法与对比度计算均在浏览器本地 Canvas 完成。

使用建议

  • 复杂场景（多光源、渐变多）建议先用 Median cut 提取 6-8 色作基底。
  • UI 主色选择遵循 WCAG AA：正文 ≥ 4.5:1，大字 ≥ 3:1；推荐搭配看上方「色对速查」。
  • CSS / Tailwind / SCSS 变量按主色权重（占比）排序，方便直接套用。
  • 想看效果？点「应用 mock UI 预览」立即在 navbar / hero / card 上看色板。
  • 导出 PNG 色卡适合贴在团队群里快速分享；JSON 含完整元数据便于复用到其他工具。

三种算法对比

  • Median cut（中位切）：把 RGB 立方体按中位切分，桶大小均衡 → 通用首选，结果色板最均衡，适合大多数图片。
  • K-means（迭代聚类）：在 L2 距离空间迭代收敛，色彩风格突出 → 适合强风格图（插画、对比强烈的设计稿）。
  • 量化（直方图前 N）：直接统计 5-bit/channel 量化直方图前 N → 速度最快，适合色彩单调、找绝对高频色的场景（logo、单一主色背景）。

WCAG 速查

遵循 WCAG 2.1 标准：sRGB → 相对亮度 → (L1 + 0.05) / (L2 + 0.05)。AA：正文 ≥ 4.5:1 / 大字 ≥ 3:1；AAA：正文 ≥ 7:1 / 大字 ≥ 4.5:1。本工具已为每个色块预计算对白 / 对黑两个方向，结果以彩色标签即时给出。

关于隐私

图片处理完全在浏览器 Canvas 内完成，本工具不会把您的图片发送到任何服务器，关闭页面后浏览器侧的 objectUrl 立即失效。