从图片提取调色板，免费

颜色提取的实际原理

从图像中提取调色板的电脑算法主要有两种经典方案：

• K均值聚类（Lloyd 1982；基本思想可追溯至MacQueen 1967和Forgy 1965）。在颜色立方体中随机选取K个颜色质心，将每个像素分配给最近的质心，以分配像素的均值重新计算质心，重复直到质心不再移动。最终K个质心即为主导颜色。
• 中值切割量化（Heckbert，SIGGRAPH 1982）。沿最宽维度递归切割颜色立方体，每次将像素群分为相等的两半。经过K次切割后得到K个色块，每个色块的平均颜色即为一个调色板条目。这是广受欢迎的Color Thief JavaScript库所使用的算法，也是历史上将索引色图像（GIF、PNG调色板）从数百万种颜色压缩至256色的经典方法。

两种方法都能从更大的像素群中产生一小组代表性颜色，但各有取舍。K均值更灵活，但对随机种子和离群值敏感。中值切割是确定性的，颜色空间覆盖均衡，但在图像像素集中的窄色域区域可能存在过度代表的问题。

为什么RGB距离会产生误导

一个微妙但重要的注意事项：在普通RGB空间中聚类所得结果并不总是符合人类感知。RGB是以硬件为驱动的坐标系统，其中的距离对应的是原色之间的电子差异，而非颜色之间的感知差异。两种在您看来完全相同的绿色，其RGB距离可能远大于一种绿色与一种红色之间的距离，尽管后者一眼就能分辨。

更精准的聚类在CIELAB（CIE 1976 L*a*b*）空间中进行，这是一种专门设计的颜色空间，其欧氏距离近似于两种颜色在人眼中的感知差异。Adobe Color等现代调色板工具和许多设计系统色板生成器都在CIELAB或CIELCH空间中聚类。CSS颜色模块第4级（W3C，2022年）新增了 lab()、lch()、oklab()、oklch() 函数，让网页设计师可以直接使用这些颜色空间，在需要感知均匀调色板插值时十分有用。CSS规范地址：w3.org/TR/css-color-4。

HEX、RGB、HSL：选择正确的格式

三种表示法描述的是同一种颜色，只是书写方式不同。

• HEX：#RRGGBB。六位十六进制数字，每通道两位，范围00-FF（0-255）。网页最常用的格式，简洁、可复制粘贴，随处支持。
• RGB：rgb(255, 128, 0)。数值相同，只是表示法不同。CSS还支持 rgba(255, 128, 0, 0.5) 用于透明度。
• HSL：hsl(30, 100%, 50%)。色相（0-360°）、饱和度（0-100%）、亮度（0-100%）。对设计师而言更直观，「相同色相，更高饱和度」在HSL中只需调整一个数字，而在RGB中需要多通道联动。
• OKLCH：oklch(70% 0.15 30)。HSL的现代感知均匀替代方案。相同亮度数值意味着跨色相的相同感知亮度，这是HSL所不擅长的（50%亮度的黄色看起来比50%亮度的蓝色亮得多）。

对于大多数网页工作，直接复制HEX值。对于程序化调色板操作（亮度调高10%、色相偏移30°），建议使用HSL或OKLCH，在这些空间中操作更为简洁。

为何主导色 ≠ 有用色

简单的「最常见颜色」提取往往令人失望。一张人物与蓝天的肖像，在统计上由天空像素和肤色主导，而视觉上有趣的颜色故事可能在主体的衣物上。有大面积中性背景的照片，得到的「主导色」往往是背景色。高度压缩的JPEG引入的伪像颜色也会被聚类，仿佛是真实颜色一般。

精密的调色板工具按饱和度、与主导背景的对比度、感知「趣味性」或是否出现在受人类视觉启发的Itti-Koch显著性模型检测到的显著区域进行加权。包括本工具在内的大多数在线工具使用简单的基于频率的聚类方式，速度快、可预测，对于从照片、插图或艺术品中提取调色板的常见场景已足够好用。

常见使用场景

• 品牌配色匹配：设计师从客户的Logo或主视觉图片中提取调色板，保持整个网站视觉的连贯性。
• 情绪板：从灵感图片（电影截帧、照片、画作）中提取调色板，是开始颜色探索最快的方式。
• Tailwind/设计令牌配置：将提取的调色板转换为CSS自定义属性或Tailwind的 colors 映射。
• 幻灯片配色匹配：从企业Logo中选取强调色，确保幻灯片不产生视觉冲突。
• 电商产品摄影：将每个产品的主导色用作产品卡片中的色样。
• 生成艺术与数据可视化：将提取的调色板输入着色器代码、D3图表或Processing草图。
• 印刷设计：从灵感图片中获取初始颜色集，然后在印刷设计软件中将其匹配为Pantone或CMYK。

