很多小品牌有 logo 文件，却没有颜色清单。颜色其实就藏在产品本身里：瓶子、标签、盒子、面料。到了制作广告、缩略图或文案样式的时候，人们往往对着照片凭眼睛估一个十六进制色值，然后碰运气。
花大约十分钟就能做得更好。从真实产品的照片中提取颜色，为每种颜色赋予用途，并检查哪些组合可以作为文字清晰阅读。我们的免费配色提取工具在浏览器中完成提取和检查，不会上传任何内容。
为什么从产品出发，而不是从情绪板出发
人们认出你的产品，靠的是它在货架上或在手中的样子。与包装颜色一致的广告，一眼看去就像同一个品牌；颜色走样的广告则像是仿冒品。从产品中提取的色板也能诚实地反映你实际销售的东西，而情绪板往往做不到这一点。
服务类业务同样适用。如果你没有实物产品，就用你最好的截图、店面或团队照片，任何人们已经与你联想在一起的画面都可以。
第一步：挑选并裁剪照片
选择两三张干净的照片：纯色背景上的产品、正面朝上的包装，以及一张你喜欢的生活场景照。然后大力裁剪。提取工具会统计你提供的每一个像素，所以一瓶放在木桌上的酒，会把木桌的颜色当作你的品牌色之一返回。裁剪到只留下产品和标签，色板就只代表产品本身。
如果可以，尽量在日光或柔和的光线下拍摄。暖色台灯会让白色包装发黄，你提取的每种颜色都会带上这种色偏。
第二步：提取五到八种颜色
将每张照片拖入提取工具，对于干净的产品图请选择 5 或 6 种颜色，对于复杂的画面则选择 8 种。工具会把相似的像素归为一组，列出每组的平均色，按占比从大到小排列，并给出每种颜色占图片的比例。起始点是固定的，因此同一张照片总是得到同一个色板；一个小而鲜艳的强调色（比如白色瓶子上的红色瓶盖）会获得自己的色块，而不会被平均掉。
对所有照片都运行一遍，寻找反复出现的颜色。这些就是品牌色。只在一张照片里出现的颜色，通常是背景或光线。
第三步：为每种颜色赋予用途
只有每种颜色都有明确角色，色板才有用。大多数品牌需要四种角色：
- 背景：大部分版面所在的颜色。通常是包装的基础色，或浅色的中性色。
- 文字：在背景上清晰可读的深色。近黑色即可。如果通过了对比度检查，深色的品牌色效果更好。
- 强调色：醒目的那一个，用于按钮、价格贴纸或某个高亮词语。
- 辅助色：一到两种中性色，用于色块、分隔线和次要文字。
不要把照片给你的所有颜色都用上。五种有明确用途的命名颜色，就能让一百条广告保持一致；十二种则做不到。
第四步：在用于任何地方之前检查对比度
在大显示器上看起来没问题的颜色组合，在阳光下的手机上可能很难阅读，对视力较弱的人来说更是如此。W3C’的 Web 内容无障碍指南（WCAG）用对比度这个数值来衡量，范围从 1:1（同一颜色）到 21:1（黑底白字）。阈值如下：
| 普通文字 | 大号文字 | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
根据 WCAG’的定义，大号文字指至少 18 磅，或 14 磅粗体。另外，这些数值是硬性标准：W3C’s 1.4.3 指南指出，计算得出的比率不应四舍五入，因此 4.499:1 达不到 4.5:1。
WCAG 是为网页内容而写的，而不是为广告而写，但其中的道理同样适用于屏幕上的任何文字，包括烧录进视频的字幕和片尾画面上的文字。
一个完整示例
假设你的包装给出了海军蓝 #1a3c6e、奶油色 #fdf6e3 和橙色 #e07a2e。
公式为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。相对亮度的范围从黑色的 0 到白色的 1。海军蓝约为 0.046，奶油色约为 0.923，橙色约为 0.300。
- 奶油底上的海军蓝文字：(0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096，按这些四舍五入后的数值约为 10.1，精确值为 10.16:1。这在任何字号下都达到 AAA 级。这是你的主要搭配。
- 奶油底上的橙色文字：(0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350，约为 2.78:1。即使是大号文字也不达标。橙色不应用于在奶油色上承载文字。
- 橙色底上的黑色文字：(0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05，按四舍五入后的数值为 7.0，精确值为 6.99:1。这对所有文字都达到 AA 级，但略低于 AAA 级。用作按钮标签没有问题。
- 奶油色文字配海军蓝底：与第一组是同一对颜色，因此同为 10.16:1。颠倒一对颜色的前景与背景，比率永远不变。
因此各自的角色几乎是注定的：奶油色作背景，海军蓝作文字，橙色作为强调色块，上面放黑色文字（海军蓝配橙色仅为 3.65:1，只能满足大号文字的 AA 级）。提取工具会一次显示整个矩阵：每种颜色与其他所有颜色，以及白色和黑色的对比，每个单元格都会标注 AAA、AA、AA 大号或不达标。
第五步：记录一次
将色板导出为 CSS 自定义属性或 JSON，并与你的 logo 文件存放在一起。确定用途后，按用途重命名变量：--brand-bg、--brand-text、--brand-accent 比一个月后的 --color-3 更易读。在每个变量下方添加一行，说明哪些搭配已通过检查，这样就不必有人重做检查。
然后将这些数值与你已有的任何官方数据核对。照片给出的是相机所看到的颜色，它接近印刷的包装，但不完全等同于油墨规格。如果你的印刷商或设计师有精确数值，以他们的为准。
在广告和帖子中使用色板
- 文案和字幕：在背景色的色块上使用文字颜色，或者反过来。先检查这一对搭配。
- 片尾画面：以背景色为底，配上 logo 和一行文字颜色的文字。强调色可以填充在一句简短行动号召后面的按钮形状中。
- 缩略图和封面：一种强调色，一个大而清晰的字，大量留白的背景。
- 包装上的二维码：如果品牌色明显深于包装底色，就可以使用。我们的二维码生成器会在对比度过低时发出警告。
Hermoso 的定位
Hermoso 是一款 AI 营销代理。它研究你所在市场中已经奏效的广告，制作符合品牌调性的图片和视频广告，向你自己的社交账号发布并排期，并在你自己的广告账户中投放付费广告活动。当你通过网站添加品牌时，它会学习你的产品、logo 和色板。文案和片尾画面默认关闭，除非你要求开启；开启后，你可以用十六进制色值设置文字、色块和片尾画面的颜色，这样你在这里检查过的搭配就是最终发布的搭配。它可以在网页应用中使用，也可以通过其 MCP 服务器在 Claude、ChatGPT 和 Cursor 内使用。
常见问题
如何找到产品颜色的十六进制值？
将一张干净的照片裁剪到产品或包装，然后拖入配色提取工具。它会以 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。
品牌色板应有多少种颜色？
足以让每种颜色都有用途即可：通常是一个背景色、一个文字色、一个强调色，以及一到两个中性色。五种有明确角色的命名颜色，比一长串颜色更能保持广告的一致性。
从照片中提取的颜色准确吗？
不完全准确。它们是相机在该光线下记录下来的颜色，接近产品本身，但与印刷品或油墨规格并不相同。如果你有官方数值，请使用官方数值。