# Fargekoder for merkevarer: hex, RGB, CMYK og Pantone

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

En merkevarefarge er bare konsekvent når alle som bruker den, har riktig kode for mediet sitt. Her er tabellen hver merkevaremanual trenger, hva kodene brukes til og rekkefølgen du bør fastsette dem i.

## The short version

- Fargekoder for merkevarer bør angi hver farge i fire formater: hex til nett, RGB til skjermer, CMYK til trykk og en Pantone-referanse til spesialfarger og fysiske produkter.
- Hver farge i merkevaremanualen trenger også et navn, en rolle og godkjente tekstkombinasjoner med kontrastforhold.
- Hex og RGB beskriver nøyaktig samme skjermfarge og kan konverteres presist, mens CMYK og Pantone krever fargestyrt konvertering og kontroll på trykk.
- Hvis merkevaren hovedsakelig vises på trykk eller produkter, velger du Pantone-referansen først og tilpasser skjermkodene til den.
- Gi fargene navn etter rolle, som primær eller tekst, så manualen fortsatt gir mening hvis en nyanse endres senere.

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

| 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 |
| Blekk, tekst | `#101820` | 16 24 32 | Dyp svart fra trykkeriet | Black 6 C |
| Tåke, nøytral | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Papir, bakgrunn | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Papir uten trykk |

En fargetabell til merkevaremanualen. CMYK-tallene er enkle matematiske konverteringer brukt som illustrasjon. Erstatt dem med verdier fra trykkeriets fargestyrte konvertering.

- Signalrød: #c8102e
- Havneblå: #0047bb
- Blekk: #101820
- Tåke: #d9d9d6
- Papir: #f5f3ee

De samme fem fargene som prøver. Vis alltid selve fargen ved siden av kodene i manualen, så feil tall blir synlige.

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

> **Ikke alle skjermfarger kan trykkes** Svært mettede blå-, grønn- og oransjetoner ligger utenfor det CMYK kan gjengi. Hvis merkevarefargen din er en av dem, bestem nå om trykk skal bruke en Pantone-spesialfarge eller en litt mattere CMYK-variant. Skriv det ned. [RGB mot CMYK](https://gradiently.design/nb/guide/rgb-vs-cmyk) forklarer hvorfor.

## Slik fastsetter du merkevarens fargekoder

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. **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. **Få CMYK fra trykkeriet** Send hex-koden og Pantone-referansen og be om trykkeriets fargestyrte CMYK-verdier. Godkjenn deretter en trykt prøve.
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. **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](https://gradiently.design/nb/guide/pantone-colors) 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.

| Tekst | Bakgrunn | Kontrast | Bruk |
| --- | --- | --- | --- |
| Hvit | Signalrød | 5,9:1 | Knapper, bannere, alle størrelser |
| Hvit | Havneblå | 8,0:1 | Alle størrelser |
| Blekk | Papir | 16,1:1 | Brødtekst |
| Signalrød | Papir | 5,3:1 | Overskrifter og lenker |
| Signalrød | Blekk | 3,0:1 | Bare stor displaytekst |

Kontrastforhold beregnet med WCAG-formelen. Brødtekst trenger minst 4,5:1, stor tekst 3:1.

Metoden bak tallene forklares i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

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

```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 tabellen som egendefinerte CSS-egenskaper, med Pantone-referansen i en kommentar til dem som trenger den.

### Unngå

- Én hex-kode og ingenting annet
- Farger kalt «rød 2» og «ny blå»
- CMYK kopiert fra en nettkonverterer
- Pantone valgt fra en skjermvisning

### Gjør dette

- Hex, RGB, CMYK og Pantone for hver farge
- Navn som forteller hva fargen brukes til
- CMYK fra trykkeriet, kontrollert på en trykkprøve
- Pantone valgt fra en fysisk fargevifte

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

## FAQ

### Hvilke fargekoder bør en merkevaremanual inneholde?

Hex, RGB, CMYK og en Pantone-referanse for hver farge, pluss navn, rolle og godkjente tekstkombinasjoner med kontrastforhold.

### Er hex det samme som RGB?

Ja. Hex er RGB skrevet i sekstentallsystemet, så `#C8102E` og 200 16 46 er nøyaktig samme farge.

### Hvordan konverterer jeg en hex-farge til CMYK?

Nettkonverterere gir et grovt utgangspunkt, men CMYK avhenger av trykkmaskin og papir. Be trykkeriet om en fargestyrt konvertering og godkjenn en trykt prøve.

### Trenger merkevaren min en Pantone-farge?

Hvis merkevaren vises på skilt, emballasje, klær eller profilartikler, ja. En Pantone-referanse er den sikreste måten å få samme farge på ulike materialer.

### Hva betyr C eller U etter et Pantone-nummer?

C betyr bestrøket papir, U betyr ubestrøket. Samme blekk ser forskjellig ut på de to, så noter begge hvis du trykker på begge.