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

[Canonical HTML page](https://gradiently.design/da/guide/brand-color-codes)

En brandfarve er kun ensartet, hvis alle, der rører ved den, har den rigtige kode til deres medie. Her er tabellen, enhver stilguide har brug for, hvad hver kode er til, og rækkefølgen, du finder dem i.

## The short version

- Brandfarvekoder bør give hver farve i fire formater: hex til nettet, RGB til skærme, CMYK til tryk og en Pantone-reference til spotfarve og fysiske varer.
- Hver farve i en stilguide har også brug for et navn, en rolle og en liste over godkendte tekstparringer med deres kontrastforhold.
- Hex og RGB beskriver præcis den samme skærmfarve, så de kan omregnes nøjagtigt, mens CMYK- og Pantone-værdier kræver en farvestyret omregning og et trykt tjek.
- Hvis dit brand mest optræder på tryk eller på produkter, så vælg Pantone-referencen først og tilpas skærmkoderne til den.
- Navngiv farver efter rolle, som primær eller blæk, så guiden stadig giver mening, hvis en nuance ændres senere.

**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.

| Navn og rolle | Hex | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Signalrød, primær | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Havneblå, sekundær | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Blæk, tekst | `#101820` | 16 24 32 | Rig sort fra trykkeriet | Black 6 C |
| Tåge, neutral | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Papir, baggrund | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Ubehandlet papir |

En farvetabel i en stilguide. CMYK-tallene er enkle aritmetiske omregninger vist som illustration; erstat dem med de værdier, dit trykkeri giver dig fra en farvestyret omregning.

- Signalrød: #c8102e
- Havneblå: #0047bb
- Blæk: #101820
- Tåge: #d9d9d6
- Papir: #f5f3ee

De samme fem farver som farveprøver. En guide bør altid vise selve farven ved siden af dens koder, så et forkert ciffer er tydeligt.

## 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](https://gradiently.design/da/guide/color-codes-explained) 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](https://gradiently.design/da/guide/hex-to-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.

> **Ikke alle skærmfarver kan trykkes** Meget mættede blå, grønne og orange toner ligger uden for det, CMYK-blæk kan gengive. Hvis din brandfarve er en af dem, så beslut nu, om tryk bruger en Pantone-spotfarve eller en lidt mattere CMYK-version, og skriv det ned. [RGB vs CMYK](https://gradiently.design/da/guide/rgb-vs-cmyk) viser hvorfor.

## Sådan finder du dine brandfarvekoder

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. **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. **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. **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. **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](https://gradiently.design/da/guide/pantone-colors) 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.

| Tekst | Baggrund | Kontrast | Brug |
| --- | --- | --- | --- |
| Hvid | Signalrød | 5,9:1 | Knapper, bannere, enhver størrelse |
| Hvid | Havneblå | 8,0:1 | Enhver størrelse |
| Blæk | Papir | 16,1:1 | Brødtekst |
| Signalrød | Papir | 5,3:1 | Overskrifter og links |
| Signalrød | Blæk | 3,0:1 | Kun stor displaytekst |

Kontrastforhold beregnet med WCAG-formlen. Brødtekst kræver mindst 4,5:1, stor tekst 3:1.

Metoden bag de tal står i [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility).

## 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.

```css
: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 */
}
```

Den samme tabel som CSS-brugerdefinerede egenskaber, med Pantone-referencen i en kommentar til dem, der har brug for den.

### Undgå

- Én hex-kode og intet andet
- Farver kaldt "rød 2" og "ny blå"
- CMYK kopieret fra en online-omregner
- Pantone valgt fra en skærmvisning

### Gør

- Hex, RGB, CMYK og Pantone for hver farve
- Navne, der siger, hvad farven er til
- CMYK fra dit trykkeri, tjekket på et prøvetryk
- Pantone valgt fra en fysisk guide

## 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](https://gradiently.design/da/guide/brand-style-guide).

## FAQ

### Hvilke farvekoder bør en brandstilguide indeholde?

Hex, RGB, CMYK og en Pantone-reference for hver farve plus et navn, en rolle og godkendte tekstparringer med deres kontrastforhold.

### Er hex det samme som RGB?

Ja. Hex er RGB skrevet i talsystemet med grundtal seksten, så `#C8102E` og 200 16 46 er præcis den samme farve.

### Hvordan omregner jeg en hex-farve til CMYK?

Online-omregnere giver et groft udgangspunkt, men CMYK afhænger af pressen og papiret. Bed dit trykkeri om en farvestyret omregning, og godkend et trykt prøvetryk.

### Har jeg brug for en Pantone-farve til mit brand?

Hvis dit brand optræder på skilte, emballage, tøj eller merchandise, ja: en Pantone-reference er den mest pålidelige måde at få den samme farve på forskellige materialer.

### Hvad betyder C eller U efter et Pantone-nummer?

C betyder bestrøget papir og U ubestrøget. Det samme blæk ser forskelligt ud på hver, så notér begge, hvis du trykker på begge.