Creează o paletă de culori a brandului din fotografiile tale de produs
Extrage culorile reale din fotografiile produsului și ale ambalajului, dă fiecăreia un rol și verifică fiecare pereche de text în raport cu contrastul WCAG înainte să ajungă într-o reclamă, o legendă sau un end card.
Multe branduri mici au un fișier cu logo, dar nicio listă de culori. Culorile există în produs: sticla, eticheta, cutia, materialul. Când vine momentul să faci o reclamă, o miniatură sau un stil de legendă, cineva ghicește un cod hex dintr-o fotografie și speră că e bine.
Poți face mai bine în vreo zece minute. Extrage culorile din fotografii ale produsului real, dă fiecăreia un rol și verifică ce perechi sunt lizibile ca text. Extractorul gratuit de palete de culori face extragerea și verificarea direct în browserul tău, fără să încarce nimic.
De ce pornești de la produs, nu de la un mood board
Oamenii îți recunosc produsul după cum arată pe raft sau în mână. O reclamă ale cărei culori se potrivesc cu ambalajul pare, dintr-o privire, același brand, iar una care se abate pare o imitație. O paletă luată din produs este și sinceră despre ce vinzi de fapt, lucru pe care un mood board rareori îl face.
Funcționează și pentru servicii. Dacă nu ai un produs fizic, folosește cele mai bune capturi de ecran, vitrina sau fotografiile echipei, orice asociază deja oamenii cu tine.
Pasul 1: alege și decupează fotografiile
Alege două sau trei fotografii curate: produsul pe fundal simplu, fața ambalajului în față și o fotografie de stil de viață care îți place. Apoi decupează strâns. Extractorul numără fiecare pixel pe care i-l dai, așa că o sticlă pe o masă de lemn îți va returna masa ca una dintre culorile brandului. Decupează pe produs și pe etichetă, iar paleta va fi chiar produsul.
Fotografiază la lumina zilei sau, dacă poți, la lumină puternică. O lampă caldă face ambalajul alb să pară crem, iar fiecare culoare pe care o extragi va purta această nuanță.
Pasul 2: extrage între cinci și opt culori
Trage fiecare fotografie în extractor și cere 5 sau 6 culori pentru o fotografie de produs curată, sau 8 pentru una aglomerată. Acesta grupează pixelii similari și afișează media fiecărui grup, de la cel mai mare la cel mai mic, împreună cu porțiunea din imagine pe care o acoperă. Punctul de start este fix, deci aceeași fotografie dă mereu aceeași paletă, iar un accent mic și luminos, cum ar fi un capac roșu pe o sticlă albă, primește propria mostră în loc să fie dizolvat în medie.
Rulează toate fotografiile și caută culorile care se repetă. Acelea sunt brandul. O culoare care apare într-o singură fotografie este de obicei fundalul sau lumina.
Pasul 3: dă fiecărei culori un rol
O paletă este utilă doar când fiecare culoare are un rol. Majoritatea brandurilor au nevoie de patru:
- Fundal: culoarea pe care stă cea mai mare parte a unui layout. Adesea culoarea de bază a ambalajului sau un neutru deschis.
- Text: o culoare închisă, lizibilă pe fundal. Aproape negrul funcționează. O culoare de brand intensă funcționează și mai bine, dacă trece verificarea de contrast.
- Accent: culoarea care atrage atenția, pentru un buton, o etichetă de preț sau un singur cuvânt evidențiat.
- Suport: unul sau două neutre pentru casete, separatoare și text secundar.
Nu folosi tot ce ți-a dat fotografia. Cinci culori denumite, cu roluri clare, vor ține o sută de reclame consecvente. Doisprezece nu vor reuși.
Pasul 4: verifică contrastul înainte să pui culorile pe orice
Perechile de culori care arată bine pe un monitor mare pot fi greu de citit pe un telefon în soare, și mult mai greu pentru persoanele cu deficiențe de vedere. Ghidurile W3C pentru accesibilitatea conținutului web oferă un număr pentru asta, raportul de contrast, care variază de la 1:1 (aceeași culoare de două ori) la 21:1 (negru pe alb). Pragurile sunt:
| Text normal | Text mare | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Textul mare înseamnă cel puțin 18 pt, sau 14 pt îngroșat, potrivit definiției WCAG. Iar cifrele sunt limite ferme: ghidul W3C privind 1.4.3 spune că un raport calculat nu trebuie rotunjit, așa că 4.499:1 nu îndeplinește 4.5:1.
WCAG a fost scris pentru conținut web, nu pentru reclame, dar raționamentul se aplică oricărui text de pe ecran, inclusiv legendelor incorporate într-un videoclip și cuvintelor de pe un end card.
Un exemplu concret
Să presupunem că ambalajul tău îți dă un bleumarin #1a3c6e, un crem #fdf6e3 și un portocaliu #e07a2e.
Formula este (L1 + 0.05) / (L2 + 0.05), unde L1 este luminanța relativă a culorii mai deschise, iar L2 a celei mai închise. Luminanța relativă variază de la 0 pentru negru la 1 pentru alb. Bleumarinul ajunge la aproximativ 0.046, cremul la aproximativ 0.923, iar portocaliul la aproximativ 0.300.
- Text bleumarin pe crem: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, aproximativ 10.1 cu aceste cifre rotunjite, și 10.16:1 exact. Trece AAA la orice dimensiune. Aceasta este perechea ta principală.
- Text portocaliu pe crem: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, aproximativ 2.78:1. Nu trece nici pentru textul mare. Portocaliul nu ar trebui să poarte cuvinte pe crem.
- Text negru pe portocaliu: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, adică 7.0 cu aceste cifre rotunjite, dar 6.99:1 exact. Trece AA pentru tot textul, dar ratează puțin AAA. Este în regulă pentru eticheta unui buton.
- Text crem pe bleumarin: aceeași pereche ca prima, deci aceeași valoare, 10.16:1. Inversarea unei perechi nu schimbă niciodată raportul.
Așadar, rolurile se aleg aproape singure: fundal crem, text bleumarin, portocaliu ca formă de accent cu cuvinte negre pe el (bleumarinul pe portocaliu are doar 3.65:1, adică AA doar pentru text mare). Extractorul arată întreaga grilă deodată, fiecare culoare față de toate celelalte, plus alb și negru, iar fiecare celulă este notată AAA, AA, AA pentru text mare sau Eșec.
Pasul 5: notează-le o singură dată
Exportă paleta ca proprietăți CSS personalizate sau JSON și păstreaz-o lângă fișierele cu logo. Redenumește variabilele după rol, odată ce ai decis: --brand-bg, --brand-text, --brand-accent se citesc mai bine decât --color-3 peste o lună. Adaugă sub fiecare o linie care spune ce perechi au trecut, ca nimeni să nu mai trebuiască să refacă verificarea.
Apoi verifică cifrele față de orice document oficial ai deja. O fotografie îți oferă culoarea pe care a văzut-o camera, apropiată de ambalajul tipărit, dar nu identică cu specificația de cerneală. Dacă tipograful sau designerul tău are valori exacte, acelea au prioritate.
Folosirea paletei în reclame și postări
- Legende și subtitrări: culoarea textului pe o casetă în culoarea de fundal, sau invers. Verifică mai întâi perechea.
- End cards: culoarea de fundal cu logoul și o linie în culoarea textului. Accentul poate umple forma unui buton în spatele unui îndemn scurt.
- Miniaturi și coperte: un accent, un cuvânt mare și lizibil, mult fundal.
- Coduri QR pe ambalaj: o culoare de brand funcționează dacă este clar mai închisă decât ambalajul. Generatorul nostru de coduri QR avertizează când contrastul este scăzut.
Unde se potrivește Hermoso
Hermoso este un agent de marketing cu AI. Cercetează reclamele care deja funcționează pe piața ta, creează reclame de imagine și video în linie cu brandul tău, postează și programează în conturile tale de social media și rulează campanii plătite în conturile tale de publicitate. Când adaugi brandul din site-ul tău, învață produsele, logoul și paleta. Legendele și end card-urile rămân dezactivate dacă nu le ceri, iar când le ceri, poți seta culorile textului, casetei și end card-ului cu coduri hex, astfel încât perechile verificate aici să fie cele care ajung în producție. Funcționează în aplicația web sau în Claude, ChatGPT și Cursor, prin serverul său MCP.
Întrebări frecvente
Cum găsesc codurile hex ale culorilor produsului meu?
Decupează o fotografie curată pe produs sau pe ambalaj și trage-o într-un extractor de palete de culori. Acesta listează culorile principale ca HEX, RGB și HSL. Rulează două sau trei fotografii și păstrează culorile care se repetă.
Ce raport de contrast are nevoie textul?
Conform WCAG 2.2, nivelul AA cere 4.5:1 pentru text normal și 3:1 pentru text mare, iar AAA cere 7:1 și 4.5:1. Textul mare are cel puțin 18 pt, sau 14 pt îngroșat.
Este 4.49:1 suficient pentru AA?
Nu. W3C spune că raportul nu trebuie rotunjit atunci când este comparat cu pragul, deci 4.499:1 nu îndeplinește 4.5:1.
Câte culori ar trebui să aibă o paletă de brand?
Atâtea câte să primească fiecare un rol: de obicei un fundal, o culoare de text, un accent și unul sau două neutre. Cinci culori denumite, cu roluri clare, țin reclamele consecvente mai bine decât o listă lungă.
Sunt culorile dintr-o fotografie exacte?
Nu. Sunt ce a înregistrat camera sub lumina aceea, apropiate de produs, dar nu identice cu o specificație de tipar sau de cerneală. Dacă ai valori oficiale, folosește-le pe acelea.