HEX, RGB, HSL und CMYK: Farbcodes verstehen und umrechnen

Wer mit Farben am Computer arbeitet, stolpert früher oder später über kryptische Zeichenketten wie #3A86FF, rgb(58, 134, 255) oder hsl(217, 100%, 61%). Alle drei beschreiben dieselbe Farbe, nur in unterschiedlicher Notation. Dazu kommt CMYK, das in der Druckwelt zu Hause ist und nach einer ganz anderen Logik funktioniert. Wer die vier Modelle versteht, wählt nicht nur das passende für seinen Zweck, sondern erkennt auch, warum eine Farbe am Bildschirm leuchtet und im Flyer plötzlich stumpf wirkt.

Warum es überhaupt verschiedene Farbmodelle gibt

Eine Farbe ist erst einmal nur eine Sinneswahrnehmung. Um sie technisch zu beschreiben, braucht es ein Modell, das die Farbe in messbare Zahlen zerlegt. Welche Zahlen das sind, hängt davon ab, wie die Farbe entsteht. Ein Bildschirm mischt Farben aus Licht, ein Drucker aus Tinte. Das sind zwei grundverschiedene physikalische Vorgänge, und genau deshalb gibt es zwei Grundprinzipien: additive und subtraktive Farbmischung.

Bei der additiven Mischung startet man mit Schwarz, also der Abwesenheit von Licht, und addiert farbiges Licht hinzu. Je mehr Licht, desto heller das Ergebnis. Mischt man rotes, grünes und blaues Licht in voller Intensität, entsteht Weiß. Genau so arbeiten Monitore, Smartphones und Fernseher. RGB, HEX und HSL bauen alle auf diesem Prinzip auf.

Bei der subtraktiven Mischung ist es umgekehrt. Man startet mit Weiß, etwa dem weißen Papier, und entzieht durch Farbpigmente bestimmte Wellenlängen des Lichts. Jede Tinte schluckt einen Teil des reflektierten Lichts. Je mehr Farbe, desto dunkler das Ergebnis. Das ist die Welt von CMYK und damit des Drucks.

RGB: das Fundament der Bildschirmfarben

RGB steht für Rot, Grün und Blau. Jeder dieser drei Kanäle nimmt einen Wert zwischen 0 und 255 an, also 256 Stufen. Das ergibt 256 hoch 3, in Summe gut 16,7 Millionen mögliche Farben. Diese Zahl rührt daher, dass jeder Kanal mit 8 Bit gespeichert wird und 8 Bit genau 256 Zustände darstellen können.

Ein Wert von rgb(255, 0, 0) bedeutet maximales Rot, kein Grün, kein Blau, also reines Rot. rgb(0, 0, 0) ist Schwarz, weil kein Kanal Licht beisteuert. rgb(255, 255, 255) ist Weiß, weil alle drei Kanäle voll aufgedreht sind. Graustufen entstehen immer dann, wenn alle drei Werte identisch sind, etwa rgb(128, 128, 128) für ein mittleres Grau.

RGB ist die technische Sprache, in der Grafikkarten und Displays tatsächlich denken. Jedes Pixel auf dem Schirm besteht aus drei winzigen Leuchtelementen in genau diesen Farben. Deshalb ist RGB im Webdesign, in der Bildbearbeitung und in jeder Form von Bildschirmgrafik der gemeinsame Nenner.

HEX: dieselbe Information, kompakter geschrieben

HEX ist keine eigene Logik, sondern nur eine andere Schreibweise von RGB. Statt drei dezimaler Zahlen verwendet HEX das Hexadezimalsystem, also die Basis 16. Die Ziffern reichen von 0 bis 9 und dann weiter über A bis F, wobei A für 10 steht und F für 15. Zwei Hexadezimalstellen decken den Bereich von 00 bis FF ab, was dezimal genau 0 bis 255 entspricht. Damit lässt sich jeder RGB-Kanal in exakt zwei Zeichen ausdrücken.

Ein HEX-Code beginnt mit einer Raute und hat die Form #RRGGBB. Die ersten beiden Stellen stehen für Rot, die nächsten für Grün, die letzten für Blau. #FF0000 ist reines Rot, identisch zu rgb(255, 0, 0). #000000 ist Schwarz, #FFFFFF ist Weiß. Der Wert #3A86FF zerlegt sich in 3A für Rot, 86 für Grün und FF für Blau, also dezimal rgb(58, 134, 255).

