图像配色提取

这个工具能做什么

把任何图片——UI 设计稿、品牌素材、产品摄影、库存图——拖进来，得到一份可以直接粘贴到样式表、设计 token 或 Tailwind 主题里的调色板。工具用 k-means 对可见像素聚类，每个聚类输出一块色卡，附带它在原图中的占比，以及四种颜色空间表达：用于设计软件的 HEX、用于传统 CSS 的 RGB / HSL，以及用于现代色彩管线的 OKLCH。

使用方法

1. 把图片拖到上传卡片上，或点击卡片选择文件，或者复制图片后用 Ctrl + V 直接粘贴。
2. 调节控件：选择要提取的颜色数量（3 到 16），按出现频率、色相或亮度排序，按需勾选「跳过透明像素」「跳过接近白色」。
3. 点击任意色块复制它的 HEX。点击色块下方的 RGB / HSL / OKLCH 行可以复制对应格式。
4. 整组复制：复制 CSS 变量 输出 :root { --color-1: …; } 代码块；复制 JSON 输出 {hex, rgb, weight} 数组；复制 Tailwind 输出 theme.extend.colors.palette 配置片段，方便直接接入 tailwind.config.js。

算法说明

k-means 是最简单但仍能产出可用调色板的聚类方法。图片先按最长边降到 200 像素——一张 4K 照片大约会被压成 4 万个采样像素，这个量级既能让聚类中心稳定，又能在主流笔记本上保持 100 毫秒内的运行时间。每个像素归到欧式 RGB 距离最近的中心，中心更新为所属聚类的均值，循环到中心不再移动（或 24 轮迭代，以先到的为准）。

在此基础上做了两个工程化优化：聚类间 ΔRGB < 6 的近似中心会被合并，避免输出几乎相同的色卡；可选的预过滤会丢弃透明像素与接近纯白的像素（亮度 > 0.95），让算法聚焦在真正承载视觉重量的颜色上，而不是被边缘留白带偏。

输出格式说明

• HEX：通用互通格式，点击色卡上半部分直接复制。
• RGB：现代空格分隔语法 rgb(160 90 44)，所有现代浏览器都支持。
• HSL：方便在不离开色卡的情况下对色相 / 饱和度 / 亮度做小调整。
• OKLCH：感知均匀，适合用作设计 token；做色相旋转或互调时不会出现 HSL 那种亮度跳变。
• 占比：每个聚类在原图像素中的占比；占比最高的通常用作品牌主色，其余作为辅助色。

典型使用场景

• 从客户提供的品牌物料（海报、产品图、网页截图）反推主色调。
• 把摄影作品转译成网页设计 token，做摄影师作品集或电商详情页。
• 开发竞品分析时，对照自家产品和竞品 banner 的色彩占比差异。
• 给文章配图前，先抽出图片调色板，再据此选择对比度合规的标题、引言色。

隐私

所有处理都在浏览器内完成。图片解码到 HTMLImageElement，绘制到隐藏的 Canvas，再用 JavaScript 跑聚类。任何关于图片的字节都不会发到服务器。要验证可以打开开发者工具的网络面板，每次加载新图片时都能看到一份干净的请求日志。

相关工具

• 配色方案生成器 —— 从一个基础 HEX 出发，生成互补、类比、三角、四方等配色。
• 颜色色阶生成器 —— 从任意基础色拉出 9 级亮度阶梯。
• 颜色转换器 —— 在 HEX / RGB / HSL 间互转，带实时预览。
• 颜色对比度检测器 —— 拿到调色板之后，逐对验证它们在前景 / 背景组合下是否满足 WCAG AA / AAA。