Márkaszín-paletta készítése saját termékfotóiból
Húzza ki a valódi színeket a termék- és csomagolófotóiból, adjon mindegyiknek szerepet, és minden szövegpárosítást ellenőrizzen WCAG-kontrasztra, mielőtt egy hirdetésbe, feliratba vagy befejező kártyába kerül.
Sok kis márkának van logófájlja, de nincs színlistája. A színek magában a termékben élnek: az üvegben, a címkén, a dobozon, a textilben. Amikor hirdetést, bélyegképet vagy feliratstílust kell készíteni, valaki egy fotóról kiolvas egy hex kódot, és reméli, hogy jó.
Ezt körülbelül tíz perc alatt jobban is csinálhatja. Húzza ki a színeket a valódi termékről készült fotókból, adjon mindegyiknek szerepet, és ellenőrizze, mely párok olvashatók szövegként. Az ingyenes színpaletta-kinyerő a böngészőben végzi el a kinyerést és az ellenőrzést, semmi nem töltődik fel.
Miért a terméknél kezdje, nem a hangulattáblánál
Az emberek a termékét a polcon vagy a kezükben látott megjelenéséről ismerik fel. Egy hirdetés, amelynek színei egyeznek a csomagolással, első pillantásra ugyanannak a márkának tűnik; az eltérő pedig másolatnak hat. A termékből vett paletta arról is őszinte, amit valójában eladnak, amit egy hangulattábla ritkán tud.
Szolgáltatásoknál is működik. Ha nincs fizikai terméke, használja legjobb képernyőképeit, üzletének homlokzatát vagy csapatfotóit, bármit, amit az emberek már Önhöz kapcsolnak.
1. lépés: válassza ki és vágja ki a fotókat
Válasszon két-három tiszta fotót: a terméket egyszerű háttéren, a csomagolás előlapjával, és egy életmód-képet, amelyet szeret. Aztán vágjon szorosan. A kinyerő minden pixelt megszámol, amit kap, így egy fa asztalon álló üveg az asztalt adja vissza az egyik márkaszínként. Vágjon a termékre és a címkére, és a paletta maga a termék lesz.
Ha lehet, nappali fényben vagy egyenletes fényben fotózzon. Egy meleg lámpa a fehér csomagolást krémszínűvé változtatja, és minden kinyert szín hordozza ezt az árnyalatot.
2. lépés: húzzon ki öt-nyolc színt
Húzza minden fotót az kinyerőbe, és tiszta termékfotóhoz 5 vagy 6, zsúfolthoz 8 színt kérjen. Hasonló pixeleket csoportosít, és minden csoport átlagát listázza, a legnagyobbtól kezdve, azzal együtt, hogy a kép mekkora részét fedi. A kiindulópont rögzített, így ugyanaz a fotó mindig ugyanazt a palettát adja, és egy kis élénk kiemelés, például egy piros kupak fehér üvegen, a saját mintát kapja ahelyett, hogy az átlagban eltűnne.
Futtassa az összes fotót, és keresse az ismétlődő színeket. Ezek a márka. Az a szín, amely csak egy felvételen jelenik meg, általában a háttér vagy a fény.
3. lépés: adjon minden színnek szerepet
A paletta csak akkor hasznos, ha minden színnek van szerepe. A legtöbb márkának négy kell:
- Háttér: az a szín, amelyen az elrendezés nagy része fekszik. Gyakran a csomagolás alapszíne vagy egy világos semleges.
- Szöveg: sötét szín, amely olvasható a háttéren. A majdnem fekete jól működik. Egy mély márkaszín még jobb, ha átmegy a kontrasztellenőrzésen.
- Kiemelés: a hangos szín, gombhoz, árcímkéhez vagy egyetlen kiemelt szóhoz.
- Támogató: egy-két semleges dobozokhoz, elválasztókhoz és másodlagos szöveghez.
Álljon ellen annak, hogy mindent felhasználjon, amit a fotó adott. Öt, egyértelmű szerepű, nevezett szín száz hirdetést is egységesen tart. Tizenkettő nem.
4. lépés: ellenőrizze a kontrasztot, mielőtt bármire kerül
A színpárok, amelyek egy nagy monitoron jól néznek ki, nehezen olvashatók lehetnek egy napsütötte telefonon, és még nehezebben gyengén látók számára. A W3C Web Content Accessibility Guidelines (WCAG) irányelvei erre számot adnak, a kontrasztarányt, amely 1:1-től (ugyanaz a szín kétszer) 21:1-ig (fekete fehéren) terjed. A küszöbértékek:
| Normál szöveg | Nagy szöveg | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
A nagy szöveg a WCAG definíciója szerint legalább 18 pont, vagy 14 pont félkövér. A számok pedig kemény határok: a W3C 1.4.3-as útmutatása szerint a kiszámított arányt nem szabad kerekíteni, így a 4,499:1 nem felel meg a 4,5:1-nek.
A WCAG webes tartalomra íródott, nem hirdetésekre, de az érvelés minden képernyőn megjelenő szövegre igaz, beleértve a videókba égetett feliratokat és a befejező kártya szavait is.
Egy kidolgozott példa
Tegyük fel, hogy a csomagolása egy sötétkék #1a3c6e, egy krémszín #fdf6e3 és egy narancs #e07a2e színt ad.
A képlet (L1 + 0,05) / (L2 + 0,05), ahol L1 a világosabb szín, L2 pedig a sötétebb relatív fényessége. A relatív fényesség 0-tól (fekete) 1-ig (fehér) tart. A sötétkék nagyjából 0,046, a krém nagyjából 0,923, a narancs nagyjából 0,300.
- Sötétkék szöveg krémen: (0,923 + 0,05) / (0,046 + 0,05) = 0,973 / 0,096, a kerekített számokkal nagyjából 10,1, pontosan 10,16:1. Ez minden méretben átmegy az AAA-n. Ez a fő párosítása.
- Narancs szöveg krémen: (0,923 + 0,05) / (0,300 + 0,05) = 0,973 / 0,350, nagyjából 2,78:1. Ez még nagy szövegnél is elbukik. A narancs nem vihet szavakat krémen.
- Fekete szöveg narancson: (0,300 + 0,05) / (0 + 0,05) = 0,350 / 0,05, ami a kerekített számokkal 7,0, pontosan 6,99:1. Ez minden szövegnél átmegy az AA-n, de kicsit lemarad az AAA-ról. Gombfelirathoz megfelelő.
- Krémszöveg sötétkéken: ugyanaz a pár, mint az elsőnél, tehát ugyanaz a 10,16:1. A pár megfordítása sosem változtatja meg az arányt.
A szerepek így szinte maguktól adódnak: krém háttér, sötétkék szöveg, a narancs pedig kiemelő forma, rajta fekete szavakkal (sötétkék narancson csak 3,65:1, ami egyedül a nagy szövegre elég AA). A kinyerő az egész rácsot egyszerre mutatja: minden szín minden másikkal szemben, plusz fehér és fekete, és minden cella AAA, AA, AA nagy szöveg vagy Nem felel meg minősítést kap.
5. lépés: írja le egyszer
Exportálja a palettát CSS egyéni tulajdonságokként vagy JSON-ként, és tartsa a logófájljai mellett. Miután eldöntötte, nevezze át a változókat szerepük szerint: a --brand-bg, --brand-text, --brand-accent egy hónap múlva is könnyebben olvasható, mint a --color-3. Mindegyik alá írjon egy sort, amely megmondja, mely párosítások mentek át, hogy senkinek ne kelljen újra ellenőriznie.
Ezután hasonlítsa össze a számokat mindennel, amije hivatalosan van. A fotó azt a színt adja, amit a kamera látott, ami közel van a nyomtatott csomagoláshoz, de nem azonos a festékspecifikációval. Ha a nyomdásznak vagy a tervezőnek pontos értékei vannak, azok az érvényesek.
A paletta használata hirdetésekben és bejegyzésekben
- Feliratok és címfeliratok: a szövegszín egy háttérszínű dobozon, vagy fordítva. Előbb ellenőrizze a párt.
- Befejező kártyák: a háttérszín a logóval és egy sorral a szövegszínben. A kiemelőszín tölthet ki egy gombalakot a rövid felhívás mögött.
- Bélyegképek és borítók: egy kiemelés, egy nagy, olvasható szó, sok háttér.
- QR-kódok a csomagoláson: egy márkaszín akkor működik, ha egyértelműen sötétebb a csomagolásnál. A QR-kód-generátorunk figyelmeztet, ha alacsony a kontraszt.
Hol illik ide a Hermoso
A Hermoso egy AI marketingügynök. Kikutatja, milyen hirdetések működnek már a piacán, márkához illő kép- és videóhirdetéseket készít, bejegyzéseket készít és ütemez a saját közösségi fiókjaira, és fizetett kampányokat futtat a saját hirdetési fiókjaiban. Amikor a weboldalukról hozzáadják a márkát, megtanulja a termékeit, a logóját és a palettáját. A feliratok és a befejező kártyák nem kerülnek be, amíg nem kéri őket, és ha kéri, hex kódokkal állíthatja be a szöveg, a doboz és a befejező kártya színeit, így az itt ellenőrzött párosítások lesznek azok, amelyek megjelennek. A webalkalmazásban vagy a Claude, a ChatGPT és a Cursor belsejében működik, az MCP-szerverén keresztül.
Gyakori kérdések
Hogyan találom meg a termékszínek hex kódjait?
Vágjon egy tiszta fotót a termékre vagy a csomagolásra, és húzza egy színpaletta-kinyerőbe. Ez a fő színeket HEX, RGB és HSL formában listázza. Futtasson két-három fotót, és tartsa meg az ismétlődő színeket.
Milyen kontrasztarány kell a szövegnek?
A WCAG 2.2 szerint az AA szint 4,5:1-et kér a normál szövegnél és 3:1-et a nagy szövegnél, az AAA pedig 7:1-et és 4,5:1-et. A nagy szöveg legalább 18 pont, vagy 14 pont félkövér.
Elég a 4,49:1 az AA-hoz?
Nem. A W3C szerint az arányt nem szabad kerekíteni a küszöbértékhez hasonlításkor, így a 4,499:1 nem felel meg a 4,5:1-nek.
Hány színből álljon egy márkapaletta?
Annyiból, hogy mindegyiknek legyen szerepe: általában egy háttér, egy szövegszín, egy kiemelés és egy-két semleges. Öt, egyértelmű szerepű, nevezett szín következetesebbé teszi a hirdetéseket, mint egy hosszú lista.
Pontosak a fotóról kinyert színek?
Nem. Azok azok a színek, amelyeket a kamera rögzített az adott fényben; közel vannak a termékhez, de nem azonosak a nyomtatott vagy festékspecifikációval. Ha van hivatalos értékük, azokat használja.