Es gibt auch eine Kurzform mit drei Stellen, etwa #F80. Sie funktioniert nur, wenn sich beide Stellen jedes Kanals wiederholen lassen. #F80 ist die Abkürzung für #FF8800. Die Kurzform spart Platz, deckt aber nur einen kleinen Teil aller Farben ab, weil sie pro Kanal nur 16 statt 256 Abstufungen zulässt.

HSL: Farben so denken, wie Menschen sie wahrnehmen

RGB und HEX sind technisch präzise, aber wenig intuitiv. Wer eine Farbe nur etwas heller machen will, müsste in RGB alle drei Kanäle neu berechnen. HSL löst dieses Problem, indem es die Farbe in drei verständliche Eigenschaften aufteilt: Farbton, Sättigung und Helligkeit.

Der Farbton, auf Englisch Hue, wird als Winkel auf einem Farbkreis angegeben, von 0 bis 360 Grad. 0 Grad ist Rot, 120 Grad Grün, 240 Grad Blau, danach geht es bei 360 wieder bei Rot los. Die Sättigung, Saturation, reicht von 0 bis 100 Prozent und gibt an, wie kräftig die Farbe ist. 0 Prozent ergibt ein Grau, 100 Prozent die volle Buntheit. Die Helligkeit, Lightness, reicht ebenfalls von 0 bis 100 Prozent. 0 Prozent ist immer Schwarz, 100 Prozent immer Weiß, und 50 Prozent zeigt die Farbe in voller Sättigung.

Ein Beispiel: hsl(217, 100%, 61%) beschreibt einen blauen Farbton bei 217 Grad, voller Sättigung und mittlerer bis hoher Helligkeit. Will man daraus eine dunklere Variante für einen Hover-Zustand, senkt man einfach die Helligkeit auf etwa 45 Prozent und lässt Farbton und Sättigung unverändert. In RGB wäre das eine fummelige Rechnerei, in HSL ist es ein einziger geänderter Wert. Genau deshalb greifen viele Designer bei Farbpaletten und Zustandsvarianten zu HSL.

CMYK: die Sprache des Drucks

CMYK steht für Cyan, Magenta, Yellow und Key, wobei Key das Schwarz bezeichnet. Jeder Kanal wird in Prozent von 0 bis 100 angegeben und beschreibt, wie viel Tinte dieser Farbe aufgetragen wird. cmyk(0%, 0%, 0%, 0%) ist unbedrucktes weißes Papier, cmyk(0%, 0%, 0%, 100%) ist volles Schwarz.

Theoretisch ließe sich Schwarz auch aus voll deckendem Cyan, Magenta und Gelb mischen. In der Praxis ergibt das aber ein schmutziges Dunkelbraun und verbraucht unnötig viel Tinte. Deshalb gibt es den separaten Schwarzkanal. Er sorgt für saubere Tiefen, scharfe Texte und sparsameren Farbauftrag.

CMYK ist nur dort relevant, wo physisch gedruckt wird: Flyer, Visitenkarten, Magazine, Verpackungen. Für den Bildschirm ist CMYK ungeeignet, weil Displays kein Licht entziehen, sondern hinzufügen. Eine Datei, die nur am Monitor erscheint, sollte daher immer in RGB bleiben.

Der Vergleich auf einen Blick

Modell	Mischprinzip	Wertebereich	Haupteinsatz	Notation
RGB	additiv (Licht)	0 bis 255 je Kanal	Bildschirm, Web	rgb(58, 134, 255)
HEX	additiv (Licht)	00 bis FF je Kanal	Web, CSS, HTML	#3A86FF
HSL	additiv (Licht)	0 bis 360 Grad, 0 bis 100 %	Design, Anpassungen	hsl(217, 100%, 61%)
CMYK	subtraktiv (Tinte)	0 bis 100 % je Kanal	Druck	cmyk(77%, 47%, 0%, 0%)

Umrechnung Schritt für Schritt

Am anschaulichsten wird die Umrechnung an einem konkreten Wert. Nehmen wir das Blau #3A86FF und rechnen es durch alle Modelle.

HEX zu RGB

Jede Zweiergruppe wird vom Hexadezimal- ins Dezimalsystem umgerechnet. Die linke Stelle multipliziert man mit 16, die rechte addiert man dazu. Für Rot 3A gilt: 3 mal 16 ergibt 48, plus 10 (das A) ergibt 58. Für Grün 86 gilt: 8 mal 16 ergibt 128, plus 6 ergibt 134. Für Blau FF gilt: 15 mal 16 ergibt 240, plus 15 ergibt 255. Damit ist #3A86FF gleich rgb(58, 134, 255).

