Соберите палитру фирменных цветов из собственных фото товара
Вытащите настоящие цвета с фото товара и упаковки, дайте каждому цвету роль и проверьте каждую пару «текст на фоне» по контрасту WCAG, прежде чем она попадёт в объявление, подпись или финальный кадр.
У многих небольших брендов есть файл логотипа, но нет списка цветов. Цвета живут в самом продукте: в бутылке, этикетке, коробке, ткани. Когда приходит время делать объявление, миниатюру или стиль подписи, кто-то на глаз подбирает HEX-код по фото и надеется на лучшее.
Это можно сделать лучше примерно за десять минут. Возьмите цвета с фото реального продукта, дайте каждому роль и проверьте, какие пары читаются как текст. Наш бесплатный экстрактор цветовой палитры делает и извлечение, и проверку прямо в браузере, ничего не загружая.
Почему начинать нужно с продукта, а не с мудборда
Люди узнают ваш продукт по тому, как он выглядит на полке или в руке. Объявление, цвета которого совпадают с упаковкой, сразу выглядит как тот же бренд, а объявление с другими цветами кажется подделкой. Палитра, взятая с продукта, честно отражает то, что вы на самом деле продаёте, а мудборд это делает редко.
Это работает и для услуг. Если физического продукта нет, используйте лучшие скриншоты, витрину или фото команды, всё, с чем люди уже вас ассоциируют.
Шаг 1: выберите и обрежьте фото
Выберите два-три чистых фото: продукт на нейтральном фоне, лицевую сторону упаковки и одно лайфстайл-фото, которое вам нравится. Затем обрежьте жёстко. Экстрактор учитывает каждый пиксель, который ему отдали, поэтому бутылка на деревянном столе вернёт стол как один из цветов бренда. Обрежьте до продукта и этикетки, и палитра будет именно продуктом.
По возможности снимайте при дневном или ровном свете. Тёплая лампа делает белую упаковку кремовой, и каждый извлечённый цвет будет нести этот оттенок.
Шаг 2: извлеките от пяти до восьми цветов
Загрузите каждое фото в экстрактор и запросите 5 или 6 цветов для чистого снимка продукта или 8 для загруженного. Он группирует похожие пиксели и выводит среднее каждой группы, от самого большого к меньшему, с долей изображения, которую она занимает. Стартовая точка фиксирована, поэтому одно и то же фото всегда даёт одну и ту же палитру, а небольшой яркий акцент, например красная крышка на белой бутылке, получает собственный образец, а не растворяется в среднем.
Прогоните все фото и ищите цвета, которые повторяются. Это и есть бренд. Цвет, который встречается только на одном снимке, обычно принадлежит фону или свету.
Шаг 3: дайте каждому цвету роль
Палитра полезна, только если у каждого цвета есть роль. Большинству брендов нужны четыре:
- Фон: цвет, на котором держится большая часть макета. Часто это базовый цвет упаковки или светлый нейтральный.
- Текст: тёмный цвет, который читается на фоне. Подойдёт почти чёрный. Глубокий фирменный цвет работает лучше, если проходит проверку контрастности.
- Акцент: яркий цвет для кнопки, ценника или одного выделенного слова.
- Вспомогательный: один-два нейтральных для блоков, разделителей и второстепенного текста.
Не используйте всё, что дало фото. Пять названных цветов с понятными ролями сохранят сотню объявлений согласованными. Двенадцать не сохранят.
Шаг 4: проверьте контраст до того, как поставить цвет на что-либо
Пары цветов, которые хорошо смотрятся на большом мониторе, могут плохо читаться на телефоне на солнце, а людям с нарушениями зрения тем более. Рекомендации W3C по доступности веб-контента (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 |
Крупный текст это не меньше 18 пунктов или 14 пунктов полужирным, по определению WCAG. А числа жёсткие: в руководстве W3C по критерию 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 для крупного текста или Fail.
Шаг 5: запишите один раз
Экспортируйте палитру как CSS-переменные или JSON и храните рядом с файлами логотипа. Когда решите, переименуйте переменные по роли: --brand-bg, --brand-text, --brand-accent читаются лучше, чем --color-3 через месяц. Под каждой добавьте строку с тем, какие пары прошли проверку, чтобы никому не пришлось повторять её.
Затем сверьте числа с официальными данными, если они у вас есть. Фото даёт цвет, который увидела камера. Он близок к печатной упаковке, но не совпадает со спецификацией краски. Если у типографии или дизайнера есть точные значения, они важнее.
Использование палитры в рекламе и постах
- Подписи и субтитры: текст вашего цвета на плашке цвета фона или наоборот. Сначала проверьте пару.
- Финальные кадры: цвет фона с логотипом и одной строкой вашего текстового цвета. Акцентом можно залить форму кнопки за коротким призывом к действию.
- Миниатюры и обложки: один акцент, одно крупное читаемое слово и много фона.
- QR-коды на упаковке: фирменный цвет подойдёт, если он заметно темнее упаковки. Наш генератор QR-кодов предупреждает, когда контраст низкий.
Место Hermoso
Hermoso это AI-агент для маркетинга. Он изучает объявления, которые уже работают на вашем рынке, создаёт фирменные рекламные изображения и видео, публикует и планирует посты в ваши собственные соцсети и ведёт платные кампании в ваших рекламных кабинетах. Когда вы добавляете бренд по адресу сайта, он изучает ваши продукты, логотип и палитру. Подписи и финальные кадры не появляются, пока вы их не запросите, а когда запрашиваете, можно задать цвета текста, плашки и финального кадра через HEX-коды, так что пары, которые вы проверили здесь, и попадают в эфир. Работает в веб-приложении или внутри Claude, ChatGPT и Cursor через свой MCP-сервер.
Частые вопросы
Как найти HEX-коды цветов моего продукта?
Обрежьте чистое фото до продукта или упаковки и загрузите его в экстрактор цветовой палитры. Он выводит основные цвета в 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.
Сколько цветов должно быть в палитре бренда?
Столько, чтобы у каждого была роль: обычно фон, цвет текста, один акцент и один-два нейтральных. Пять названных цветов с понятными ролями лучше сохраняют согласованность объявлений, чем длинный список.
Цвета с фото точные?
Нет. Это то, что камера записала при данном освещении. Это близко к продукту, но не то же самое, что спецификация печати или краски. Если есть официальные значения, используйте их.