Brandfarvekoder: sådan dokumenterer du hex, RGB, CMYK og Pantone

Brandfarvekoder hører hjemme i én enkelt tabel i din stilguide, med én række pr. farve og en kolonne for hvert medie: hex til websites, RGB til skærme og video, CMYK til tryk og en Pantone-reference til spotfarve, skiltning og merchandise. Tilføj et navn, en rolle og de godkendte tekstparringer, og alle fra en udvikler til en skiltemager kan gengive farven uden at gætte. Det meste uensartethed kommer af, at folk opfinder deres egen omregning, fordi guiden kun gav dem én kode.

Tabellen med brandfarvekoder

Her er et komplet eksempel for et fiktivt brand med en rød primær, en blå sekundær, et blæk og to neutrale. Kopiér strukturen; erstat værdierne med dine egne.

Hvad hver farvekode er til

• Hex (#C8102E) er nettets stenografi for en RGB-farve. Udviklere, Figma og de fleste designværktøjer vil have den. Hex-farvekoder forklarer, hvordan du læser en.
• RGB (200 16 46) er den samme farve skrevet som røde, grønne og blå værdier fra 0 til 255. Videoredigerere og nogle apps beder om den. Omregning mellem hex og RGB er nøjagtig; se hex til RGB.
• CMYK (0 92 77 22) er blandingen af cyan, magenta, gul og sort blæk til firefarvetryk. Den afhænger af pressen og papiret, så den bør komme fra dit trykkeri eller en farvestyret omregning.
• Pantone (186 C) navngiver en færdigblandet spotfarve fra en fysisk farveprøvebog. Det er den mest pålidelige måde at få den samme farve på visitkort, skilte, stof og emballage. Suffikset betyder noget: C er bestrøget papir, U er ubestrøget.
• Valgfrit: oklch eller HSL-værdier hjælper webteams med at bygge nuancer og mørk tilstand-varianter. Tag dem med, hvis dine udviklere arbejder sådan.

Sådan finder du dine brandfarvekoder

1. 1

   Beslut dit ledende medie

   Hvis brandet mest lever på skærme, så start fra hex. Hvis det lever på emballage, uniformer eller skilte, så start fra en fysisk Pantone-prøve og tilpas skærmfarven til den.

2. 2

   Vælg Pantone-match i virkeligheden

   Se på en ægte Pantone-guide i dagslys, ikke en forhåndsvisning på en skærm. Vælg de nærmeste bestrøgne og ubestrøgne chips, og notér begge.

3. 3

   Få CMYK fra dit trykkeri

   Send hex og Pantone-referencen, og bed om deres farvestyrede CMYK-værdier, og godkend derefter et trykt prøvetryk.

4. 4

   Fastlæg skærmværdierne til sidst

   Justér hex, så den ligner det trykte eksemplar på nogle få kalibrerede skærme. Hex og RGB følger så nøjagtigt af hinanden.

5. 5

   Notér godkendte parringer

   List, hvilke farver der må sidde på hvilke, med kontrastforhold, så ingen sætter rød tekst på marineblå.

Pantone vs hex dækker matchtrinnet mere dybdegående, herunder hvorfor en skærmvisning af en Pantone-chip aldrig er helt rigtig.

Dokumentér godkendte parringer og kontrast

Koder fortæller folk, hvordan de laver en farve. Parringer fortæller dem, hvordan de bruger den. En kort kontrasttabel forhindrer den mest almindelige misbrug, nemlig at sætte to brandfarver sammen, som begge ser stærke ud og fejler som tekst og baggrund.

Metoden bag de tal står i farvekontrast og tilgængelighed.

Del farvekoder med udviklere

Giv udviklere farverne som navngivne tokens, ikke en PDF, de skal taste om. Rollenavne holder koden læselig og overlever et skift af nuance.

: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 koderne, hvor folk designer

En farvetabel i en PDF hjælper kun, hvis folk åbner den. Læg den samme palet, hvor designs rent faktisk bliver lavet. I Gradiently rummer brandkittet (en del af Pro) dine farvepaletter ved siden af dine logoer og skrifttyper, og Designer bruger dem, når den lægger et design ud, så de rigtige koder følger med hvert opslag. Resten af guiden, fra skrift til tone, er dækket i brandstilguide.