为什么仅在浏览器端处理很重要

照片往往不仅仅包含图像内容。EXIF元数据可能包含拍摄地点的GPS坐标、相机序列号、拍摄者姓名和软件指纹。截图可能包含机密界面、草稿文本或未发布的品牌素材。私人照片可能包含未曾授权上传的人脸。提取调色板实际上不需要上述任何信息（只需像素数据），既然浏览器可以在本地分析，就没有理由将整张图像发送至服务器。

本工具将图像绘制到离屏Canvas上，通过 getImageData() 采样像素数据，运行聚类算法，然后显示结果。页面外不传输任何内容；标签页关闭后图像即被释放。Adobe Color、Coolors图像选色器等服务端调色板工具会上传整个文件。这就是您在每次选择时所做的隐私权衡。

处理输出结果

提取到调色板后，通常需要进行以下操作：

1. 筛选。5色自动提取结果通常包含3个有用颜色、1个冗余近似色和1个浑浊中间调。去掉浑浊色并去重。
2. 分配角色。指定一种颜色为主品牌色、一种为辅助色、一两种为强调色、一种为中性色。现代品牌体系通常需要中性背景、两个锚定色和一个强调色，总共五种封顶。
3. 生成明暗色阶。从每个锚定色派生9到11个深浅变体，用于悬停状态、背景和着色变体。Tailwind的颜色比例生成器或Refactoring UI的调色板章节提供了成熟的生成方案。
4. 测试对比度。将文字与背景的颜色对通过WCAG对比度检测器验证：普通正文要求4.5:1，大号或粗体UI组件要求3:1。
5. 测试色觉缺陷兼容性。大约每12名男性中就有1人存在某种形式的色盲。在确定调色板之前，请使用色盲模拟器进行测试。

常见错误

1. 将五种提取颜色未经编辑直接用作品牌调色板。自动提取是起点，而非成品调色板。需要筛选。
2. 从高度压缩的JPEG中提取颜色。压缩伪像会产生虚假的调色板条目。如果可以，请从高质量源文件开始。
3. 在复杂照片上只尝试一次。不同的K值（颜色数量）会产生截然不同的结果，分别尝试5、8和12，看哪种数量最适合您的图像。
4. 构建调色板时未考虑其所在页面的环境。低饱和度的照片提取调色板单独看可能很好，但在白色网站背景上可能会消失无踪。请在实际环境中测试。
5. 忽视对比度。美观的调色板有时文字与背景的对比度仅为2:1，无法通过WCAG标准。务必检查。
6. 忽略「主导色」可能意味着「背景色」。肖像照中最常见的颜色往往是主体身后的墙壁，而非主体的衣物。

更多常见问题

支持透明PNG吗？

支持。透明像素在采样时通常会被跳过，因此调色板只反映可见内容。如果上传一个背景透明的彩色Logo PNG，提取的调色板将是Logo的颜色，而非被污染的中性色。

动态GIF怎么处理？

浏览器的图像解码器通常只将第一帧传给Canvas API，因此调色板是从第零帧提取的。如需涵盖所有帧的调色板，需要逐帧提取后合并结果，这超出了静态图像工具的功能范围。

原始图像会被上传到任何地方吗？

不会。图像被加载到浏览器中的Canvas元素，像素数据通过 getImageData() 读取，聚类算法在您的设备上以JavaScript运行。图像数据永远不会传输至任何服务器。当源文件包含EXIF GPS数据、人脸、机密界面截图或未发布的产品图像时，这一点尤为重要。

为什么每次运行结果会略有不同？

K均值依赖初始随机质心位置，因此对同一图像的两次运行可能落在略有不同的局部最小值。差异通常很细微（一个近似色被相似色调替换），但仍然可见。中值切割是确定性的，相同输入必然得到相同输出。如果工具对同一图像给出明显不同的调色板，说明它使用的是随机化算法，这属于预期行为。

可以将提取的颜色用于商业用途吗？

颜色本身不受版权保护；HEX值只是像素的客观数据。但您提取颜色所用的图像可能受版权保护；从他人照片中提取调色板作为灵感参考是可以的，但复制该照片或其中的注册商标元素则是另一个问题。可以借鉴颜色，但不可复制图像。

与颜色选择器工具有何区别？

颜色选择器读取您所指定的特定像素位置的颜色。本工具则分析整张图像并返回最具代表性的调色板。两者用途不同：选择器用于「这个颜色是什么？」，调色板提取器用于「整体上有哪些主导颜色？」。在设计师的工作流程中两者各有用武之地。