aslain.dev
0%
01 Hizmetler 02 Hakkımda 03 Projeler 04 Stack 05 Blog 06 İletişim
← Tüm makaleler Design

HEX, RGB, CMYK: konsistente Markenfarben

In der visuellen Identität einer Marke bleibt die Farbe oft noch vor dem Logo im Gedächtnis, und doch kommt es sehr häufig vor, dass dasselbe Türkis auf einer Website leuchtet, auf der Visitenkarte aber blass wirkt. Der Grund liegt meist darin, dass hex rgb cmyk miteinander verwechselt werden. Diese drei Schreibweisen beschreiben dieselbe Farbe für unterschiedliche Welten: Bildschirme mischen Licht, der Druck mischt Tinte. Farbe konsistent zu halten heißt zu wissen, welche Schreibweise wohin gehört, und warum die Umrechnung dazwischen nie verlustfrei ist.

Was HEX, RGB und CMYK wirklich bedeuten

Alle drei drücken eine Farbe mit Zahlen aus, aber über verschiedene Modelle:

  • RGB (Rot, Grün, Blau): das additive Modell der Bildschirme, die mit Licht arbeiten. Jeder Kanal reicht von 0–255; alle drei auf Maximum ergibt Weiß, alle auf null ergibt Schwarz.
  • HEX: eine hexadezimale Schreibweise von RGB, kein eigenes Modell. #FF8800 ist exakt dieselbe Farbe wie rgb(255, 136, 0); FF = 255, 88 = 136, 00 = 0.
  • CMYK (Cyan, Magenta, Gelb, Schwarz/Key): das subtraktive Modell des Drucks mit Tinte. Mehr Tinte auf weißem Papier absorbiert mehr Licht und macht es dunkler; die Werte werden meist in Prozent angegeben.

Der entscheidende Punkt: HEX und RGB sind für Bildschirme, CMYK ist für den Druck. Ein solider Farbleitfaden definiert idealerweise beide.

Warum Bildschirm und Druck nie exakt übereinstimmen

RGB und CMYK können unterschiedliche Farbbereiche (Gamut) wiedergeben. RGB-Bildschirme können stark gesättigte Farben wie kräftige Grüntöne, leuchtende Blautöne und Neon-Orange zeigen; CMYK-Tinte kann manche davon physisch nicht erreichen. Eine Farbe, die am Bildschirm auffällig wirkt, wird beim Druck daher auf den nächstgelegenen erreichbaren Ton beschnitten und erscheint matter.

Hinzu kommt, dass jedes Gerät Farbe etwas anders interpretiert: Zwei Monitore, ein Telefon und eine Offsetdruckmaschine können dieselbe Datei jeweils unterschiedlich darstellen. Deshalb genügt ein HEX-Wert allein nicht; was den Prozess wirklich steuert, sind die Farbprofile (ICC-Profile) und die Standards, auf die sich eine Marke bezieht.

Pantone, Farbprofile und ein Referenzpunkt

Beim Tintendruck kommt die zuverlässigste Konsistenz von Sonderfarbsystemen wie Pantone (PMS). Ein Pantone ist eine vorgemischte Standardtinte; der Drucker übernimmt den Code und reproduziert genau diesen Ton, ohne vier Prozessfarben zu mischen. Genau deshalb geben Corporate-Designs für Logos so oft eine Pantone-Referenz an.

Für Bildschirme und Umrechnungen zählt das Farbprofil:

  • sRGB: der Standard für das Web und die meisten Bildschirme. Zielen Sie darauf für Ihre Website, Social Media und alle digitalen Grafiken.
  • CMYK + ICC-Profil: Im Druck verwenden Sie das Profil, das die Druckerei verlangt (zum Beispiel ein Profil für gestrichenes Papier). Die Umrechnung erfolgt über eine gewählte Render-Intent.

Die Umrechnung in der Praxis richtig machen

In Design-Tools wirkt die Umrechnung automatisch, aber Sie müssen die Kontrolle behalten. Ein paar Grundregeln:

  • Halten Sie digitale Arbeit im RGB/sRGB-Modus; leiten Sie für den Druck ein separates CMYK-Dokument ab und mischen Sie beide nicht in einer Datei.
  • Prüfen Sie beim Wechsel von RGB zu CMYK die Farben mit dem Auge: Passen Sie helle Töne außerhalb des Gamuts manuell auf die nächstgelegene markenkonforme Version an, statt das automatische Beschneiden des Tools entscheiden zu lassen.
  • Listen Sie im Farbleitfaden für jede Primär- und Sekundärfarbe HEX, RGB, CMYK und nach Möglichkeit Pantone gemeinsam auf.

Auf der CSS-Seite verringert eine Variable zum Festlegen der Webfarbe die Fehlerquote:

:root {
  --brand: #1FB8A6;            /* HEX */
  --brand-rgb: 31, 184, 166;   /* gleiche Farbe, RGB */
}

.button {
  background: var(--brand);
  /* dieselbe Farbe aus einer Quelle für einen transluzenten Schatten nutzen */
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.35);
}

So speist sich die gesamte Website aus einer einzigen Quelle, und Ihre Markenfarbe weicht nie von einer Komponente zur nächsten ab.

Eine Checkliste für Ihren Farbleitfaden

  • Primärfarbe: HEX + RGB + CMYK + Pantone zusammen.
  • sRGB fürs Web definiert, das ICC-Profil der Druckerei für den Druck definiert.
  • Lesbarkeit und Kontrastverhältnis auf hellem und dunklem Hintergrund getestet.
  • Einfarbige (Schwarz-Weiß-) und Negativ-Versionen bereit.
  • Dateien beschriftet: klar markiert, welche für den Bildschirm und welche für den Druck ist.

Häufige Fragen

Gibt es einen Farbunterschied zwischen HEX und RGB?

Nein. HEX ist nur eine andere Schreibweise von RGB; im selben Farbprofil ergeben #1FB8A6 und rgb(31, 184, 166) exakt dieselbe Farbe. Der einzige Unterschied ist die Bequemlichkeit der Schreibweise.

Kann ich mein Logo direkt aus RGB-Werten drucken?

Sie können es, aber das Ergebnis wird unvorhersehbar; die Druckerei wandelt intern in CMYK um, und helle Töne können verblassen. Für den Druck ist es deutlich sicherer, CMYK zu liefern oder bei kritischen Farben einen Pantone-Wert.

Kann ich Web und Druck exakt gleich aussehen lassen?

Eine exakte Übereinstimmung ist meist unmöglich, weil Licht und Tinte unterschiedlich funktionieren. Das Ziel ist ein Ton, der so nah ist, dass er nicht auffällt, und konsistent — das erreichen Sie mit den richtigen Profilen und einer Pantone-Referenz.

Sorgen Sie dafür, dass Ihre Markenfarbe überall gleich aussieht. Wenn Sie einen konsistenten Farbleitfaden mit HEX-, RGB- und CMYK-Werten für Logo, Web und Druck brauchen, nehmen Sie Kontakt mit mir auf.

Bu kategorideki tüm yazılar →

Devamı için