RGB oder CMYK? Kurz: RGB für alles, was auf einem Bildschirm landet, also Website, Social Media, Präsentationen. CMYK für alles, was gedruckt wird. Auf Websites steht RGB meist als HEX-Code, und für Farben, die im Druck exakt sitzen müssen, gibt es zusätzlich Pantone.
Warum dein Logo gedruckt trotzdem anders aussieht, hat einen einfachen Grund: Ein Bildschirm leuchtet, Papier wirft nur Licht zurück. Manche Farben, die ein Monitor mühelos zeigt, kann eine Druckmaschine schlicht nicht mischen. Welche das sind, habe ich nachgemessen.
Welcher Farbwert wofür
RGB / HEX
Website, Newsletter, Social Media, Präsentationen, alles am Bildschirm. Im Web gilt der Farbraum sRGB, HEX ist nur seine Schreibweise.
CMYK
Flyer, Visitenkarten, Broschüren, Plakate, alles, was aus einer Druckmaschine mit den vier Grundfarben kommt.
Pantone
Sonderfarben, die der Drucker fertig angemischt verwendet statt aus vier Farben zu rastern. Für Markenfarben, die von Auftrag zu Auftrag verlässlich gleich aussehen sollen. Auf gestrichenem und ungestrichenem Papier wirkt auch eine Pantone-Farbe verschieden, deshalb gibt es sie als C- und U-Variante.
RAL
Lacke und Beschichtungen, etwa für Schilder, Fahrzeuge oder Fassaden. Für Website und Drucksachen spielt RAL keine Rolle.
HEX und RGB sind dasselbe
Ein HEX-Code ist kein eigener Farbraum, sondern RGB in Kurzschrift. #4f46e5 heißt: Rot 79, Grün 70, Blau 229, jeweils als zweistellige Hexadezimalzahl geschrieben. Wer im Styleguide „RGB 79/70/229“ und „#4f46e5“ nebeneinander stehen hat, hat zweimal denselben Wert. Für die Website reicht der HEX-Code.
Warum der Druck manche Farben nicht schafft
Ein Bildschirm mischt Licht: Rot, Grün und Blau leuchten übereinander, alle zusammen ergeben Weiß. Der Druck mischt Farbe auf Papier: Cyan, Magenta, Gelb und Schwarz schlucken Licht, je mehr davon, desto dunkler. Das sind zwei verschiedene Verfahren mit verschiedenen Grenzen. Sehr leuchtende Blau-, Violett- und Grüntöne liegen außerhalb dessen, was die vier Druckfarben erreichen.
Dazu kommt: Es gibt nicht „das“ CMYK. Wie eine Bildschirmfarbe in Druckwerte übersetzt wird, hängt von einem Farbprofil ab, das Papier und Druckverfahren beschreibt. Für gestrichenes Papier im Offsetdruck ist in Europa „Coated FOGRA39“ nach wie vor weit verbreitet, sein Nachfolger heißt PSO Coated v3. Für ungestrichenes Papier, typisch bei Briefpapier und vielen Visitenkarten, gibt es eigene Profile, und dort ist der Farbraum noch kleiner. Ein beliebiger Online-Umrechner rechnet mit irgendeinem Profil, oft ohne es zu nennen. Deshalb können drei Umrechner drei verschiedene CMYK-Werte für dieselbe Farbe liefern.
Ich habe es gemessen: zehn Bildschirmfarben im Druck
Ich habe zehn typische Markenfarben mit der Farbbibliothek LittleCMS durch das Profil Coated FOGRA39 geschickt (relativ farbmetrisch, ohne Tiefenkompensierung, die übliche Einstellung für Logos und Flächen) und das Ergebnis zurück auf den Bildschirm gerechnet. Die Spalte ΔE gibt den Farbabstand nach der Formel CIEDE2000 an: Um 1 sehen ihn geübte Augen im direkten Vergleich, je höher der Wert, desto deutlicher der Unterschied.
| Farbe | Bildschirm | CMYK (FOGRA39) | gedruckt etwa | ΔE |
|---|---|---|---|---|
| Violett | #7c3aed | 78 / 79 / 0 / 0 | #5d4e99 | 12,8 |
| Indigo | #4f46e5 | 85 / 75 / 0 / 0 | #4a539d | 9,3 |
| Leuchtblau | #0066ff | 86 / 62 / 0 / 0 | #3b64ac | 7,4 |
| Signalgrün | #00c853 | 72 / 0 / 88 / 0 | #4aae52 | 7,4 |
| Orange | #ff6d00 | 0 / 69 / 100 / 0 | #ed6c20 | 3,6 |
| Dunkelblau | #1e3a5f | 100 / 82 / 38 / 30 | #293c5c | 2,4 |
| Türkis | #00bcd4 | 72 / 0 / 19 / 0 | #24b8d0 | 1,3 |
| Pink | #e91e63 | 0 / 99 / 37 / 0 | #e61f63 | 0,6 |
| Rot | #d32f2f | 9 / 97 / 91 / 2 | #d52d2f | 0,4 |
| Gelb | #ffd600 | 0 / 15 / 96 / 0 | #ffd600 | 0,4 |
Das Muster ist eindeutig. Die getesteten Töne Rot, Gelb und Pink kommen praktisch unverändert aufs gestrichene Papier. Das gilt nicht für jedes Rot: Reines Bildschirmrot #ff0000 landet in derselben Rechnung bei ΔE 6,8. Leuchtendes Blau, Violett und Grün verlieren, und zwar sichtbar: Aus dem strahlenden Violett wird ein gedecktes Lila, aus dem Leuchtblau ein Jeansblau. Dunkle, gedämpfte Töne wie das Dunkelblau überstehen den Wechsel weitgehend.
Die Indigo-Zeile ist meine eigene Akzentfarbe von pappelbaum-design.de. Sie würde gedruckt deutlich stumpfer aussehen. Für eine Marke, die fast nur am Bildschirm stattfindet, ist das eine bewusste Entscheidung. Wenn du viel druckst, wähl so eine Farbe nur mit offenen Augen. So sehen die beiden stärksten Verlierer im Vergleich aus:
- Violett am Bildschirmder Wert aus dem Webdesign
- Violett gedrucktso etwa kommt es aus FOGRA39 zurück
- Indigo am BildschirmAkzentfarbe von pappelbaum-design.de
- Indigo gedrucktso etwa kommt es aus FOGRA39 zurück
Ein Hinweis zur Messung: Das sind Rechenwerte für ein Profil. Papier, Druckerei und Bildschirm verschieben das Ergebnis. Verbindlich wird es erst mit einem Proof oder Andruck für genau dieses Papier.
Wie stark das Papier mitspielt, zeigt dieselbe Rechnung mit dem Profil für ungestrichenes Papier (Uncoated FOGRA29): Die Abstände wachsen fast überall, Orange von 3,6 auf 10,0, das getestete Rot von 0,4 auf 7,2, Indigo von 9,3 auf 11,4, Violett von 12,8 auf 15,6. Eine Farbe, die auf gestrichenem Papier gerade noch passt, kann auf ungestrichenem Papier deutlich danebenliegen.
Was das für deine Markenfarben heißt
Jede Farbe bekommt zwei Werte
Eine Markenfarbe ist erst fertig, wenn sie einen Bildschirmwert und einen Druckwert hat, einmal sauber abgestimmt und dann überall gleich verwendet. Wer nur einen HEX-Code hat, überlässt den Druckwert jeder Druckerei neu. Wer nur CMYK hat, überlässt den Webwert jedem Umrechner. Wie Print und Web insgesamt zusammenspielen, steht in Print vs. Web.
Bei einer neuen Marke das Leitmedium festlegen
Findet die Marke vor allem am Bildschirm statt, darf die Farbe leuchten, und der Druckwert wird bewusst als nächstbeste Lösung festgelegt. Ist Gedrucktes wichtig, etwa Verpackung, Schilder oder ein Magazin, gehört die Farbe aus dem druckbaren Bereich gewählt oder als Pantone-Sonderfarbe definiert. Die kostet im Offsetdruck eine zusätzliche Druckplatte und damit Geld, ist dafür aber verlässlich.
Nicht umrechnen lassen, sondern festlegen
Wenn eine Druckerei RGB-Daten bekommt, rechnet sie sie selbst um, mit ihrem Profil und ohne zu wissen, worauf es dir ankommt. Besser: Profil bei der Druckerei erfragen, den CMYK-Wert einmal festlegen, im Styleguide notieren. Bei Pantone-Farben gilt dasselbe in die andere Richtung: Pantone nennt zu seinen Farben selbst Bildschirmwerte. Nimm die als Ausgangspunkt, nicht den erstbesten Umrechner.
Auf der Website gilt nur RGB
Farben im Code als HEX, Bilder in sRGB. CMYK-Bilder gehören nicht auf eine Website. Ob eine Markenfarbe als Textfarbe auf weißem Grund lesbar ist, ist eine zweite, eigene Frage, und die Antwort hängt am Kontrast, nicht am Farbmodus. Fertige Paletten mit nachgerechnetem Kontrast findest du auf der Seite Farbpaletten für Websites, die Grundlagen zur Farbwahl im Beitrag Farben im Branding.
Wenn ich eine Website baue, lege ich die Markenfarben als feste Werte im Code an, getrennt nach ihrer Rolle: Hintergrund, Text, Akzent. Gibt es schon gedruckte Unterlagen, fange ich bei deren Farben an und prüfe, wie sie am Bildschirm wirken, statt sie blind umzurechnen. Wie so ein Projekt abläuft, steht bei meinem Webdesign-Angebot.
Fazit: Beide Werte festlegen, bevor gedruckt wird
RGB für den Bildschirm, CMYK für den Druck, das ist die einfache Hälfte. Die eigentliche Arbeit ist, die Lücke dazwischen nicht dem Zufall zu überlassen. Gedämpfte Töne machen dir dabei selten Ärger. Bei leuchtendem Blau, Violett und Grün entscheidest du besser vorher, welches Medium führt, und schreibst beide Werte fest.
Häufige Fragen
Brauche ich für meine Website RGB oder CMYK?
RGB. Websites arbeiten im Farbraum sRGB, die Farben stehen im Code meist als HEX-Code. CMYK ist ein Druckfarbmodell und hat auf einer Website nichts zu suchen, auch Bilder gehören in sRGB.
Was passiert, wenn ich der Druckerei RGB-Daten schicke?
Die Druckerei rechnet sie selbst in CMYK um, mit ihrem Profil. Bei gedämpften Tönen merkt man davon oft wenig. Leuchtendes Blau, Violett oder Grün wird dabei meist sichtbar stumpfer. Wer die Farbe kontrollieren will, legt den CMYK-Wert vorher selbst fest.
Was ist der Unterschied zwischen HEX und RGB?
Keiner im Farbwert. HEX ist RGB in Kurzschrift: Die drei Werte für Rot, Grün und Blau stehen als zweistellige Hexadezimalzahlen hintereinander, #4f46e5 entspricht also RGB 79/70/229.
Pappelbaum Design
Design direkt vom Designer.
Web, Print oder Marke: ein Ansprechpartner, der alles selbst macht. Eine halbe Stunde reicht, um zu klären, was dein Projekt braucht. Das Gespräch kostet nichts.