Merkkleurcodes: hex, RGB, CMYK en Pantone vastleggen

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.

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

Zo werk je je merkkleurcodes uit

1. 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. 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. 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. 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. 5

   Noteer goedgekeurde combinaties

   Noteer welke kleuren op welke mogen staan, met contrastverhoudingen, zodat niemand rode tekst op marineblauw zet.

Pantone versus hex 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.

De methode achter die getallen staat in kleurcontrast en toegankelijkheid.

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.

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

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.