Fargekoder for merkevarer: hex, RGB, CMYK og Pantone

Fargekoder for merkevarer hører hjemme i én tabell i merkevaremanualen, med én rad per farge og én kolonne per medium: hex til nettsider, RGB til skjermer og video, CMYK til trykk og en Pantone-referanse til spesialfarger, skilt og profilartikler. Legg til navn, rolle og godkjente tekstkombinasjoner. Da kan både utviklere og skiltmakere gjengi fargen uten å gjette. Sprik oppstår ofte når folk må finne sin egen konvertering fordi manualen bare ga dem én kode.

Tabellen med merkevarens fargekoder

Her er et komplett eksempel for en tenkt merkevare med rødt som primærfarge, blått som sekundærfarge, en tekstfarge og to nøytralfarger. Kopier strukturen og erstatt verdiene med dine egne.

Hva de ulike fargekodene brukes til

• Hex (#C8102E) er nettets kortform for en RGB-farge. Utviklere, Figma og de fleste designverktøy bruker den. Hex-fargekoder forklarer hvordan du leser dem.
• RGB (200 16 46) er samme farge skrevet som røde, grønne og blå verdier fra 0 til 255. Videoredigerere og enkelte apper bruker dette. Konvertering mellom hex og RGB er eksakt. Se hex til RGB.
• CMYK (0 92 77 22) er blandingen av cyan, magenta, gult og svart blekk til firefargetrykk. Verdiene avhenger av trykkmaskin og papir og bør derfor komme fra trykkeriet eller en fargestyrt konvertering.
• Pantone (186 C) angir en ferdigblandet spesialfarge fra en fysisk fargevifte. Det er den sikreste måten å få samme farge på visittkort, skilt, stoff og emballasje. Bokstaven er viktig: C er bestrøket papir, U er ubestrøket.
• Valgfritt: oklch- eller HSL-verdier hjelper nettutviklere med å lage lysere toner og varianter for mørk modus. Ta dem med hvis utviklerne bruker disse formatene.

Slik fastsetter du merkevarens fargekoder

1. 1

   Velg hovedmediet

   Hvis merkevaren først og fremst vises på skjerm, start med hex. Hvis den vises på emballasje, uniformer eller skilt, start med en fysisk Pantone-prøve og tilpass skjermfargen til den.

2. 2

   Velg Pantone-fargen fysisk

   Se på en ekte Pantone-vifte i dagslys, ikke på skjerm. Velg de nærmeste prøvene for bestrøket og ubestrøket papir og noter begge.

3. 3

   Få CMYK fra trykkeriet

   Send hex-koden og Pantone-referansen og be om trykkeriets fargestyrte CMYK-verdier. Godkjenn deretter en trykt prøve.

4. 4

   Fastsett skjermverdiene til slutt

   Juster hex-fargen slik at den ligner den trykte prøven på noen kalibrerte skjermer. Hex og RGB følger så nøyaktig av hverandre.

5. 5

   Dokumenter godkjente kombinasjoner

   Oppgi hvilke farger som kan ligge på hverandre, med kontrastforhold, så ingen bruker rød tekst på marineblått.

Pantone mot hex forklarer tilpasningen mer inngående, blant annet hvorfor skjermvisningen av en Pantone-prøve aldri er helt riktig.

Dokumenter godkjente kombinasjoner og kontrast

Koder forteller hvordan folk gjenskaper en farge. Kombinasjoner forteller hvordan de bruker den. En kort kontrasttabell forebygger en vanlig feil: to sterke merkevarefarger som ikke fungerer som tekst og bakgrunn sammen.

Metoden bak tallene forklares i fargekontrast og tilgjengelighet.

Del fargekoder med utviklere

Gi utviklerne fargene som navngitte variabler, ikke en PDF de må skrive av. Rollenavn gjør koden lesbar og tåler at nyansen endres.

:root {
  --brand-primary: #c8102e;   /* Signal red, Pantone 186 C */
  --brand-secondary: #0047bb; /* Harbour blue, Pantone 2728 C */
  --brand-ink: #101820;       /* Ink, Pantone Black 6 C */
  --brand-mist: #d9d9d6;      /* Mist, Pantone Cool Gray 1 C */
  --brand-paper: #f5f3ee;     /* Paper */
}

Hold kodene der folk designer

En fargetabell i en PDF hjelper bare hvis folk åpner den. Legg samme palett der design faktisk lages. I Gradiently inneholder merkevaresettet, som inngår i Pro, fargepalettene ved siden av logoer og fonter. Designer bruker dem i oppsettet, så riktige koder følger hvert innlegg. Resten av manualen, fra skrift til tone, forklares i merkevaremanual.