RGB zu HSL

Zuerst teilt man jeden Kanal durch 255, um Werte zwischen 0 und 1 zu erhalten: Rot 0,227, Grün 0,525, Blau 1,0. Der höchste dieser Werte ist 1,0 (Blau), der niedrigste 0,227 (Rot). Die Differenz beträgt 0,773.

Die Helligkeit ist der Mittelwert aus höchstem und niedrigstem Wert: (1,0 plus 0,227) geteilt durch 2 ergibt 0,613, also rund 61 Prozent. Die Sättigung berechnet sich aus der Differenz im Verhältnis zur Helligkeit und ergibt hier 100 Prozent, weil Blau den Maximalwert voll ausreizt. Der Farbton ergibt sich daraus, welcher Kanal den höchsten Wert hat, hier Blau, und liegt nach der Standardformel bei rund 217 Grad. Das Ergebnis ist hsl(217, 100%, 61%).

RGB zu CMYK

CMYK leitet sich aus den auf 0 bis 1 normierten RGB-Werten ab. Zuerst bestimmt man den Schwarzanteil K als 1 minus dem höchsten normierten Kanal: 1 minus 1,0 ergibt 0, also 0 Prozent Schwarz. Die übrigen Kanäle berechnen sich nach dem Muster (1 minus Kanal minus K) geteilt durch (1 minus K).

Für Cyan: (1 minus 0,227 minus 0) geteilt durch 1 ergibt 0,773, also rund 77 Prozent. Für Magenta: (1 minus 0,525) ergibt 0,475, also rund 47 Prozent. Für Gelb: (1 minus 1,0) ergibt 0, also 0 Prozent. Damit landet #3A86FF bei cmyk(77%, 47%, 0%, 0%). Wichtig: Das ist eine vereinfachte mathematische Umrechnung. Für echten Druck braucht es ein ICC-Farbprofil, das die tatsächlichen Tinten und das Papier berücksichtigt.

Alpha und Transparenz

Bisher ging es um deckende Farben. Sobald eine Farbe teilweise durchscheinen soll, kommt ein vierter Wert ins Spiel: der Alphakanal. Er steuert die Deckkraft. In RGBA wird der Alphawert als Dezimalzahl zwischen 0 und 1 angehängt. rgba(58, 134, 255, 0.5) ist das gleiche Blau wie zuvor, nur zur Hälfte transparent. 1 bedeutet voll deckend, 0 bedeutet komplett unsichtbar.

Im HEX-System lässt sich Alpha über zwei zusätzliche Stellen ausdrücken, also achtstellig in der Form #RRGGBBAA. Auch hier reicht der Bereich von 00 für transparent bis FF für deckend. Eine Deckkraft von 50 Prozent entspricht dezimal etwa 128, hexadezimal 80. #3A86FF80 ist damit das gleiche halbtransparente Blau wie rgba(58, 134, 255, 0.5). Moderne Browser unterstützen diese achtstellige Schreibweise nach dem CSS Color Module Level 4 zuverlässig.

HSL kennt mit HSLA dieselbe Erweiterung. hsla(217, 100%, 61%, 0.5) ist das transparente Pendant zur deckenden HSL-Variante. Transparenz ist allein eine Sache der Bildschirmdarstellung. CMYK kennt keinen Alphakanal, weil Druckfarbe entweder aufgetragen wird oder nicht. Transparenzeffekte werden im Druck über Überdruckeinstellungen und Rasterung gelöst, nicht über einen Farbwert.

Welches Modell wann

Die Wahl ist meist eindeutig. Für alles, was am Bildschirm erscheint, also Webseiten, Apps und digitale Grafiken, nutzt man RGB oder HEX. HEX ist im CSS- und HTML-Umfeld die kompakteste Notation und deshalb dort der Standard. HSL kommt dazu, sobald man Farben systematisch variieren will, etwa für Hover-Effekte, abgestufte Paletten oder dynamische Themes. Für den Druck führt kein Weg an CMYK vorbei, weil die Druckmaschine in genau diesen Tinten arbeitet.

Ein häufiger Fehler ist, RGB-Werte unverändert in den Druck zu schicken. Weil RGB einen größeren Farbraum abdeckt als CMYK, gehen kräftige Leuchtfarben dabei verloren. Wer ein Druckprodukt plant, sollte früh in CMYK denken und Konvertierungen über ein passendes Farbprofil vornehmen, statt sich am Ende über stumpfe Ergebnisse zu wundern.