Bygg en varumärkesfärgpalett utifrån dina egna produktfoton

Många små varumärken har en logotypfil men ingen färglista. Färgerna finns i produkten själv: flaskan, etiketten, asken, tyget. När det är dags att göra en annons, en miniatyr eller en bildtextstil tittar någon på en hexkod i ett foto och hoppas på det bästa.

Du kan göra det bättre på ungefär tio minuter. Plocka ut färgerna från foton av den riktiga produkten, ge varje färg en uppgift och kontrollera vilka par som går att läsa som text. Vår kostnadsfria färgpalettsextraktor gör både utplockningen och kontrollen i din webbläsare, utan att något laddas upp.

Varför börja med produkten och inte med en moodboard

Människor känner igen din produkt på hur den ser ut i hyllan eller i handen. En annons vars färger matchar förpackningen känns som samma varumärke vid en blick, och en som avviker känns som en kopia. En palett från produkten är dessutom ärlig om vad du faktiskt säljer, vilket en moodboard sällan är.

Det funkar även för tjänster. Om du inte har någon fysisk produkt, använd dina bästa skärmbilder, din butiksfasad eller bilder på ditt team, vad människor redan förknippar med dig.

Steg 1: välj och beskär fotona

Välj två eller tre rena foton: produkten mot en enkel bakgrund, förpackningens framsida och en livsstilsbild du gillar. Beskär sedan hårt. Extraktorn räknar varje pixel du ger den, så en flaska på ett trädbord ger tillbaka bordet som en av dina varumärkesfärger. Beskär till produkten och etiketten, så är paletten produkten.

Fotografera i dagsljus, eller i jämnt ljus om du kan. En varm lampa gör vit förpackning krämfärgad, och alla färger du plockar ut bär på den nyansen.

Steg 2: plocka ut fem till åtta färger

Släpp varje foto i extraktorn och be om 5 eller 6 färger för ett rent produktfoto, eller 8 för ett rörigt. Den grupperar liknande pixlar och listar medelvärdet för varje grupp, störst först, med andelen av bilden som varje täcker. Startpunkten är fast, så samma foto ger alltid samma palett, och en liten ljus accent, som ett rött lock på en vit flaska, får en egen färgruta i stället för att jämnas ut i medelvärdet.

Kör alla dina foton och leta efter färger som upprepas. Det är varumärket. En färg som bara finns på ett enda foto är oftast bakgrunden eller ljuset.

Steg 3: ge varje färg en uppgift

En palett är bara användbar när varje färg har en roll. De flesta varumärken behöver fyra:

Bakgrund: färgen de flesta layouter vilar på. Ofta förpackningens basfärg eller en ljus neutral.
Text: en mörk färg som går att läsa mot bakgrunden. Nästan svart fungerar. En djup varumärkesfärg fungerar ännu bättre, om den klarar kontrollen.
Accent: den högljudda, till en knapp, en prislapp eller ett enda framhävt ord.
Stöd: en eller två neutrala färger till rutor, avdelare och sekundär text.

Motstå frestelsen att använda allt fotot gav dig. Fem namngivna färger med tydliga uppgifter håller hundra annonser konsekventa. Tolv gör det inte.

Steg 4: kontrollera kontrasten innan den används på något

Färgpar som ser bra ut på en stor skärm kan vara svåra att läsa på en telefon i solen, och mycket svårare för personer med nedsatt syn. W3C:s Web Content Accessibility Guidelines ger ett tal för detta, kontrastförhållandet, som sträcker sig från 1:1 (samma färg två gånger) till 21:1 (svart på vitt). Gränsvärdena är:

	Normal text	Stor text
AA (SC 1.4.3)	4.5:1	3:1
AAA (SC 1.4.6)	7:1	4.5:1

Stor text betyder minst 18 punkter, eller 14 punkter fet, enligt WCAG:s definition. Och talen är hårda gränser: W3C:s vägledning om 1.4.3 säger att ett beräknat förhållande inte ska avrundas, så 4,499:1 uppfyller inte 4,5:1.

WCAG skrevs för webbinnehåll, inte för annonser, men resonemanget gäller för all text på en skärm, inklusive bildtexter inbrända i en video och orden på ett slutkort.

Ett exempel

Säg att din förpackning ger dig en marinblå #1a3c6e, en krämfärgad #fdf6e3 och en orange #e07a2e.

Formeln är (L1 + 0,05) / (L2 + 0,05), där L1 är den relativa luminansen för den ljusare färgen och L2 för den mörkare. Relativ luminans går från 0 för svart till 1 för vitt. Marinblått landar på cirka 0,046, krämfärgen på cirka 0,923 och orangen på cirka 0,300.

