Створіть палітру фірмових кольорів з власних фото продуктів
Витягніть справжні кольори з фото вашого продукту й упаковки, призначте кожному роль і перевірте кожну пару тексту та фону за контрастом WCAG, перш ніж вона потрапить на рекламу, підпис або завершальну картку.
Багато невеликих брендів мають файл логотипу, але немає списку кольорів. Кольори містяться в самому продукті: пляшці, етикетці, коробці, тканині. Коли настає час створити рекламу, мініатюру або стиль підпису, хтось на око підбирає код з фото і сподівається на краще.
Можна зробити краще приблизно за десять хвилин. Візьміть кольори з фото реального продукту, призначте кожному роль і перевірте, які пари читаються як текст. Наш безкоштовний екстрактор палітри кольорів виконує вилучення і перевірку у вашому браузері, нічого не завантажуючи на сервер.
Чому починати з продукту, а не з мудборду
Люди впізнають ваш продукт за тим, як він виглядає на полиці або в руці. Реклама, де кольори збігаються з упаковкою, виглядає як той самий бренд з першого погляду, а та, що відхиляється, схожа на підробку. Палітра, взята з продукту, також чесно відображає те, що ви насправді продаєте, чого мудборд рідко буває.
Це працює і для послуг. Якщо у вас немає фізичного продукту, використовуйте найкращі скриншоти, вітрину або фото команди, усе, з чим люди вже вас асоціюють.
Крок 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 для великого тексту або «Не проходить».
Крок 5: запишіть один раз
Експортуйте палітру як CSS-змінні або JSON і зберігайте поруч із файлами логотипу. Перейменуйте змінні за роллю, коли вирішите: --brand-bg, --brand-text, --brand-accent читаються краще, ніж --color-3 через місяць. Додайте під кожною рядок, де зазначте, які пари пройшли перевірку, щоб ніхто не мусив повторювати її.
Потім звірте числа з будь-чим офіційним, що вже маєте. Фото дає колір, який побачила ваша камера, він близький до друкованої упаковки, але не ідентичний специфікації чорнила. Якщо ваш друкар або дизайнер має точні значення, вони важливіші.
Використання палітри в рекламі та постах
- Підписи та субтитри: ваш колір тексту на блоці у фоновому кольорі або навпаки. Спершу перевірте пару.
- Завершальні картки: фоновий колір з логотипом і одним рядком кольором тексту. Акцент може заповнити форму кнопки за коротким закликом до дії.
- Мініатюри та обкладинки: один акцент, одне велике читабельне слово і багато фону.
- QR-коди на упаковці: фірмовий колір працює, якщо він явно темніший за упаковку. Наш генератор QR-кодів попереджає, коли контраст низький.
Де тут Hermoso
Hermoso є AI-агентом для маркетингу. Він досліджує рекламу, яка вже працює на вашому ринку, створює брендовані зображення та відеорекламу, публікує й планує пости у ваших власних соцмережах і запускає платні кампанії у ваших рекламних кабінетах. Коли ви додаєте бренд з вашого сайту, він вивчає ваші продукти, логотип і палітру. Підписи та завершальні картки лишаються вимкненими, доки ви їх не запросите, а коли запросите, можна задати кольори тексту, блоку та завершальної картки шістнадцятковими кодами, щоб пари, які ви перевірили тут, були тими, що виходять у роботу. Hermoso працює у веб-застосунку або всередині Claude, ChatGPT і Cursor через свій MCP-сервер.
Часті запитання
Як знайти шістнадцяткові коди кольорів мого продукту?
Обріжте чисте фото до продукту або упаковки і перетягніть його в екстрактор палітри кольорів. Він покаже основні кольори у форматах 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.
Скільки кольорів має бути в палітрі бренду?
Стільки, щоб кожен мав роль: зазвичай фон, колір тексту, один акцент і один-два нейтральних. П'ять іменованих кольорів з чіткими ролями тримають рекламу послідовнішою, ніж довгий список.
Чи точні кольори з фото?
Ні. Це те, що зафіксувала камера під цим світлом. Вони близькі до продукту, але не тотожні специфікації друку або чорнила. Якщо є офіційні значення, використовуйте їх.