# Merkkleurcodes: hex, RGB, CMYK en Pantone vastleggen

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

Een merkkleur is alleen consistent als iedereen die ermee werkt de juiste code voor zijn medium heeft. Hier is de tabel die elke stijlgids nodig heeft, waar elke code voor dient en in welke volgorde je ze uitwerkt.

## The short version

- Merkkleurcodes moeten elke kleur in vier formaten geven: hex voor het web, RGB voor schermen, CMYK voor drukwerk en een Pantone-referentie voor steunkleur en fysieke producten.
- Elke kleur in een stijlgids heeft ook een naam, een rol en een lijst met goedgekeurde tekstcombinaties met hun contrastverhoudingen nodig.
- Hex en RGB beschrijven precies dezelfde schermkleur en zijn dus exact om te rekenen, terwijl CMYK- en Pantone-waarden een kleurgemanagede omzetting en een gedrukte controle nodig hebben.
- Verschijnt je merk vooral in print of op producten, kies dan eerst de Pantone-referentie en stem de schermcodes daarop af.
- Noem kleuren naar hun rol, zoals primair of inkt, zodat de gids nog klopt als een tint later verandert.

**Merkkleurcodes** horen in één tabel in je stijlgids, met één rij per kleur en een kolom voor elk medium: hex voor websites, RGB voor schermen en video, CMYK voor drukwerk en een Pantone-referentie voor steunkleur, bewegwijzering en merchandise. Voeg een naam, een rol en de goedgekeurde tekstcombinaties toe, en iedereen van ontwikkelaar tot bordenmaker kan de kleur reproduceren zonder te gokken. De meeste inconsistentie komt doordat mensen hun eigen omzetting verzinnen omdat de gids maar één code gaf.

## De tabel met merkkleurcodes

Hier is een compleet voorbeeld voor een fictief merk met een rood primair, een blauw secundair, een inkt en twee neutrale tinten. Kopieer de structuur; vervang de waarden door je eigen.

| Naam en rol | Hex | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Signaalrood, primair | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Havenblauw, secundair | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Inkt, tekst | `#101820` | 16 24 32 | Rijk zwart van de drukker | Black 6 C |
| Nevel, neutraal | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Papier, achtergrond | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Onbedrukt papier |

Een kleurentabel voor een stijlgids. De CMYK-cijfers zijn eenvoudige rekenkundige omzettingen ter illustratie; vervang ze door de waarden die je drukker je geeft uit een kleurgemanagede omzetting.

- Signaalrood: #c8102e
- Havenblauw: #0047bb
- Inkt: #101820
- Nevel: #d9d9d6
- Papier: #f5f3ee

Dezelfde vijf kleuren als stalen. Een gids moet de kleur zelf altijd naast zijn codes tonen, zodat een verkeerd cijfer opvalt.

## Waar elke kleurcode voor dient

