CMYK vs. RGB vs. HEX in realen Workflows
Der einfachste Weg, sie zu trennen, ist nach der Ausgabeumgebung:
- RGB ist für Bildschirme: Websites, Apps, UI-Design, Videos, Social Posts, digitale Anzeigen
- CMYK ist für den Druck: Broschüren, Verpackungen, Zeitschriften, Visitenkarten, Etiketten
- HEX ist für Web und Code: CSS, Design-Tokens, Styleguides, E-Mail-Vorlagen
Warum die Modelle nicht austauschbar sind
RGB ist ein additives Modell. Es erzeugt Farbe durch Hinzufügen von rotem, grünem und blauem Licht. Je mehr Licht man hinzufügt, desto näher kommt man Weiß.
CMYK ist ein subtraktives Modell. Es erzeugt Farbe durch Übereinanderlegen von Cyan-, Magenta-, Gelb- und Schwarztinten. Je mehr Tinte man hinzufügt, desto dunkler wird das Ergebnis.
HEX ist kein separates Farbwissenschaftsmodell im gleichen Sinne wie CMYK. Es ist eine kompakte textuelle Notation für digitale Farbwerte, die normalerweise auf RGB-Kanäle abgebildet wird.
RGB, Druckwerte und Web-Notation im Vergleich
|
Modell |
Aufgebaut aus |
Hauptumgebung |
Typisches Format |
Hauptbeschränkung |
|
RGB |
Licht |
Bildschirme |
rgb(255, 87, 51) |
Nicht zuverlässig für Druckvorhersage |
|
CMYK |
Tinten-Prozentsätze |
Druck |
0, 66, 80, 0 |
Kleinerer Farbraum als viele Displays |
|
HEX |
Kodierter digitaler Wert |
Web/UI-Code |
#FF5733 |
Nicht direkt von Druckgeräten verwendet |
Was jedes Format tatsächlich speichert
RGB
RGB speichert die Intensität der roten, grünen und blauen Kanäle. Jeder Kanal reicht normalerweise von null bis zum maximalen Anzeigewert. Es ist ideal, wenn das Endbild als Licht ausgegeben wird.
CMYK
CMYK speichert den Prozentsatz von vier Tinten. Es ist für die physische Ausgabe bestimmt, bei der Papier, Beschichtung, Druckerprofil und Pressbedingungen alle das Erscheinungsbild beeinflussen.
HEX
HEX speichert digitale Kanalwerte in hexadezimaler Form. Zum Beispiel:
- #FF0000 = Rot
- #00FF00 = Grün
- #0000FF = Blau
- #FFFFFF = Weiß
- #000000 = Schwarz
Ist der HEX-Code für RGB und CMYK gleich?
Nein. Ein HEX-Code kann einem RGB-Wert nahe entsprechen, da beide in der digitalen Farbdarstellung verwendet werden, entspricht aber nicht direkt einem CMYK-Rezept. Dasselbe visuelle Rot kann eine HEX-Notation, ein RGB-Tripel und mehrere mögliche CMYK-Druckaufbauten haben, je nach Farbprofil und Druckbedingungen.
Warum eine Bildschirmfarbe mehrere Druckergebnisse erzeugen kann
Ein Designer kann #E63946 für ein Web-Banner auswählen und dann das Druckteam nach der "gleichen" Farbe fragen. Hier beginnen die Probleme. Ein Druckoperator kann es in eine CMYK-Kombination für gestrichenes Papier und in eine andere für ungestrichenes Papier umwandeln. Beide sind gültig, da der Druck profilabhängig ist.
Deshalb sollte die Markendokumentation nicht bei Web-Werten aufhören. Sie sollte spezifizieren:
- RGB für Interface- und Bildschirmverwendung
- HEX für Entwickler
- CMYK für die Druckproduktion
- manchmal Pantone oder Sonderfarbenreferenzen für kritische Markenfarben
RGB HEX CMYK-Codes und wie man sie liest
Diese Notationen beschreiben Farbe unterschiedlich, daher spart das korrekte Lesen Zeit bei der Übergabe.
Beispiel-Set
Nehmen wir eine leuchtend orange-rote Farbe:
- HEX: #FF6B35
- RGB: 255, 107, 53
- CMYK: eine profilbasierte Näherung wie 0, 58, 79, 0
Diese sind verwandt, aber nicht identisch im Verhalten. Auf einem Telefon-Bildschirm kann die Farbe lebhaft und leuchtend wirken. Im Druck kann sie wärmer, matter oder tiefer erscheinen, besonders auf mattem Papier.
HEX-Wert vs. RGB und CMYK
Der Hauptunterschied liegt nicht nur in der Syntax. Es geht um den Zweck.
- Ein HEX-Wert ist praktisch für Code und digitale Stilsysteme.
- RGB ist besser, wenn man in Software arbeitet, die kanalbasierte Bildschirmfarbe steuert.
- CMYK ist erforderlich, wenn die Ausgabe physisch und tintenbegrenzt ist.
Ein Webdesigner kann sicher in HEX und RGB denken. Ein Verpackungsdesigner kann CMYK nicht ignorieren, ohne einen Farbdrift in der Produktion zu riskieren.
HEX zu RGB und CMYK Konvertierung: Was wirklich passiert
Viele Anfänger nehmen an, dass Konvertierung eine neutrale Übertragung ist. Das ist sie nicht. Konvertierung ist Interpretation durch ein Farbprofil.
Typischer Konvertierungspfad
- HEX wird zuerst als RGB-Farbe interpretiert
- dieser RGB-Wert wird in einen Arbeitsfarbraum abgebildet
- das Zieldruckprofil konvertiert ihn in CMYK-Prozentsätze
- das sichtbare Ergebnis hängt von den Gerätemöglichkeiten ab
Häufiger Fehler
Ein Team gestaltet einen Flyer in Web-Farben und exportiert dann direkt zum Druck, ohne Farbraumwarnungen zu überprüfen. Leuchtende Blau-, Grün- und Neontöne verlieren oft an Intensität, da einige Anzeigefarben mit Standard-Vierfarbdruck einfach nicht reproduziert werden können.
HEX CMYK RGB in Marken-Systemen
Ein solides Marken-Leitfaden behandelt diese Werte als koordinierte Referenzen, nicht als Ersatzwerte.
Was ein verwendbarer Markenfarben-Eintrag enthalten sollte
|
Markenfarben-Feld |
Beispiel |
Warum es wichtig ist |
|
HEX |
#1D4ED8 |
Schnelle Implementierung im Code |
|
RGB |
29, 78, 216 |
Konsistente Bildschirm-Rendering-Workflows |
|
CMYK |
profilspezifische Prozentsätze |
Kontrollierte Druckausgabe |
|
Verwendungshinweis |
Primärer Button / Überschriften / Verpackungsakzente |
Verhindert Missbrauch |
Praxisbeispiel
Ein SaaS-Unternehmen verwendet in seiner App ein starkes Elektro-Blau. In Figma und CSS arbeitet das Team mit HEX und RGB. Wenn sie Messeunterlagen vorbereiten, fordert der Drucklieferant CMYK oder eine Sonderfarbäquivalenz an. Wenn das Team nur digitale Werte sendet, muss der Drucker die Konvertierung erraten, und die Markenkonsistenz nimmt sofort ab.
So wählt man das richtige Modell ohne zu raten
RGB verwenden, wenn
- das endgültige Asset auf einem Bildschirm angezeigt wird
- UI, Icons, Dashboards, Landing Pages oder Video-Grafiken gestaltet werden
- Farbhelligkeit und Leuchtkraft wichtig sind
CMYK verwenden, wenn
- die Datei in den Druck geht
- Broschüren, Kataloge, Poster, Verpackungen oder Etiketten vorbereitet werden
- die Genehmigung von der physischen Ausgabe abhängt
HEX verwenden, wenn
- die Farbe in CSS, HTML oder Design-Tokens implementiert wird
- Entwickler einen kompakten Codewert benötigen
- das Design-System für digitale Produkte dokumentiert ist
Fazit
Die Verwirrung um Farbmodelle entsteht normalerweise aus einer falschen Annahme: dass ein Wert überall funktionieren sollte. Das tut er nicht. RGB definiert Bildschirmfarbe durch Licht. CMYK definiert gedruckte Farbe durch Tinte. HEX ist die Kurzschreibweise, die Entwickler verwenden, um digitale Farbwerte effizient anzugeben.
Behandle sie als verbundene, aber separate Werkzeuge. Digitale Assets in RGB oder HEX erstellen, Druckassets in CMYK vorbereiten und niemals eine direkte Eins-zu-Eins-visuelle Übereinstimmung ohne profilbewusste Konvertierung erwarten. Dieser Ansatz verhindert fehlgeschlagene Druckläufe, inkonsistentes Branding und endlose Revisionszyklen.