颜色是如何提取的
工具会先生成图像的一张小副本，最长边不超过 160 像素，并统计所有非透明的像素。然后用 k-means 聚类把相似的像素归为一组，并报告每组的平均颜色，最大的组排在最前面。每个色块上的百分比表示该组在图像中所占的比例。
起点是固定的，而非随机：它从最常见的颜色开始，然后不断添加与已有颜色差距最大的颜色。因此同一张图像每次都会得到相同的调色板，而小而鲜艳的点缀色（比如白盒子上的红色标志）会拥有自己的色块，而不是被平均进背景里。
建议选取 5 到 8 种颜色。素色背景上的产品照通常需要 5 或 6 种。内容丰富的生活场景照用 8 种效果更好。如果图像中不同颜色的数量少于你所要求的，工具会提示你，并显示它找到的颜色。
读懂对比度矩阵
每种颜色都会与其他每种颜色，以及纯白和纯黑两两配对，每个单元格显示行颜色文字在列颜色背景上的对比度。该比值遵循 WCAG 定义：(L1 + 0.05) / (L2 + 0.05)，其中 L1 和 L2 分别是较亮颜色和较暗颜色的相对亮度。它的取值范围从 1:1（同一种颜色两次）到 21:1（白底黑字）。
这些标签是 WCAG 设定的阈值：
- AA：常规文字至少 4.5:1，大号文字至少 3:1（成功标准 1.4.3）。
- AAA：常规文字至少 7:1，大号文字至少 4.5:1（成功标准 1.4.6）。
- 大号文字指至少 18 点，或 14 点加粗（WCAG 对大尺寸的定义）。
标注为 AA 大号 的单元格适合大标题，但对说明文字来说太浅。W3C 对 1.4.3 的说明也指出该比值不应四舍五入，因此 4.499:1 不满足 4.5:1。工具按精确数值判断，并显示截断到两位小数后的结果，绝不向上进位。
一个实例
假设照片给你一个海军蓝 #1a3c6e 和一个米白 #fdf6e3。海军蓝的相对亮度约为 0.046，米白约为 0.923。比值为 (0.923 + 0.05) / (0.046 + 0.05)，按这些四舍五入后的数字约为 10.1:1，按精确数字约为 10.16:1。这通过了所有文字的 AAA 标准，所以在米白结尾卡上用海军蓝文字在任何尺寸下都安全。把中橙色 #e07a2e 放在同样的米白上，比值降到 2.78:1，连大号文字都不达标。把橙色留给带黑字的按钮（6.99:1，达到 AA 但差一点没到 AAA），或者用在没有文字的图形上。
使用导出功能
CSS 导出是一个 :root 自定义属性块，--color-1 对应占图像比例最大的颜色，依此类推。JSON 则包含每种颜色的十六进制值、RGB、HSL 及其在图像中所占的比例，便于粘贴到设计 token 文件中或交给脚本处理。确定好哪个是背景色、哪个是文字色、哪个是点缀色后，再给这些变量重命名。
这个工具不做什么
它并不知道哪些颜色属于你的品牌。一张产品放在木桌上的照片会把桌子也算进去。如果你只想要产品的颜色，请先裁剪到产品或包装。它也无法告诉你精确的印刷颜色：这些数字是文件里的像素，已经经过你的相机和任何编辑处理，所以发布前请对照你的品牌指南核对。而且它只判断文字对比度。WCAG 对图标和界面元素有单独的规则，这个矩阵并不评估。
如果你不想手动做这些
Hermoso 是自动运行的营销工具：它会研究你所在市场中已经奏效的广告，制作符合品牌调性的图片和视频广告，安排发布，并在你自己的广告账户上投放付费广告。当你从网站添加品牌后，它会学习你的产品、标志和配色，你还可以用十六进制代码设置字幕和结尾卡的颜色。它可在网页应用中使用，也可通过 MCP 服务器在 Claude、ChatGPT 和 Cursor 中使用。
免费工具: 社交媒体尺寸指南 · Instagram 九宫格制作器 · Open Graph 生成器
常见问题
我如何从照片中获取配色方案？
把照片拖入工具，并选择你想要的颜色数量，从 5 到 8。它会把相似的像素分组，并按占比从大到小以 HEX、RGB 和 HSL 显示每组的平均颜色，每个旁边都有复制按钮。
文字需要多大的对比度？
WCAG 2.2 的 AA 级要求普通文字至少 4.5:1、大号文字至少 3:1。AAA 级要求分别为 7:1 和 4.5:1。大号文字指至少 18 磅，或 14 磅加粗。
4.49:1 足够接近，能通过 AA 吗？
不行。W3C 指出，计算出的比例在与阈值比较时不应四舍五入，所以 4.499:1 达不到 4.5:1。本工具按精确数值判定。
为什么我每次得到的配色都一样？
聚类从一个固定点开始，即最常见的颜色，然后不断加入离已选颜色最远的颜色。没有随机起点，所以同一张图片总是给出同一结果。
我的图片会被上传吗？
不会。它由你浏览器自带的文件读取器读取，并在你设备上的 canvas 中进行统计。不会向任何地方发送或存储。