Marinblå text på kräm: (0,923 + 0,05) / (0,046 + 0,05) = 0,973 / 0,096, cirka 10,1 med dessa avrundade tal, och exakt 10,16:1. Det klarar AAA i alla storlekar. Det här är ditt huvudpar.
Orange text på kräm: (0,923 + 0,05) / (0,300 + 0,05) = 0,973 / 0,350, cirka 2,78:1. Det underkänns även för stor text. Orange ska inte bära ord på kräm.
Svart text på orange: (0,300 + 0,05) / (0 + 0,05) = 0,350 / 0,05, vilket är 7,0 med dessa avrundade tal men 6,99:1 exakt. Det klarar AA för all text men missar AAA med en hårsmån. Bra för en knappetikett.
Krämfärgad text på marinblått: samma par som det första, alltså samma 10,16:1. Att vända på ett par ändrar aldrig kontrastförhållandet.

Så rollerna väljer nästan sig själva: krämfärgad bakgrund, marinblå text, och orange som accentform med svarta ord på. (Marinblått på orange är bara 3,65:1, vilket bara är AA för stor text.) Extraktorn visar hela rutnätet på en gång, varje färg mot varje annan plus vitt och svart, och varje cell betygsätts som AAA, AA, AA för stor text eller Underkänd.

Steg 5: skriv ner det en gång

Exportera paletten som CSS-custom properties eller JSON och spara den bredvid dina logotypfiler. Döp om variablerna efter uppgift när du har bestämt dig: --brand-bg, --brand-text och --brand-accent är lättare att läsa än --color-3 en månad senare. Lägg till en rad under varje som säger vilka par som klarade kontrollen, så att ingen behöver göra om den.

Jämför sedan siffrorna med allt officiellt du redan har. Ett foto ger dig färgen din kamera såg, som ligger nära den tryckta förpackningen men inte är identisk med bläckspecifikationen. Om din tryckare eller designer har exakta värden gäller de.

Så använder du paletten i annonser och inlägg

Bildtexter och undertexter: din textfärg på en ruta i din bakgrundsfärg, eller tvärtom. Kontrollera paret först.
Slutkort: bakgrundsfärgen med logotypen och en rad i din textfärg. Accenten kan fylla en knappform bakom en kort uppmaning.
Miniatyrer och omslag: en accent, ett stort läsbart ord och gott om bakgrund.
QR-koder på förpackningar: en varumärkesfärg fungerar om den är tydligt mörkare än förpackningen. Vår QR-kodgenerator varnar när kontrasten är låg.

Var Hermoso passar in

Hermoso är en AI-marknadsföringsagent. Den undersöker vilka annonser som redan fungerar på din marknad, gör bildannonser och videoannonser i din varumärkesprofil, publicerar och schemalägger inlägg till dina egna sociala konton och kör betalda kampanjer på dina egna annonskonton. När du lägger till ditt varumärke från din webbplats lär den sig dina produkter, din logotyp och din palett. Bildtexter och slutkort är av om du inte ber om dem, och när du gör det kan du ställa in text-, ruta- och slutkortsfärgerna med hexkoder, så att paren du kontrollerade här är de som faktiskt går ut. Den fungerar i webbappen, eller inne i Claude, ChatGPT och Cursor via sin MCP-server.

Vanliga frågor

Hur hittar jag hexkoderna för mina produktfärger?

Beskär ett rent foto till produkten eller förpackningen och släpp det i en färgpalettsextraktor. Den listar huvudfärgerna som HEX, RGB och HSL. Kör två eller tre foton och behåll de färger som upprepas.

Vilket kontrastförhållande behöver text?

Enligt WCAG 2.2 kräver nivå AA 4,5:1 för normal text och 3:1 för stor text, och AAA kräver 7:1 respektive 4,5:1. Stor text är minst 18 punkter, eller 14 punkter fet.

Räcker 4,49:1 för AA?

Nej. W3C säger att förhållandet inte ska avrundas när det jämförs med gränsvärdet, så 4,499:1 uppfyller inte 4,5:1.

Hur många färger ska en varumärkespalett ha?

Tillräckligt för att ge varje färg en uppgift: vanligtvis en bakgrund, en textfärg, en accent och en eller två neutrala. Fem namngivna färger med tydliga roller håller annonser konsekventa bättre än en lång lista.

Är färgerna från ett foto exakta?

Nej. De är vad kameran registrerade under det ljuset, vilket ligger nära produkten men inte är samma sak som en tryck- eller bläckspecifikation. Om du har officiella värden, använd dem.