- **Hex** (`#C8102E`) is de afkorting van het web voor een RGB-kleur. Ontwikkelaars, Figma en de meeste ontwerptools willen die. [Hex-kleurcodes](https://gradiently.design/nl/guide/color-codes-explained) legt uit hoe je er een leest.
- **RGB** (200 16 46) is dezelfde kleur geschreven als rood-, groen- en blauwwaarden van 0 tot 255. Videobewerkers en sommige apps vragen erom. Omrekenen tussen hex en RGB is exact; zie [hex naar RGB](https://gradiently.design/nl/guide/hex-to-rgb).
- **CMYK** (0 92 77 22) is de mix van cyaan-, magenta-, gele en zwarte inkt voor vierkleurendruk. Het hangt af van de pers en het papier, dus het moet van je drukker komen of uit een kleurgemanagede omzetting.
- **Pantone** (186 C) benoemt een voorgemengde steunkleurinkt uit een fysiek waaierboek. Het is de betrouwbaarste manier om dezelfde kleur op visitekaartjes, borden, stof en verpakking te krijgen. Het achtervoegsel telt: C is gecoat papier, U is ongecoat.
- **Optioneel: oklch- of HSL-waarden** helpen webteams bij het bouwen van tinten en donkere-modusvarianten. Voeg ze toe als je ontwikkelaars zo werken.

> **Niet elke schermkleur is te drukken** Heel verzadigde blauwen, groenen en oranjes liggen buiten wat CMYK-inkt kan reproduceren. Is je merkkleur er een van, besluit dan nu of drukwerk een Pantone-steunkleur gebruikt of een iets doffere CMYK-versie, en schrijf dat op. [RGB versus CMYK](https://gradiently.design/nl/guide/rgb-vs-cmyk) laat zien waarom.

## Zo werk je je merkkleurcodes uit

1. **Bepaal je leidende medium** Leeft het merk vooral op schermen, begin dan bij hex. Leeft het op verpakking, uniformen of borden, begin dan bij een fysiek Pantone-staal en stem de schermkleur daarop af.
2. **Kies de Pantone-match in het echt** Bekijk een echte Pantone-gids bij daglicht, geen schermpreview. Kies de dichtstbijzijnde gecoate en ongecoate stalen en noteer beide.
3. **Haal CMYK bij je drukker** Stuur de hex en de Pantone-referentie en vraag om hun kleurgemanagede CMYK-waarden, en keur dan een gedrukte proef goed.
4. **Leg de schermwaarden als laatste vast** Pas de hex aan tot hij op een paar gekalibreerde schermen op het gedrukte staal lijkt. Hex en RGB volgen dan exact uit elkaar.
5. **Noteer goedgekeurde combinaties** Noteer welke kleuren op welke mogen staan, met contrastverhoudingen, zodat niemand rode tekst op marineblauw zet.

[Pantone versus hex](https://gradiently.design/nl/guide/pantone-colors) behandelt de afstemmingsstap uitgebreider, inclusief waarom een schermpreview van een Pantone-staal nooit helemaal klopt.

## Leg goedgekeurde combinaties en contrast vast

Codes vertellen mensen hoe ze een kleur maken. Combinaties vertellen hoe ze hem gebruiken. Een korte contrasttabel voorkomt het meest voorkomende misbruik: twee merkkleuren samenbrengen die allebei sterk ogen en als tekst en achtergrond falen.

| Tekst | Achtergrond | Contrast | Gebruik |
| --- | --- | --- | --- |
| Wit | Signaalrood | 5,9:1 | Knoppen, banners, elk formaat |
| Wit | Havenblauw | 8,0:1 | Elk formaat |
| Inkt | Papier | 16,1:1 | Lopende tekst |
| Signaalrood | Papier | 5,3:1 | Koppen en links |
| Signaalrood | Inkt | 3,0:1 | Alleen grote displaytekst |

Contrastverhoudingen berekend met de WCAG-formule. Lopende tekst heeft minstens 4,5:1 nodig, grote tekst 3:1.

De methode achter die getallen staat in [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility).

## Kleurcodes delen met ontwikkelaars

Geef ontwikkelaars de kleuren als benoemde tokens, geen pdf die ze moeten overtypen. Rolnamen houden de code leesbaar en overleven een verandering van tint.

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

Dezelfde tabel als CSS custom properties, met de Pantone-referentie in een commentaar voor wie die nodig heeft.

### Vermijd

- Eén hexcode en verder niets
- Kleuren die ‘rood 2’ en ‘nieuw blauw’ heten
- CMYK gekopieerd van een online omzetter
- Pantone gekozen uit een schermpreview

### Doe

- Hex, RGB, CMYK en Pantone voor elke kleur
- Namen die zeggen waarvoor de kleur dient
- CMYK van je drukker, gecontroleerd op een proef
- Pantone gekozen uit een fysieke gids

## De codes bewaren waar mensen ontwerpen

Een kleurentabel in een pdf helpt alleen als mensen hem openen. Zet hetzelfde palet daar waar ontwerpen echt worden gemaakt. In Gradiently bevat de merkkit (onderdeel van Pro) je kleurenpaletten naast je logo’s en lettertypen, en de Designer gebruikt ze bij het indelen van een ontwerp, zodat de juiste codes met elke post meereizen. De rest van de gids, van letters tot toon, staat in [merkstijlgids](https://gradiently.design/nl/guide/brand-style-guide).

## FAQ

### Welke kleurcodes moet een merkstijlgids bevatten?

Hex, RGB, CMYK en een Pantone-referentie voor elke kleur, plus een naam, een rol en goedgekeurde tekstcombinaties met hun contrastverhoudingen.

### Is hex hetzelfde als RGB?

Ja. Hex is RGB geschreven in grondtal zestien, dus `#C8102E` en 200 16 46 zijn precies dezelfde kleur.

### Hoe reken ik een hexkleur om naar CMYK?

Online omzetters geven een ruw startpunt, maar CMYK hangt af van pers en papier. Vraag je drukker om een kleurgemanagede omzetting en keur een gedrukte proef goed.

### Heb ik een Pantone-kleur nodig voor mijn merk?

Als je merk op borden, verpakking, kleding of merchandise verschijnt, ja: een Pantone-referentie is de betrouwbaarste manier om dezelfde kleur op verschillende materialen te krijgen.

### Wat betekent de C of U achter een Pantone-nummer?

C betekent gecoat papier en U ongecoat. Dezelfde inkt ziet er op elk anders uit, dus noteer beide als je op beide drukt.