Markenfarben Farbcodes: HEX, RGB, CMYK und Pantone dokumentieren

Die Farbcodes deiner Markenfarben gehören in eine einzige Tabelle in deinem Styleguide, mit einer Zeile pro Farbe und einer Spalte pro Medium: HEX für Websites, RGB für Bildschirme und Video, CMYK für den Druck und eine Pantone-Referenz für Sonderfarben, Beschilderung und Merchandise. Ergänze einen Namen, eine Rolle und die erlaubten Textpaarungen, und jeder vom Entwickler bis zum Schildermacher kann die Farbe reproduzieren, ohne zu raten. Die meisten Abweichungen entstehen, weil Leute ihre eigene Umrechnung erfinden, da der Leitfaden ihnen nur einen Code gegeben hat.

Die Tabelle der Markenfarbcodes

Hier ist ein vollständiges Beispiel für eine fiktive Marke mit einem roten Primärton, einem blauen Sekundärton, einer Tintenfarbe und zwei Neutraltönen. Übernimm die Struktur und ersetze die Werte durch deine eigenen.

Wofür jeder Farbcode da ist

• HEX (#C8102E) ist die Kurzschreibweise des Webs für eine RGB-Farbe. Entwickler, Figma und die meisten Designwerkzeuge wollen sie. HEX-Farbcodes erklärt, wie man einen liest.
• RGB (200 16 46) ist dieselbe Farbe, geschrieben als Rot-, Grün- und Blauwerte von 0 bis 255. Videoschnittprogramme und manche Apps fragen danach. Die Umrechnung zwischen HEX und RGB ist exakt; siehe HEX in RGB.
• CMYK (0 92 77 22) ist die Mischung aus Cyan, Magenta, Gelb und Schwarz für den Vierfarbdruck. Sie hängt von Druckmaschine und Papier ab und sollte deshalb von deiner Druckerei oder aus einer farbverwalteten Umrechnung kommen.
• Pantone (186 C) bezeichnet eine vorgemischte Sonderfarbe aus einem gedruckten Farbfächer. Das ist der zuverlässigste Weg zu derselben Farbe auf Visitenkarten, Schildern, Stoff und Verpackung. Das Kürzel zählt: C steht für gestrichenes Papier, U für ungestrichenes.
• Optional: OKLCH- oder HSL-Werte helfen Webteams, Abstufungen und Varianten für den Dark Mode zu bauen. Nimm sie auf, wenn deine Entwickler so arbeiten.

So ermittelst du die Farbcodes deiner Marke

1. 1

   Leitmedium festlegen

   Lebt die Marke vor allem auf Bildschirmen, beginne mit HEX. Lebt sie auf Verpackungen, Uniformen oder Schildern, beginne mit einem physischen Pantone-Farbfeld und gleiche die Bildschirmfarbe daran an.

2. 2

   Den Pantone-Ton vor Ort wählen

   Schau dir einen echten Pantone-Fächer bei Tageslicht an, keine Bildschirmvorschau. Wähle die nächstliegenden Felder für gestrichenes und ungestrichenes Papier und notiere beide.

3. 3

   CMYK von der Druckerei holen

   Schick den HEX-Wert und die Pantone-Referenz und bitte um farbverwaltete CMYK-Werte, dann gib einen gedruckten Proof frei.

4. 4

   Bildschirmwerte zuletzt festlegen

   Passe den HEX-Wert an, bis er auf einigen kalibrierten Bildschirmen wie das gedruckte Muster aussieht. HEX und RGB ergeben sich dann exakt auseinander.

5. 5

   Erlaubte Paarungen festhalten

   Liste auf, welche Farben auf welchen stehen dürfen, mit Kontrastverhältnissen, damit niemand roten Text auf Marineblau setzt.

Pantone oder HEX behandelt den Abgleich ausführlicher, auch warum eine Bildschirmvorschau eines Pantone-Felds nie ganz stimmt.

Erlaubte Paarungen und Kontrast dokumentieren

Codes sagen, wie man eine Farbe herstellt. Paarungen sagen, wie man sie einsetzt. Eine kurze Kontrasttabelle verhindert den häufigsten Fehlgriff: zwei Markenfarben zu kombinieren, die beide kräftig wirken und als Text und Hintergrund trotzdem scheitern.

Die Methode hinter diesen Zahlen steht in Farbkontrast und Barrierefreiheit.

Farbcodes an Entwickler weitergeben

Gib Entwicklern die Farben als benannte Tokens, nicht als PDF, das sie abtippen müssen. Rollennamen halten den Code lesbar und überstehen einen Wechsel des Farbtons.

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

Die Codes dort halten, wo gestaltet wird

Eine Farbtabelle in einem PDF hilft nur, wenn jemand sie öffnet. Leg dieselbe Palette überall dort ab, wo tatsächlich gestaltet wird. In Gradiently hält das Markenkit (Teil von Pro) deine Farbpaletten neben deinen Logos und Schriften, und der Designer nutzt sie, wenn er ein Design anlegt, sodass die richtigen Codes mit jedem Beitrag reisen. Den Rest des Leitfadens, von Schrift bis Tonalität, behandelt Marken-Styleguide.