如果你经常处理图片素材可能会遇到这样一个问题看到一张很有感觉的插画或摄影作品想知道它的主色调是什么或者想提取一套“看起来很像这张图”的配色。手动取色效率太低而且凭肉眼选出来的颜色往往不准确。更常见的场景是你想做一个可以根据图片自动生成主题色的小工具或者给个人网站、数据报表、PPT 做一个“色彩风格统一”的皮肤包。多数人遇到的第一个障碍并不是不会写颜色转换代码而是不知道“从几十万种颜色里挑出几个代表色”这件事到底该怎么做。这篇文章要讲的就是如何从零实现一个颜色提取与配色生成工具。项目代号就叫“HB to 骖鸾”核心功能名称为“Whats Your Colors”定位是一个轻量的、可以嵌入到个人项目里的颜色分析工具。先说结论颜色提取工具的真正难点不在于把 Hex 转成 RGB也不在于把颜色显示到页面上而在于“如何从一张图的几十万个像素颜色里选出少数几个最能代表整张图的颜色”。如果你只是随机抽几个像素结果会非常不稳定如果你把所有颜色都平均最后会得到一个灰扑扑的混合色。真正可靠的做法是先把颜色从 RGB 空间映射到更符合人类感知的颜色空间然后做聚类最后再对聚类结果做排序和筛选。读完这篇文章你可以自己用 Python 跑通主色提取、调色板生成、颜色距离计算以及一个简单的 Web 展示页面。1. 这个项目要解决什么问题先明确场景。Whats Your Colors 这个项目解决的不是“把红色写成 #FF0000”这种基础问题而是下面这一类需求我有一张图片希望自动得到 5 个主色并把它们排列成调色板。我想根据图片主题色动态改变页面的背景色、按钮色、标题色。我想批量分析一批图片统计它们的色彩风格用于视觉素材库的分组和标签管理。我想做一个“测测你的专属颜色”的小游戏用户上传一张照片系统返回一组颜色和配色方案。这类需求在业务里其实很常见。比如电商平台根据商品主图生成卡片背景色音乐 App 根据专辑封面生成播放器氛围色数据可视化平台根据主题图生成图表配色。如果你手动从设计图里吸取颜色一次两次还好一旦图片数量多了人工效率就完全跟不上。还有一个隐藏问题很多开发者在做这类工具时会把“颜色提取”想得太简单。他们以为把图片缩小取几个像素转成 Hex就算是完成了。但实际结果往往不稳定同一张图稍微裁剪一点主色就变了同一批风格相近的图提取出来的颜色相互之间没有统一性红色和深红色被当成两个完全不同的主色导致调色板看起来极为杂乱。所以这个项目真正要解决的是三个问题第一如何稳定地提取图片的主色第二如何让提取出来的颜色在感知上“很像”原图第三如何把结果用规范和可复用的方式输出方便后续接入页面或接口。从工程角度看这个项目可以做成一个 Python 脚本、一个 Web 服务或者一个前端工具包。本文会以 Python 脚本为主因为在颜色计算和图像处理方面Python 的生态最成熟代码量也最小。后续如果你想给它套一层 HTTP 接口也完全可以基于同一套核心逻辑来做。2. 颜色空间为什么不能直接用 RGB 做聚类在写代码之前先解决一个认知问题颜色提取应该基于哪种颜色空间最直观的是 RGB。图片本身就是 RGB 三通道存储的RGB 转 Hex 也很简单网上到处都能找到现成函数。但如果你真的把 RGB 值直接丢进 K-Means 聚类结果往往不理想。原因是 RGB 空间并不是“感知均匀”的。用一个例子来说在 RGB 空间里颜色 (200, 50, 50) 和 (180, 30, 30) 的欧几里得距离很小但在人眼看来这两个颜色的区别程度和另外一对距离相同的颜色并不一致。也就是说RGB 空间里距离远不代表颜色差异大距离近也不代表颜色差异小。直接在这种空间里做聚类聚类结果会有偏差容易出现“某个主色其实在视觉上并不够代表性”的情况。更适合做颜色距离计算和聚类的是 Lab 颜色空间也叫 CIELAB。Lab 里的 L 代表亮度a 代表从绿色到红色的分量b 代表从蓝色到黄色的分量。Lab 空间设计的初衷就是让颜色之间的欧氏距离尽量和人眼感知的差异一致。所以计算两个颜色“像不像”在 Lab 空间里算距离比在 RGB 空间里算更可靠。HSL 和 HSV 居中。它们把颜色拆成色相、饱和度、亮度三个维度对人工调色板设计很友好但同样存在感知不均匀的问题。在 HSL 空间里直接聚类饱和度和亮度的权重很难调容易把同一个色相的不同明度分裂成好几个主色或者把所有颜色都聚到少数几个饱和度极值上。在实际项目中更稳妥的流程是先用 RGB 读取像素然后把颜色转成 Lab在 Lab 空间里做 K-Means 聚类最后把聚类中心转回 RGB再输出成 Hex。下面这张表可以帮你快速理解几个颜色空间的适用场景颜色空间主要用途是否适合聚类原因RGB屏幕显示、图像存储不太适合各通道相关感知不均匀HEX前端展示、设计稿标注不适合计算只是 RGB 的十六进制表示HSL / HSV人工调色、颜色选择器中等色相/饱和度/明度直观但距离度量不自然Lab颜色距离计算、聚类分析非常适合感知均匀距离更符合人眼判断所以这个项目里的核心设计判断是不要在 RGB 空间直接聚类。先转 Lab再聚类最后转回 RGB 输出。这个环节看起来只多了一步但对结果的影响非常明显。转换需要用到颜色管理库。Python 里最常用的是colormath但它依赖较多而且有些版本在 Python 3.10 以上会遇到一些小问题。更轻量的一种做法是直接用 OpenCV 的cv2.cvtColor完成 RGB 到 Lab 的转换因为 OpenCV 在很多图像处理项目中本来就已经存在不需要额外引一套颜色库。如果是纯 Python 项目也可以使用 scikit-image 的color.rgb2lab。具体选哪一种取决于你的项目里已经有哪些依赖。本文后面的代码示例会以 OpenCV 和 scikit-learn 为主这两个库的组合在图像处理领域非常常见。3. 主色提取的核心流程颜色提取并不复杂但流程必须清晰。按照一般的工程实现可以拆成四个步骤图片读取、像素采样、颜色聚类、结果整理。第一步是图片读取。这一步的主要目的是把图片加载成 RGB 像素数组。需要注意OpenCV 默认读取的是 BGR 顺序如果你直接用 OpenCV 读图又不做通道转换后面所有颜色结果都会出现红蓝互换的明显错误。这是新手最容易踩的坑。第二步是像素采样。一张 1920x1080 的图片有约 200 万个像素。如果全部参与聚类计算量会很大而且颜色分布并不会因为像素多而明显改善。更合理的做法是把图片缩放到一个较小的尺寸比如 100x100 甚至 50x50然后再取像素。缩放可以大幅降低计算量还相当于对图片做了一次平滑减少噪点对聚类结果的影响。第三步是颜色聚类。把采样后的像素颜色先转成 Lab然后用 K-Means 聚类把相似的像素归到同一个类别。聚类的数量就是你想得到的主色数量。比如你想生成 5 个主色K 就设为 5。每个聚类中心就是这个主色的 Lab 值再把它转回 RGB得到最终结果。第四步是结果整理。聚类出来的颜色顺序是随机的不代表颜色的重要程度。所以你还得根据每个聚类中像素的数量也就是聚类权重对主色进行排序。权重大的聚类说明这一片颜色在图片里占的面积大应该排在前面。之后再把 RGB 转成 Hex输出成 JSON 或写入文件。整个流程用文字描述就是读图 - 缩放 - 取像素 - RGB 转 Lab - K-Means 聚类 - 提取聚类中心 - Lab 转回 RGB - 按权重排序 - 输出 Hex。如果你想把结果直接展示在网页上还需要额外加一层“把 Hex 渲染成调色板”的逻辑。在 HTML 里这个逻辑非常简单只要把颜色值拼成 CSS 的背景色即可。但是这里要提醒一点颜色展示时背景色的选择会影响人眼感知。浅色背景和深色背景会让同一组颜色看起来不一样所以如果要让调色板结果稳定最好固定一个中性灰背景。这里还需要一个容易被忽略的细节结果整理时不要把 RGB 转 Hex 这一步放到聚类前面。聚类一定要在 Lab 空间完成转成 Hex 只是最终输出。如果你在聚类前就把颜色转成 Hex 字符串实际上又回到了字符串和离散值计算K-Means 无法正确工作。4. 环境准备与依赖安装在开始写代码前先准备环境。本文所演示的代码以 Python 3.9 及以上版本为准如果你使用的是 Python 3.12需要注意 PyTorch 或者其他依赖库的版本兼容性。这个项目本身不涉及 PyTorch所以主要需要确认的是 numpy、scikit-learn、opencv-python 和 Pillow 这几个库是否可用。建议新建一个虚拟环境避免污染全局 Python 环境。Windows、macOS、Linux 都可以用下面的命令创建虚拟环境版本细节不需要纠结创建成功后即可继续。python -m venv venv在 Windows 下激活虚拟环境venv\Scripts\activate在 macOS 或 Linux 下激活虚拟环境source venv/bin/activate然后安装依赖。这里列出了本项目最核心的依赖pip install numpy scikit-learn opencv-python-headless pillowopencv-python-headless是 OpenCV 的无界面版本适合在服务器或脚本环境中使用不会额外拉起 GUI 组件。如果你的环境需要展示图片也可以换成opencv-python区别只在于是否包含 GUI 相关模块。还需要说明的是如果在安装 scikit-learn 时遇到编译错误优先检查 Python 版本和 pip 版本。在绝大多数情况下使用官方 PyPI 源即可安装成功。如果你所在的网络环境下载慢可以临时切换国内镜像源但这与代码本身无关按自己习惯配置即可。安装完成后可以执行一个快速验证命令确认依赖可以正常导入python -c import numpy, sklearn, cv2, PIL; print(deps ok)如果看到deps ok说明环境已经准备完成。这一节虽然看起来很简单但实际开发中环境问题造成的报错比代码逻辑问题还要多。最常见的就是 OpenCV 导入失败、Pillow 和 OpenCV 同时解析图片时的格式冲突以及 scikit-learn 版本过旧导致KMeans参数变化。建议保持 scikit-learn 在一个相对新的版本上不要使用太老的版本。5. 主色提取完整代码实现核心代码不需要写得很长。下面这个 Python 脚本实现了完整的图片主色提取流程。建议把代码保存为extract_colors.py放在项目根目录。# 文件路径extract_colors.py import json import cv2 import numpy as np from sklearn.cluster import KMeans from pathlib import Path def read_image_rgb(image_path): # OpenCV 默认读入 BGR 格式必须转换为 RGB避免后续红蓝颠倒 bgr cv2.imread(str(image_path)) if bgr is None: raise ValueError(f无法读取图片: {image_path}) rgb cv2.cvtColor(bgr, cv2.COLOR_BGR2RGB) return rgb def resize_for_sampling(image, target_size100): # 统一缩放到较小的尺寸降低 K-Means 计算量 h, w image.shape[:2] scale min(target_size / w, target_size / h) new_size (max(1, int(w * scale)), max(1, int(h * scale))) resized cv2.resize(image, new_size, interpolationcv2.INTER_AREA) return resized def rgb_to_lab(rgb_pixels): # OpenCV 的 Lab 转换要求输入为 uint8且需要把像素组织成 HxWxC 格式 rgb_image rgb_pixels.reshape(1, -1, 3).astype(np.uint8) lab_image cv2.cvtColor(rgb_image, cv2.COLOR_RGB2LAB) lab_pixels lab_image.reshape(-1, 3) return lab_pixels def lab_to_rgb(lab_pixels): lab_image lab_pixels.reshape(1, -1, 3).astype(np.uint8) rgb_image cv2.cvtColor(lab_image, cv2.COLOR_LAB2RGB) return rgb_image.reshape(-1, 3) def rgb_to_hex(rgb): r, g, b [int(max(0, min(255, v))) for v in rgb] return #{:02x}{:02x}{:02x}.format(r, g, b) def kmeans_main_colors(rgb_pixels, n_colors5, random_state42): # 先转 Lab再聚类保证聚类距离更符合人眼感知 lab_pixels rgb_to_lab(rgb_pixels) kmeans KMeans(n_clustersn_colors, random_staterandom_state, n_init10) kmeans.fit(lab_pixels) cluster_centers kmeans.cluster_centers_ labels kmeans.labels_ counts np.bincount(labels, minlengthn_colors) # 按聚类包含的像素数量排序数量多说明该主色在图片中占比高 order np.argsort(counts)[::-1] results [] for idx in order: lab_center cluster_centers[idx] rgb_center lab_to_rgb(lab_center.reshape(1, 3))[0] hex_color rgb_to_hex(rgb_center) results.append({ color: hex_color, rgb: [int(v) for v in rgb_center], ratio: float(counts[idx] / len(labels)), }) return results def extract(image_path, n_colors5): image read_image_rgb(image_path) sampled resize_for_sampling(image, target_size100) pixels sampled.reshape(-1, 3) return kmeans_main_colors(pixels, n_colorsn_colors) def save_results(results, output_path): with open(output_path, w, encodingutf-8) as f: json.dump(results, f, ensure_asciiFalse, indent2) return output_path if __name__ __main__: import sys if len(sys.argv) 2: print(Usage: python extract_colors.py image_path [n_colors]) sys.exit(1) image_path sys.argv[1] n_colors int(sys.argv[2]) if len(sys.argv) 2 else 5 result extract(image_path, n_colorsn_colors) print(json.dumps(result, ensure_asciiFalse, indent2)) save_results(result, colors.json)这段代码的逻辑并不复杂但有几个细节需要重点解释。第一个细节是 OpenCV 的 BGR 转换。cv2.imread读取图片后返回的是 BGR 顺序如果不转成 RGB后面提取出来的颜色中红色和蓝色会互换。我记得在处理业务图片时有同事用默认读取方式跑出来的主色总是偏蓝排查了半天才发现是通道顺序写错了。第二个细节是缩放采样。resize_for_sampling把图片缩放到最长边不超过 100 像素这样一张图最多只有约 10000 个像素点参与聚类计算量非常小。如果你把target_size设置为 200结果会更精细一些但计算时间也会增加。对于绝大多数场景100 的默认值已经足够稳定。第三个细节是 K-Means 的n_init参数。scikit-learn 较新版本中n_init默认值是 10但如果你使用的版本比较老默认值可能不同。建议显式设置n_init10避免版本差异影响结果可复现性。同理random_state42保证多次运行结果一致这在算法调优和测试中很重要。第四个细节是ratio的计算。每个主色的占比是通过聚类标签统计得到的它表示原图中接近这个主色的像素比例。注意这个比例只是粗略估计并不代表人眼感知到的面积占比但用于排序和权重展示已经足够。运行方式如下python extract_colors.py sample.jpg 5执行后会在控制台输出 JSON并把结果写入colors.json文件。JSON 里的每个对象包含color、rgb和ratio三个字段分别表示 Hex 颜色、RGB 数组和聚类占比方便前端直接渲染。6. 可视化展示与效果验证代码跑通后你自然想看看提取出来的颜色到底长什么样。最简单的验证方式是把结果渲染成一张调色板图片或者生成一个 HTML 页面。这里给一个最小化的 HTML 展示方案保存为viewer.html它读取colors.json并渲染成带颜色块和占比信息的页面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleWhats Your Colors - 调色板预览/title style body { background: #f5f5f5; font-family: Microsoft YaHei, sans-serif; padding: 40px; } .palette { display: flex; gap: 12px; flex-wrap: wrap; } .color-card { width: 180px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background: #fff; } .color-block { height: 120px; } .color-info { padding: 12px; } .color-hex { font-weight: 600; margin-bottom: 4px; } .color-ratio { color: #888; font-size: 13px; } /style /head body h2颜色提取结果预览/h2 div idpalette classpalette/div script fetch(colors.json) .then(res res.json()) .then(colors { const container document.getElementById(palette); colors.forEach(item { const card document.createElement(div); card.className color-card; const block document.createElement(div); block.className color-block; block.style.background item.color; const info document.createElement(div); info.className color-info; const hexDiv document.createElement(div); hexDiv.className color-hex; hexDiv.textContent item.color; const ratioDiv document.createElement(div); ratioDiv.className color-ratio; ratioDiv.textContent 占比 (item.ratio * 100).toFixed(1) %; info.appendChild(hexDiv); info.appendChild(ratioDiv); card.appendChild(block); card.appendChild(info); container.appendChild(card); }); }) .catch(err { document.getElementById(palette).textContent 加载 colors.json 失败 err.message; }); /script /body /html这个页面本身不包含任何构建逻辑直接双击打开viewer.html就可以用但浏览器会拦截本地文件的fetch请求。如果你看到控制台报错最简单的解决办法是在项目目录下启动一个静态文件服务。用 Python 启动一行命令即可python -m http.server 8000然后访问http://localhost:8000/viewer.html。如果不出意外你会看到一个由 5 个色块组成的调色板每个色块下方显示对应的 Hex 值和占比。验证结果是否合理可以从几个角度看。先看主色是否真的代表图片的整体氛围如果原图是绿色调的森林照片主色里应该有多个绿色或墨绿色系颜色如果原图是暖色夕阳主色里应该有橙色、粉色、暗红色系颜色。再看占比排序是否合理面积最大的颜色应该排第一位而不是一个很显眼但面积很小的点缀色排第一位。最后看颜色数量是否够用K 值设得越小结果越概括K 值设得越大结果越精细。常规场景下 5 到 6 个主色已经足够。除了视觉验证也可以做一次量化对比。比如提取原图前先手动保存一张只包含纯色色块的图作为测试样本看看算法是否能提取出准确的颜色。这样可以排除图片内容复杂性对结果的影响快速定位代码逻辑问题。类似的测试手段在算法开发中非常常用别忽略它。7. 常见问题与排查方法在写颜色提取工具的时候遇到的坑往往不在算法本身而在图像处理链路和运行环境。这里整理一份排查清单按“先检查环境再检查通道再检查参数”的顺序来处理。问题现象可能原因排查方式解决方案提取出来的红色和蓝色颠倒OpenCV 读取后使用了 BGR未转换为 RGB随机取一个已知颜色图片测试结果读取图片后立即执行cv2.cvtColor(bgr, cv2.COLOR_BGR2RGB)每次运行结果不一致K-Means 初始化随机未设置 random_state多次运行对比结果显式设置random_state42必要时固定n_init主色整体偏灰聚类前没有转 Lab直接在 RGB 空间聚类输出中间像素值检查颜色分布在聚类前完成 RGB 到 Lab 的转换计算时间过长原图没有缩放几百万像素直接参与聚类打印参与聚类的像素数量先缩放图片再采样最长边设置为 100 到 200 像素cv2.imread返回 None图片路径错误或图片文件损坏检查路径是否存在尝试用 Pillow 读取修正路径或增加文件存在性校验导入 sklearn 报错scikit-learn 版本过旧或未安装检查pip show scikit-learn升级到新版或使用pip install -U scikit-learn运行 viewer.html 时无法加载 colors.json浏览器拦截本地 fetch 请求打开浏览器控制台查看网络请求使用python -m http.server 8000启动静态服务这里有一个容易被低估的问题图片格式兼容性。OpenCV 对某些少见格式支持有限。如果你的测试图片是 WebP 或特殊编码的 PNG建议先用 Pillow 打开并转成 RGB再交给 OpenCV 或直接转为 numpy 数组。两种方案可以结合使用不必只依赖一个库。还有一类问题出现在结果层面不算代码 bug但同样需要关注。比如提取出的 5 个主色非常接近肉眼看上去像同一个颜色。这种情况通常是因为图片本身颜色比较单一或者 K 值设置过大。解决办法是合并相近颜色或者采用更严格的后处理比如设定一个最小颜色距离阈值距离太近的两个聚类中心只保留权重更大的那个。这种做法在真实项目中很重要尤其是生成主题色时5 个几乎一样的颜色没有任何意义。另一个真实场景是白色和浅色图片。白色背景占很大面积时K-Means 很容易把浅灰色、米白色、纯白色分成多个主色导致调色板失去重点。这时候可以在聚类前把亮度极高、饱和度极低的像素统一归入背景色或者先做背景透明化处理。具体怎么做取决于你的业务目标但一定要知道这个现象的存在。8. 工程化与最佳实践如果你只是自己跑一个脚本前面几节的内容已经够用了。但如果你想把这个工具真正用到生产项目里或者做成一个 HTTP 服务下面几个工程化问题需要考虑清楚。第一个是输入安全。如果工具允许用户上传图片你不能直接信任上传内容。要限制图片大小、检查文件类型、限制图片尺寸。一个常见做法是把最大边长超过 3000 像素的图片直接缩放到 3000 像素以内再处理既避免超大图片耗尽内存也降低了解析恶意图片的风险。另外不要把文件名直接拼进文件路径防止路径穿越风险。对于图片内容本身Python 的 Pillow 和 OpenCV 都处理过大量格式但也不能保证所有图片都能安全解析建议在解析过程中做好异常捕获和超时控制。第二个是性能优化。即使单张图片处理只需要一两秒在批量任务中也不能忽略。最直接的优化手段是降采样。本文示例已经把图片缩放到 100 像素计算量已经很小。如果还要更快可以再做像素抽样比如只随机取 20000 个像素点参与 K-Means。另一个优化点是聚类算法。K-Means 在 K 值固定、数据量小的情况下已经很快如果你需要处理超大图片并且要求毫秒级响应可以考虑用小批量 K-Means或者用颜色直方图统计后再做聚类。后者更适合极高性能要求的场景。第三个是结果缓存。相同图片重复提取主色是没有必要的。你可以用图片的感知哈希作为缓存键把提取结果保存到 Redis 或本地文件。这样在流量较高时极大缩短响应时间。如果图片发生了轻微变化感知哈希仍然保持稳定这样也能命中缓存当然这取决于你的业务对“图片变化”的容忍度。对于商品主图这种相对固定的资源缓存效果非常好。第四个是输出规范。不要只输出 Hex建议同时输出 RGB、占比、聚类数量、图片尺寸和算法版本。这些信息对排查问题和后续调优都很有帮助。JSON 结构里保留ratio字段前端可以直接用于占比展示。如果未来想切换到不同算法例如改用 MiniBatchKMeans 或者均值漂移算法版本字段能告诉你当前结果是在哪个版本下生成的。第五个是视觉可访问性。当提取出来的颜色被用作文字背景或按钮背景时要考虑前景色与背景色的对比度。Web 内容无障碍指南要求普通文本的对比度至少为 4.5:1。如果你的业务涉及生成文本颜色建议在提取主色后自动计算亮暗模式下的对比度并选择对比度更高的前景色。比如深色背景上用白色文字浅色背景上用深色文字。这个逻辑不复杂但非常体现产品细节。第六个是测试策略。不要只看一两张图的输出就认为算法可用。建议准备一组覆盖不同风格的测试图片纯色图、风景图、人像图、插画、暗色图片、浅色图片、颜色极少的图片、颜色极多的图片。每次修改算法或依赖库版本后都跑一遍这组测试图片对比结果是否退化。可以把期望结果记录成基准文件用脚本自动对比差异而不是靠肉眼判断。这样一旦某次改动导致结果明显偏离预期你可以在很早的阶段发现。第七个是接口设计。如果你要把颜色提取能力开放给其他服务建议提供两个接口一个用于单张图片分析一个用于批量分析。单张接口接收图片文件或图片 URL返回主色调、调色板和占比。批量接口可以使用异步任务提交后返回任务 ID客户端轮询任务状态。这种做法比较重但在真实项目中更健壮避免大批量请求阻塞服务进程。关于版本兼容和依赖管理还有一个提醒scikit-learn 和 OpenCV 都属于更新较快的库建议在项目里锁定版本号使用requirements.txt或pyproject.toml固定依赖避免某次自动升级引入不兼容变更。在生产环境部署时优先使用 Docker 镜像把 Python 版本和依赖版本统一固化这样既方便回滚也能减少本地环境和线上环境不一致造成的问题。9. 总结与下一步方向到这里一个完整的图片主色提取与配色展示工具已经跑通了。最核心的收获可以归纳为三点第一颜色提取的关键在于选择合适的颜色空间RGB 直接聚类远不如 Lab 空间稳定第二流程上必须先缩放采样再做 K-Means 聚类最后按聚类权重排序输出第三工程落地时不能只写一个函数还要考虑输入安全、缓存、性能、可访问性和测试基准。如果你接下来想继续完善这个项目有几个方向值得深入。一是把 K-Means 换成更复杂的调色板生成算法让输出的颜色在视觉上更有美感和区分度。二是加入 CIEDE2000 颜色距离公式它比 Lab 空间里的欧氏距离更符合人眼感知适合做颜色合并和去重。三是把脚本改造成 FastAPI 服务让前端可以通过接口上传图片并实时获取颜色数据。四是把提取结果用于动态主题生成 CSS 变量实现页面主题色自动适配。这些都是“Whats Your Colors”这个项目可以继续生长的地方。最后提醒一句在生产环境使用图片上传功能时务必做好文件类型校验、大小限制和异常捕获在批量处理大量图片时优先使用缓存和异步任务在提取颜色结果用于文字或界面元素时记得检查对比度。工具本身不难真正考验的是把它接入真实业务时对各种边界情况的理解。建议先拿自己的图片库跑一遍看看结果是否符合直觉再决定后续怎么扩展。