Lag en merkefarge-palett fra dine egne produktbilder
Hent de ekte fargene ut av produkt- og emballasjebildene dine, gi hver en jobb, og sjekk hvert tekstpar mot WCAG-kontrast før det kommer på en annonse, en bildetekst eller et sluttkort.
Mange små merker har en logofil og ingen fargeliste. Fargene finnes i selve produktet: flasken, etiketten, esken, stoffet. Når det er tid for å lage en annonse, en miniatyr eller en bildetekststil, ser noen på en heksekode fra et bilde og håper på det beste.
Du kan gjøre det bedre på rundt ti minutter. Hent fargene fra bilder av det ekte produktet, gi hver en jobb, og sjekk hvilke par som er lesbare som tekst. Vår gratis fargepalett-ekstraktor gjør både uthentingen og kontrollen i nettleseren din, uten at noe lastes opp.
Hvorfor starte med produktet, ikke en stemningstavle
Folk kjenner igjen produktet ditt på hvordan det ser ut i hyllen eller i hånden. En annonse der fargene stemmer med emballasjen, føles som samme merke ved første blikk, og en som driver bort, føles som en kopi. En palett hentet fra produktet er også ærlig om hva du faktisk selger, noe en stemningstavle sjelden er.
Det fungerer også for tjenester. Har du ikke et fysisk produkt, bruk dine beste skjermbilder, butikkfronten eller teambilder, alt det folk allerede forbinder med deg.
Steg 1: velg og beskjær bildene
Velg to eller tre rene bilder: produktet på en enkel bakgrunn, emballasjens forside vendt mot kameraet, og ett livsstilsbilde du liker. Beskjær deretter hardt. Ekstraktoren teller hver piksel du gir den, så en flaske på et trebord gir bordet som en av merkefargene dine. Beskjær til produktet og etiketten, så er paletten produktet.
Fotografer i dagslys, eller i et jevnt lys hvis du kan. En varm lampe gjør hvit emballasje kremfarget, og alle farger du henter ut, vil bære den fargetonen.
Steg 2: hent ut fem til åtte farger
Dra hvert bilde inn i ekstraktoren og be om 5 eller 6 farger for et rent produktbilde, eller 8 for et travelt ett. Den grupperer lignende piksler og lister gjennomsnittet for hver gruppe, største først, med andelen av bildet hver dekker. Startpunktet er fast, så samme bilde gir alltid samme palett, og en liten lys aksentfarge, som en rød kork på en hvit flaske, får sin egen fargeprøve i stedet for å bli utjevnet.
Kjør alle bildene dine, og se etter fargene som går igjen. Det er merkefargene. En farge som bare dukker opp i ett bilde, er vanligvis bakgrunnen eller lyset.
Steg 3: gi hver farge en jobb
En palett er bare nyttig når hver farge har en rolle. De fleste merker trenger fire:
- Bakgrunn: fargen de fleste layouter ligger på. Ofte emballasjens grunnfarge, eller en lys nøytral.
- Tekst: en mørk farge som er lesbar på bakgrunnen. Nesten svart fungerer. En dyp merkefarge fungerer bedre, hvis den består kontrollen.
- Aksent: den høylytte, til en knapp, en prislapp eller ett fremhevet ord.
- Støtte: en eller to nøytrale farger til bokser, skillelinjer og sekundær tekst.
Motstå fristelsen til å bruke alt bildet ga deg. Fem navngitte farger med tydelige jobber holder hundre annonser konsistente. Tolv gjør det ikke.
Steg 4: sjekk kontrasten før fargen brukes
Fargepar som ser fine ut på en stor skjerm, kan være vanskelige å lese på en telefon i solen, og mye vanskeligere for folk med nedsatt syn. W3C:s Web Content Accessibility Guidelines gir et tall for dette, kontrastforholdet, som går fra 1:1 (samme farge to ganger) til 21:1 (svart på hvitt). Grensene 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 betyr minst 18 punkt, eller 14 punkt fet, etter WCAG-definisjonen. Og tallene er harde grenser: W3C:s veiledning om 1.4.3 sier at et beregnet forhold ikke skal avrundes, så 4.499:1 oppfyller ikke 4.5:1.
WCAG ble skrevet for nettinnhold, ikke for annonser, men resonnementet gjelder for all tekst på en skjerm, inkludert bildetekster brent inn i en video og ordene på et sluttkort.
Et eksempel
Si at emballasjen din gir deg en marineblå #1a3c6e, en kremfarge #fdf6e3 og en oransje #e07a2e.
Formelen er (L1 + 0.05) / (L2 + 0.05), der L1 er relativ luminans for den lyseste fargen og L2 for den mørkeste. Relativ luminans går fra 0 for svart til 1 for hvitt. Marineblått blir omtrent 0.046, kremen omtrent 0.923 og oransjen omtrent 0.300.
- Marineblå tekst på krem: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, omtrent 10.1 med disse avrundede tallene, og 10.16:1 eksakt. Det består AAA i alle størrelser. Dette er hovedparet ditt.
- Oransje tekst på krem: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, omtrent 2.78:1. Det feiler selv for stor tekst. Oransjen bør ikke bære ord på krem.
- Svart tekst på oransje: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, som er 7.0 med disse avrundede tallene, men 6.99:1 eksakt. Det består AA for all tekst, men mangler så vidt AAA. Greit til en knappetekst.
- Krem tekst på marineblått: det samme paret som det første, altså samme 10.16:1. Å snu et par endrer aldri forholdet.
Rollene velger seg nesten selv: kremfarge som bakgrunn, marineblå tekst, oransje som aksentform med svarte ord på seg (marineblått på oransje er bare 3.65:1, som er AA kun for stor tekst). Ekstraktoren viser hele dette rutenettet samtidig, hver farge mot hver annen pluss hvitt og svart, og hver celle merket AAA, AA, AA stor eller Fail.
Steg 5: skriv det ned én gang
Eksporter paletten som CSS-egenskaper eller JSON, og oppbevar den ved siden av logofilene dine. Gi variablene nytt navn etter jobb når du har bestemt deg: --brand-bg, --brand-text og --brand-accent er lettere å lese enn --color-3 en måned senere. Legg til én linje under hver som sier hvilke par som bestod, så ingen må gjøre kontrollen om igjen.
Sjekk deretter tallene mot alt offisielt du allerede har. Et bilde gir deg fargen kameraet så, som ligger nær den trykte emballasjen, men ikke er identisk med blekkspesifikasjonen. Har skriveren din eller designeren eksakte verdier, gjelder de.
Bruk paletten i annonser og innlegg
- Bildetekster og undertekster: teksten din i tekstfarge på en boks i bakgrunnsfargen, eller omvendt. Sjekk paret først.
- Sluttkort: bakgrunnsfargen med logoen og én linje i tekstfargen din. Aksenten kan fylle en knappeform bak en kort oppfordring.
- Miniatyrbilder og omslag: én aksent, ett stort lesbart ord og mye bakgrunn.
- QR-koder på emballasje: en merkefarge fungerer hvis den er tydelig mørkere enn emballasjen. Vår QR-kodegenerator advarer når kontrasten er lav.
Der Hermoso passer inn
Hermoso er en AI-markedsføringsagent. Den researcher annonsene som allerede fungerer i markedet ditt, lager annonser i bilde og video som følger merkevaren din, publiserer og planlegger innlegg på dine egne sosiale kontoer, og kjører betalte kampanjer i dine egne annonsekontoer. Når du legger til merket ditt fra nettstedet ditt, lærer den produktene, logoen og paletten din. Bildetekster og sluttkort er av til du ber om dem, og når du gjør det, kan du angi farger for tekst, boks og sluttkort med heksekoder, slik at parene du sjekket her er de som faktisk leveres. Det fungerer i nettappen, eller inne i Claude, ChatGPT og Cursor via sin MCP-server.
Ofte stilte spørsmål
Hvordan finner jeg heksekodene for produktfargene mine?
Beskjær et rent bilde til produktet eller emballasjen, og dra det inn i en fargepalett-ekstraktor. Den lister hovedfargene som HEX, RGB og HSL. Kjør to eller tre bilder, og behold fargene som går igjen.
Hvilket kontrastforhold trenger tekst?
Etter WCAG 2.2 krever nivå AA 4.5:1 for normal tekst og 3:1 for stor tekst, og AAA krever 7:1 og 4.5:1. Stor tekst er minst 18 punkt, eller 14 punkt fet.
Er 4.49:1 godt nok for AA?
Nei. W3C sier at forholdet ikke skal avrundes når det sammenlignes med grensen, så 4.499:1 oppfyller ikke 4.5:1.
Hvor mange farger bør en merkepalett ha?
Nok til at hver får en jobb: vanligvis en bakgrunn, en tekstfarge, én aksent og en eller to nøytrale. Fem navngitte farger med tydelige roller holder annonsene konsistente bedre enn en lang liste.
Er fargene fra et bilde nøyaktige?
Nei. De er det kameraet registrerte under det lyset, som ligger nær produktet, men ikke er det samme som en trykk- eller blekkspesifikasjon. Har du offisielle verdier, bruk dem.