Byg en brandfarvepalet ud fra dine egne produktfotos
Hent de rigtige farver ud af dine produkt- og emballagefotos, giv hver en rolle, og tjek hver tekstkombination mod WCAG-kontrast, før den kommer på en annonce, et caption eller et end card.
Mange små brands har en logofil og ingen farveliste. Farverne findes i selve produktet: flasken, etiketten, æsken, stoffet. Når det er tid til at lave en annonce, en thumbnail eller en captionstil, kigger nogen på en hex-kode fra et foto og håber på det bedste.
Du kan gøre det bedre på cirka ti minutter. Hent farverne fra fotos af det rigtige produkt, giv hver en rolle, og tjek hvilke par der kan læses som tekst. Vores gratis farvepalet-udtrækker gør både udtrækningen og kontrollen i din browser, uden at noget uploades.
Hvorfor starte med produktet og ikke et stemningsbræt
Folk genkender dit produkt på, hvordan det ser ud i hylden eller i hånden. En annonce, hvis farver matcher emballagen, føles som det samme brand med det samme, og en der glider væk, føles som en kopi. En palet, der er hentet fra produktet, er også ærlig om, hvad du faktisk sælger, hvilket et stemningsbræt sjældent er.
Det virker også for services. Har du intet fysisk produkt, så brug dine bedste skærmbilleder, din butiksfacade eller dine holdfotos, alt det folk allerede forbinder med dig.
Trin 1: vælg og beskær fotos
Vælg to eller tre rene fotos: produktet på en neutral baggrund, emballagens forside og et livsstilsbillede, du godt kan lide. Beskær derefter skarpt. Udtrækkeren tæller hver pixel, du giver den, så en flaske på et træbord returnerer træbordet som en af dine brandfarver. Beskær til produktet og etiketten, så er paletten produktet.
Fotografer i dagslys eller i jævnt lys, hvis du kan. En varm lampe gør hvid emballage cremefarvet, og hver farve du henter får det tint med.
Trin 2: udtræk fem til otte farver
Træk hvert foto ind i udtrækkeren, og bed om 5 eller 6 farver til et rent produktbillede eller 8 til et travlt et. Den grupperer ens pixels og viser gennemsnittet af hver gruppe, største først, med den andel af billedet hver dækker. Startpunktet er fast, så det samme foto giver altid den samme palet, og en lille lys accent, som en rød hætte på en hvid flaske, får sit eget farvefelt i stedet for at blive udjævnet.
Kør alle dine fotos, og kig efter de farver, der går igen. Det er brandet. En farve, der kun dukker op på ét billede, er som regel baggrunden eller lyset.
Trin 3: giv hver farve en rolle
En palet er først nyttig, når hver farve har en rolle. De fleste brands har brug for fire:
- Baggrund: den farve, det meste af layoutet ligger på. Ofte emballagens grundfarve eller en lys neutral.
- Tekst: en mørk farve, der kan læses på baggrunden. Næsten sort fungerer. En dyb brandfarve virker bedre, hvis den består kontrasttjekket.
- Accent: den kraftige farve, til en knap, et prismærkat eller ét fremhævet ord.
- Støtte: en eller to neutrale til bokse, skillelinjer og sekundær tekst.
Lad være med at bruge alt, fotoet gav dig. Fem navngivne farver med klare roller holder hundrede annoncer ensartede. Tolv gør ikke.
Trin 4: tjek kontrast, før den kommer på noget
Farvepar, der ser fine ud på en stor skærm, kan være svære at læse på en telefon i solen og meget sværere for folk med nedsat syn. W3C's Web Content Accessibility Guidelines giver et tal for det, kontrastforholdet, der går fra 1:1 (den samme farve to gange) til 21:1 (sort på hvid). Grænserne er:
| Normal tekst | Stor tekst | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Stor tekst betyder mindst 18 point eller 14 point fed, ifølge WCAG's definition. Og tallene er hårde grænser: W3C's vejledning om 1.4.3 siger, at et beregnet forhold ikke må afrundes, så 4.499:1 opfylder ikke 4.5:1.
WCAG er skrevet til webindhold, ikke til annoncer, men begrundelsen gælder for al tekst på en skærm, inklusive tekst brændt ind i en video og ordene på et end card.
Et eksempel
Lad os sige, din emballage giver dig en marineblå #1a3c6e, en creme #fdf6e3 og en orange #e07a2e.
Formlen er (L1 + 0.05) / (L2 + 0.05), hvor L1 er den lysere farves relative luminans og L2 den mørkere. Relativ luminans går fra 0 for sort til 1 for hvid. Marineblå giver cirka 0.046, cremen cirka 0.923 og orange cirka 0.300.
- Marineblå tekst på creme: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, cirka 10.1 med disse afrundede tal, og præcis 10.16:1. Det består AAA i enhver størrelse. Det er dit vigtigste par.
- Orange tekst på creme: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, cirka 2.78:1. Det fejler selv for stor tekst. Orange bør ikke bære ord på creme.
- Sort tekst på orange: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, hvilket er 7.0 med disse afrundede tal, men 6.99:1 præcist. Det består AA for al tekst, men rammer lige under AAA. Fint til en knaptekst.
- Creme tekst på marineblå: det samme par som det første, altså samme 10.16:1. Man ændrer aldrig forholdet ved at vende et par om.
Så rollerne vælger sig næsten selv: creme baggrund, marineblå tekst, orange som accentform med sorte ord på (marineblå på orange er kun 3.65:1, hvilket kun er AA for stor tekst alene). Farvegitteret viser hele dette på én gang, hver farve mod alle andre plus hvid og sort, og hver celle bedømmes AAA, AA, AA stor eller Fail.
Trin 5: skriv det ned én gang
Eksportér paletten som CSS-custom properties eller JSON, og gem den sammen med dine logofiler. Omdøb variablerne efter rolle, når du har besluttet dig: --brand-bg, --brand-text og --brand-accent er lettere at læse end --color-3 en måned senere. Skriv en linje under hver, der siger, hvilke kombinationer der bestod, så ingen behøver at tage tjekket om.
Tjek derefter tallene mod alt officielt, du allerede har. Et foto giver dig den farve, dit kamera så, som er tæt på den trykte emballage, men ikke identisk med blækspecifikationen. Hvis din trykker eller designer har præcise værdier, vinder de.
Brug af paletten i annoncer og opslag
- Captions og undertekster: din tekstfarve på en boks i din baggrundsfarve, eller omvendt. Tjek parret først.
- End cards: baggrundsfarven med logoet og en linje i din tekstfarve. Accenten kan udfylde en knapform bag en kort opfordring til handling.
- Thumbnails og covers: én accent, ét stort læsbart ord og masser af baggrund.
- QR-koder på emballage: en brandfarve virker, hvis den er tydeligt mørkere end emballagen. Vores QR-kodegenerator advarer, når kontrasten er lav.
Hvor Hermoso passer ind
Hermoso er en AI-marketingagent. Den researcher de annoncer, der allerede virker på dit marked, laver brandtilpassede billed- og videoannoncer, udgiver og planlægger opslag til dine egne sociale konti og kører betalte kampagner på dine egne annoncekonti. Når du tilføjer dit brand fra dit website, lærer den dine produkter, dit logo og din palet. Captions og end cards holder sig fra, medmindre du beder om dem, og når du gør, kan du angive tekst-, boks- og end card-farver med hex-koder, så de par, du har tjekket her, er dem, der bliver brugt. Den virker i webappen eller inde i Claude, ChatGPT og Cursor via sin MCP-server.
Ofte stillede spørgsmål
Hvordan finder jeg hex-koderne til mine produktfarver?
Beskær et rent foto til produktet eller emballagen, og træk det ind i en farvepalet-udtrækker. Den viser hovedfarverne som HEX, RGB og HSL. Kør to eller tre fotos, og behold de farver, der går igen.
Hvilket kontrastforhold skal tekst have?
Under WCAG 2.2 kræver niveau AA 4.5:1 for normal tekst og 3:1 for stor tekst, og AAA kræver 7:1 og 4.5:1. Stor tekst er mindst 18 point eller 14 point fed.
Er 4.49:1 godt nok til AA?
Nej. W3C siger, at forholdet ikke må afrundes, når det sammenlignes med grænsen, så 4.499:1 opfylder ikke 4.5:1.
Hvor mange farver skal en brandpalet have?
Nok til at give hver en rolle: typisk en baggrund, en tekstfarve, én accent og en eller to neutrale. Fem navngivne farver med klare roller holder annoncer mere ensartede end en lang liste.
Er farverne fra et foto nøjagtige?
Nej. De er det, kameraet registrerede under det lys, tæt på produktet, men ikke det samme som en trykt eller blækspecifikation. Har du officielle værdier, så brug dem.