Sestavte barevnou paletu značky z vlastních fotek produktů
Vytáhněte skutečné barvy z fotek produktu a obalu, každé přiřaďte roli a před použitím na reklamě, popisku nebo koncové kartě zkontrolujte každou kombinaci textu podle kontrastu WCAG.
Spousta malých značek má soubor s logem a žádný seznam barev. Barvy jsou v samotném produktu: v láhvi, na etiketě, v krabičce, v látce. Když přijde čas na reklamu, miniaturu nebo styl popisků, někdo odhadne hex kód z fotky a doufá, že sedí.
Za zhruba deset minut to můžete udělat lépe. Vytáhněte barvy z fotek skutečného produktu, přiřaďte každé roli a zkontrolujte, které dvojice se dají číst jako text. Náš bezplatný extraktor barevné palety to vytáhne i zkontroluje přímo ve vašem prohlížeči, bez nahrávání čehokoli.
Proč začít od produktu, a ne z moodboardu
Lidé poznají váš produkt podle toho, jak vypadá na polici nebo v ruce. Reklama, jejíž barvy odpovídají obalu, působí na první pohled jako stejná značka, zatímco reklama, která se odchyluje, působí jako padělek. Paleta odvozená z produktu je také upřímná o tom, co skutečně prodáváte, což moodboard zřídka je.
Funguje to i pro služby. Pokud nemáte fyzický produkt, použijte své nejlepší snímky obrazovky, vaši provozovnu nebo fotky týmu, cokoli si lidé s vámi spojují.
Krok 1: vyberte a oříznete fotky
Zvolte dvě nebo tři čisté fotky: produkt na jednolitém pozadí, obal čelem a jednu lifestylovou fotku, která se vám líbí. Pak ořízněte důsledně. Extraktor počítá každý pixel, který mu dáte, takže láhev na dřevěném stole vrátí stůl jako jednu z barev značky. Oříznete-li na produkt a etiketu, bude paletu tvořit produkt.
Fotografujte za denního světla, nebo aspoň při co nejjasnějším světle. Teplá lampa promění bílý obal v krémový a každá barva, kterou vytáhnete, ponese ten nádech.
Krok 2: vytáhněte pět až osm barev
Nahrajte každou fotku do extraktoru a vyžádejte si 5 nebo 6 barev u čisté fotky produktu, nebo 8 u rušné. Extraktor seskupí podobné pixely a vypíše průměr každé skupiny, od největší, se zastoupením na obrázku. Výchozí bod je pevný, takže stejná fotka vždy dá stejnou paletu, a malý jasný akcent, třeba červený uzávěr na bílé láhvi, dostane vlastní vzorek místo toho, aby zanikl v průměru.
Spusťte všechny fotky a hledejte barvy, které se opakují. Ty jsou značka. Barva, která se objeví jen na jednom snímku, bývá pozadí nebo světlo.
Krok 3: každé barvě přiřaďte roli
Paleta je užitečná jen tehdy, když má každá barva roli. Většina značek potřebuje čtyři:
- Pozadí: barva, na které leží většina rozvržení. Často základní barva obalu nebo světlý neutrální tón.
- Text: tmavá barva čitelná na pozadí. Téměř černá funguje. Hlubší barva značky funguje lépe, pokud projde kontrolou kontrastu.
- Akcent: výrazná barva pro tlačítko, cenovou nálepku nebo jedno zvýrazněné slovo.
- Podpůrná: jeden nebo dva neutrální tóny pro boxy, oddělovače a sekundární text.
Nesnažte se použít všechno, co vám fotka dala. Pět pojmenovaných barev s jasnými rolemi udrží konzistentních sto reklam. Dvanáct ne.
Krok 4: zkontrolujte kontrast, než barvu dáte na cokoli
Barevné dvojice, které vypadají dobře na velkém monitoru, mohou být na telefonu na slunci těžko čitelné a pro lidi se zrakovým postižením ještě hůř. Pokyny W3C pro přístupnost webového obsahu (WCAG) pro to uvádějí číslo, poměr kontrastu, který sahá od 1:1 (stejná barva dvakrát) po 21:1 (černá na bílé). Prahové hodnoty jsou:
| Běžný text | Velký text | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Velký text znamená alespoň 18 bodů nebo 14 bodů tučně podle definice WCAG. A čísla jsou pevná hranice: pokyn W3C k bodu 1.4.3 říká, že vypočítaný poměr se nesmí zaokrouhlovat, takže 4,499:1 nesplňuje 4,5:1.
WCAG byla napsána pro webový obsah, ne pro reklamy, ale úvaha se přenáší na jakýkoli text na obrazovce, včetně titulků vypálených do videa a slov na koncové kartě.
Příklad v praxi
Řekněme, že váš obal dává námořnickou modrou #1a3c6e, krémovou #fdf6e3 a oranžovou #e07a2e.
Vzorec je (L1 + 0,05) / (L2 + 0,05), kde L1 je relativní jas světlejší barvy a L2 tmavší. Relativní jas se pohybuje od 0 pro černou po 1 pro bílou. Námořnická modrá vychází zhruba na 0,046, krémová na 0,923 a oranžová na 0,300.
- Námořnickomodrý text na krémové: (0,923 + 0,05) / (0,046 + 0,05) = 0,973 / 0,096, asi 10,1 s těmito zaokrouhlenými čísly a přesně 10,16:1. To splňuje AAA při jakékoli velikosti. Toto je vaše hlavní dvojice.
- Oranžový text na krémové: (0,923 + 0,05) / (0,300 + 0,05) = 0,973 / 0,350, asi 2,78:1. To neprojde ani pro velký text. Oranžová by na krémové neměla nést slova.
- Černý text na oranžové: (0,300 + 0,05) / (0 + 0,05) = 0,350 / 0,05, což je 7,0 s těmito zaokrouhlenými čísly, ale přesně 6,99:1. To splňuje AA pro veškerý text, ale těsně nedosahuje AAA. V pořádku pro popisek tlačítka.
- Krémový text na námořnické modré: stejná dvojice jako první, takže stejných 10,16:1. Prohození dvojice poměr nikdy nezmění.
Role se tak téměř vyberou samy: krémové pozadí, námořnickomodrý text a oranžová jako tvar akcentu s černými slovy na něm (námořnická modrá na oranžové má jen 3,65:1, což stačí jako AA jen pro velký text). Extraktor ukáže celou tuto mřížku najednou: každou barvu proti každé ostatní plus bílou a černou, přičemž každá buňka je ohodnocena AAA, AA, AA pro velký text nebo Fail.
Krok 5: zapište to jednou
Exportujte paletu jako vlastní vlastnosti CSS nebo JSON a uložte ji vedle souborů s logem. Až se rozhodnete, přejmenujte proměnné podle role: --brand-bg, --brand-text, --brand-accent se čtou lépe než --color-3 za měsíc. Pod každou přidejte řádek, který říká, které dvojice prošly, aby nikdo nemusel kontrolu opakovat.
Pak čísla ověřte proti všemu oficiálnímu, co už máte. Fotka vám dá barvu, kterou zachytil váš fotoaparát, což je blízko vytištěného obalu, ale ne totožné s tiskovou specifikací inkoustu. Pokud má váš tiskař nebo grafik přesné hodnoty, mají přednost.
Použití palety v reklamách a příspěvcích
- Popisky a titulky: textová barva na boxu v barvě pozadí, nebo naopak. Nejdřív zkontrolujte dvojici.
- Koncové karty: barva pozadí s logem a jedním řádkem v textové barvě. Akcent může vyplnit tvar tlačítka za krátkou výzvou k akci.
- Miniatury a obálky: jeden akcent, jedno velké čitelné slovo, hodně pozadí.
- QR kódy na obalech: barva značky funguje, pokud je zřetelně tmavší než obal. Náš generátor QR kódů upozorní, když je kontrast nízký.
Kde se Hermoso hodí
Hermoso je AI marketingový agent. Zjistí, které reklamy už ve vašem trhu fungují, vytváří obrazové a video reklamy v souladu se značkou, publikuje a plánuje příspěvky na vaše vlastní sociální účty a spouští placené kampaně na vašich vlastních reklamních účtech. Když přidáte značku z webu, naučí se vaše produkty, logo a paletu. Popisky a koncové karty zůstávají vypnuté, dokud o ně nepožádáte, a když ano, můžete nastavit barvy textu, boxu a koncové karty hex kódy, takže dvojice, které jste zde ověřili, jsou ty, které se skutečně dostanou ven. Funguje ve webové aplikaci nebo uvnitř Claude, ChatGPT a Cursor přes svůj MCP server.
Časté dotazy
Jak zjistím hex kódy barev svých produktů?
Ořízněte čistou fotku na produkt nebo obal a vložte ji do extraktoru barevné palety. Vypíše hlavní barvy jako HEX, RGB a HSL. Spusťte dvě nebo tři fotky a ponechte barvy, které se opakují.
Jaký poměr kontrastu text potřebuje?
Podle WCAG 2.2 potřebuje úroveň AA poměr 4,5:1 pro běžný text a 3:1 pro velký text, AAA pak 7:1 a 4,5:1. Velký text má alespoň 18 bodů, nebo 14 bodů tučně.
Stačí 4,49:1 pro AA?
Ne. W3C říká, že poměr se při porovnání s prahem nesmí zaokrouhlovat, takže 4,499:1 nesplňuje 4,5:1.
Kolik barev by měla mít paleta značky?
Tolik, aby každá měla roli: obvykle pozadí, textovou barvu, jeden akcent a jeden nebo dva neutrální tóny. Pět pojmenovaných barev s jasnými rolemi udrží reklamy konzistentnější než dlouhý seznam.
Jsou barvy z fotky přesné?
Ne. Jsou to barvy, které fotoaparát zaznamenal při daném světle. Jsou blízko produktu, ale nejsou stejné jako tisková nebo inkoustová specifikace. Pokud máte oficiální hodnoty, použijte je.