# Markenfarben Farbcodes: HEX, RGB, CMYK und Pantone dokumentieren

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

Eine Markenfarbe bleibt nur einheitlich, wenn alle, die mit ihr arbeiten, den richtigen Code für ihr Medium haben. Hier ist die Tabelle, die jeder Styleguide braucht, wofür jeder Code da ist und in welcher Reihenfolge du sie ermittelst.

## The short version

- Die Farbcodes einer Marke sollten jede Farbe in vier Formaten angeben: HEX fürs Web, RGB für Bildschirme, CMYK für den Druck und eine Pantone-Referenz für Sonderfarben und physische Produkte.
- Jede Farbe im Styleguide braucht außerdem einen Namen, eine Rolle und eine Liste erlaubter Textpaarungen mit ihren Kontrastverhältnissen.
- HEX und RGB beschreiben exakt dieselbe Bildschirmfarbe und lassen sich genau umrechnen, während CMYK- und Pantone-Werte eine farbverwaltete Umrechnung und eine gedruckte Kontrolle brauchen.
- Erscheint deine Marke vor allem im Druck oder auf Produkten, wähle zuerst die Pantone-Referenz und gleiche die Bildschirmcodes daran an.
- Benenne Farben nach ihrer Rolle, etwa Primärfarbe oder Tinte, damit der Leitfaden auch dann noch Sinn ergibt, wenn sich ein Farbton später ändert.

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

| Name und Rolle | HEX | RGB | CMYK | Pantone |
| --- | --- | --- | --- | --- |
| Signalrot, Primärfarbe | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C |
| Hafenblau, Sekundärfarbe | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C |
| Tinte, Text | `#101820` | 16 24 32 | Tiefschwarz von der Druckerei | Black 6 C |
| Nebel, Neutralton | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C |
| Papier, Hintergrund | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Unbedrucktes Papier |

Eine Farbtabelle für den Styleguide. Die CMYK-Werte sind einfache rechnerische Umrechnungen zur Veranschaulichung; ersetze sie durch die Werte, die dir deine Druckerei aus einer farbverwalteten Umrechnung gibt.

- Signalrot: #c8102e
- Hafenblau: #0047bb
- Tinte: #101820
- Nebel: #d9d9d6
- Papier: #f5f3ee

Dieselben fünf Farben als Farbfelder. Ein Leitfaden sollte immer die Farbe selbst neben ihren Codes zeigen, damit eine falsche Ziffer sofort auffällt.

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

> **Nicht jede Bildschirmfarbe lässt sich drucken** Sehr gesättigte Blau-, Grün- und Orangetöne liegen außerhalb dessen, was CMYK-Druckfarbe wiedergeben kann. Ist deine Markenfarbe eine davon, entscheide jetzt, ob der Druck eine Pantone-Sonderfarbe oder eine etwas stumpfere CMYK-Version nutzt, und halte das schriftlich fest. [RGB oder CMYK](https://gradiently.design/de/guide/rgb-vs-cmyk) zeigt, warum.

## So ermittelst du die Farbcodes deiner Marke

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

| Text | Hintergrund | Kontrast | Einsatz |
| --- | --- | --- | --- |
| Weiß | Signalrot | 5,9:1 | Buttons, Banner, jede Größe |
| Weiß | Hafenblau | 8,0:1 | Jede Größe |
| Tinte | Papier | 16,1:1 | Fließtext |
| Signalrot | Papier | 5,3:1 | Überschriften und Links |
| Signalrot | Tinte | 3,0:1 | Nur großer Displaytext |

Kontrastverhältnisse nach der WCAG-Formel berechnet. Fließtext braucht mindestens 4,5:1, großer Text 3:1.

Die Methode hinter diesen Zahlen steht in [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility).

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

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

Dieselbe Tabelle als CSS Custom Properties, mit der Pantone-Referenz in einem Kommentar für alle, die sie brauchen.

### Vermeiden

- Ein HEX-Code und sonst nichts
- Farben namens „Rot 2“ und „neues Blau“
- CMYK aus einem Online-Umrechner kopiert
- Pantone nach einer Bildschirmvorschau gewählt

### Besser

- HEX, RGB, CMYK und Pantone für jede Farbe
- Namen, die sagen, wofür die Farbe da ist
- CMYK von der Druckerei, auf einem Proof geprüft
- Pantone aus einem gedruckten Fächer gewählt

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

## FAQ

### Welche Farbcodes gehören in einen Marken-Styleguide?

HEX, RGB, CMYK und eine Pantone-Referenz für jede Farbe, dazu ein Name, eine Rolle und erlaubte Textpaarungen mit ihren Kontrastverhältnissen.

### Ist HEX dasselbe wie RGB?

Ja. HEX ist RGB im Sechzehnersystem geschrieben, also sind `#C8102E` und 200 16 46 exakt dieselbe Farbe.

### Wie rechne ich eine HEX-Farbe in CMYK um?

Online-Umrechner liefern einen groben Ausgangspunkt, aber CMYK hängt von Druckmaschine und Papier ab. Bitte deine Druckerei um eine farbverwaltete Umrechnung und gib einen gedruckten Proof frei.

### Brauche ich eine Pantone-Farbe für meine Marke?

Wenn deine Marke auf Schildern, Verpackungen, Kleidung oder Merchandise erscheint, ja: Eine Pantone-Referenz ist der zuverlässigste Weg zu derselben Farbe auf verschiedenen Materialien.

### Was bedeutet das C oder U nach einer Pantone-Nummer?

C steht für gestrichenes Papier, U für ungestrichenes. Dieselbe Farbe sieht auf beiden anders aus, also notiere beide, wenn du auf beiden druckst.