HEX, RGB & HSL: Farbcodes verständlich erklärt

Wenn du jemals eine Designdatei geöffnet, #3B82F6 kopiert und dich gefragt hast, warum dasselbe Blau auch als rgb(59, 130, 246) und hsl(217, 91%, 60%) auftaucht, dann bist du auf die drei Farbformate gestoßen, in denen jeder Webdesigner und Frontend-Entwickler früher oder später flüssig werden muss. Sie beschreiben alle exakt denselben Pixel. Sie tun es nur in verschiedenen Sprachen, und jede Sprache ist für eine andere Aufgabe gut.

Ich habe Designsysteme ausgeliefert, bei denen die Wahl des falschen Formats Stunden gekostet hat. Gib einem Entwickler eine Wand aus Hex-Codes für den Hover-Zustand eines Buttons, und du bekommst Rätselraten. Gib ihm eine HSL-Skala, und die Beziehung zwischen den Farben ist offensichtlich. Das hier ist also weniger ein trockenes Abklappern der Spezifikation als vielmehr das praktische Denkmodell, das mir früh jemand hätte mitgeben sollen: was jedes Format tatsächlich codiert und wann man danach greift.

HEX: das Format, das du kopierst, nicht das, in dem du denkst

Ein Hex-Farbcode ist einfach RGB in anderem Gewand. #RRGGBB sind sechs hexadezimale Ziffern, aufgeteilt in drei Paare – Rot, Grün, Blau – und jedes Paar ist ein Byte. Hexadezimal (Basis 16) läuft von 0 bis 9 und dann A bis F, sodass zwei Hex-Ziffern den Bereich 00 bis FF abdecken, was dezimal 0 bis 255 entspricht. Das ist genau ein 8-Bit-Kanal pro Farbe. Drei Kanäle, drei Bytes und die vertrauten 16.777.216 möglichen Farben (256 × 256 × 256).

Genau das ist der Grund, warum es sechs Ziffern sind: je ein Byte für R, G und B. Nimm #3B82F6. Teile es auf: 3B, 82, F6. Wandle jedes Paar von Hex in Dezimal um – 3B ist 59, 82 ist 130, F6 ist 246 – und schon hast du von Hand Hex in RGB umgewandelt. Es ist rgb(59, 130, 246). Dieselbe Farbe, keine Magie.

Es gibt eine Kurzform: #RGB wird durch Verdopplung jeder Ziffer expandiert, sodass #F00 zu #FF0000 (reines Rot) und #0AF zu #00AAFF wird. Sie funktioniert nur, wenn jeder Kanal zufällig aus einer wiederholten Ziffer besteht – deshalb siehst du sie meist bei runden Werten wie #FFF, #000 oder #333. Praktisch in handgeschriebenem CSS, nutzlos für die beliebigen Blautöne, die eine Marke tatsächlich ausliefert.

Hex kann auch Transparenz, was viele überrascht. Das CSS Color Module Level 4 hat achtstelliges Hex eingeführt, #RRGGBBAA, wobei das letzte Paar der Alphawert ist: 00 vollständig transparent, FF vollständig deckend. #3B82F680 ist also dasselbe Blau mit etwa 50 % Deckkraft. Es gibt auch eine vierstellige Kurzform (#RGBA), bei der die #3B8-Logik gilt und jede Ziffer verdoppelt wird. Es wird in jedem aktuellen großen Browser unterstützt; nur der uralte Internet Explorer kann es nicht – in dem Fall ist rgba() der Fallback.

Die Stärke von Hex ist, dass es kompakt und eindeutig ist – ein Token, leicht zu kopieren, leicht in ein Designtool oder eine CSS-Variable einzufügen. Seine Schwäche ist, dass es deinem Gehirn so gut wie nichts sagt. Ist #3B82F6 heller oder dunkler als #2563EB? Du kannst es beim Lesen schlicht nicht erkennen. Genau da fällt Hex von der Klippe.

RGB: wie der Bildschirm tatsächlich denkt

RGB ist das additive Farbmodell, mit dem dein Monitor arbeitet. Jeder Pixel besteht aus drei winzigen Lichtern – Rot, Grün, Blau – und die Werte geben an, wie hell jedes Licht leuchtet, von 0 bis 255. Alle drei auf 0 ist Schwarz (jedes Licht aus). Alle drei auf 255 ist Weiß (jedes Licht auf vollster Stufe). Dreh Rot und Grün auf und lass Blau aus, und du bekommst Gelb – was sich verkehrt anfühlt, wenn du mit Farbe aufgewachsen bist, wo Rot und Grün Matsch ergeben. Bildschirme addieren Licht; Farbe subtrahiert es. Das ist die Grundidee additiver Farbe, und es lohnt sich, sie im Kopf zu behalten, weil sie viele „Warum macht diese Farbe das?“-Momente erklärt.

In CSS schreibst du rgb(59 130 246) (moderne, durch Leerzeichen getrennte Syntax) oder rgb(59, 130, 246) (klassisch mit Kommas); beides ist in Ordnung. Den Alphawert ergänzt du mit einem Schrägstrich – rgb(59 130 246 / 50%) – was die alte separate rgba()-Funktion still abgelöst hat, auch wenn rgba() weiterhin überall funktioniert.

RGB ist lesbarer als Hex, weil die Zahlen dezimal sind und die Kanäle explizit. Wenn du rgb(250, 250, 250) siehst, weißt du sofort, dass es ein Beinahe-Weiß ist, weil alle drei Werte hoch angesetzt sind. Aber es teilt den eigentlichen Makel von Hex: Es taugt schlecht zum Anpassen einer Farbe. Um rgb(59, 130, 246) 10 % dunkler zu machen, kannst du nicht einfach einen Wert verschieben – du musst alle drei Kanäle abgestimmt bewegen, und die Verhältnisse von Hand richtig hinzubekommen ist ein aussichtsloses Unterfangen. Womit wir bei dem Format wären, das genau das löst.

HSL: das Format, in dem du denken solltest

HSL – Hue, Saturation, Lightness (Farbton, Sättigung, Helligkeit) – ist das Format, in dem ich nahezu mein gesamtes Denken erledige, und es ist das, das der Color Palette Generator für jede erzeugte Farbe neben RGB anzeigt. Statt eine Farbe darüber zu beschreiben, wie viel von drei Lichtern zu mischen ist, beschreibt es sie so, wie es ein Mensch tun würde.

• Farbton (Hue) ist ein Winkel auf dem Farbkreis, 0 bis 360 Grad. 0 (und 360) ist Rot, 120 ist Grün, 240 ist Blau. Dreh den Winkel, und du wanderst um den Regenbogen.
• Sättigung (Saturation) ist, wie kräftig die Farbe ist, 0 % bis 100 %. Bei 0 % bekommst du Grau, egal welcher Farbton; bei 100 % ist sie so intensiv, wie der Bildschirm es zulässt.
• Helligkeit (Lightness) ist, wie hell oder dunkel, 0 % bis 100 %. 0 % ist immer Schwarz, 100 % immer Weiß und 50 % die „reine“ Variante des Farbtons.

Unser Blau ist hsl(217, 91%, 60%). Und jetzt schau, was HSL zum Kinderspiel macht. Du willst eine dunklere Schattierung für den gedrückten Button-Zustand? Senke die Helligkeit: hsl(217, 91%, 45%). Eine hellere Tönung für einen Hover-Hintergrund? Heb sie an: hsl(217, 91%, 92%). Eine gedämpfte, staubigere Version für ein deaktiviertes Bedienelement? Zieh die Sättigung herunter: hsl(217, 40%, 60%). Der Farbton hat sich nie bewegt, also liest sich alles durchgehend unverkennbar als dieselbe Blaufamilie. Versuch das mal, indem du RGB-Kanäle bearbeitest, und du verstehst, warum es HSL gibt.

Das ist auch der Grund, warum HSL die natürliche Sprache zum Aufbauen von Skalen sowie Tönungen und Schattierungen ist. Sperre den Farbton, marschiere die Helligkeit in Stufen ab – 95 %, 85 %, 70 %, 55 %, 40 %, 25 % – und du hast eine in sich stimmige Rampe von einer blassen Hintergrundtönung bis zu einer tiefen Textfarbe, alle nachweislich verwandt. Das ist das Rückgrat davon, wie ich skalierbare Farb-Tokens für ein Designsystem aufbaue, und es ist die Mechanik hinter Tönungen, Schattierungen und Tonwerten. HSL macht sogar Farbharmonie zur Rechenaufgabe: Eine Komplementärfarbe ist einfach dein Farbton plus 180 Grad, eine Triade sind drei Farbtöne im Abstand von 120 Grad. Wenn du die vertiefte Version davon willst, geht Farbharmonie im UI-Design verstehen das durch.

Die CSS-Syntax spiegelt den Rest: hsl(217 91% 60%) oder das klassische hsl(217, 91%, 60%), mit Alpha über hsl(217 91% 60% / 50%). Der Farbton kann eine deg-Einheit tragen, braucht sie aber nicht. Ein ehrlicher Vorbehalt: Die Helligkeit von HSL ist nicht dasselbe wie die empfundene Helligkeit. Ein voll gesättigtes Gelb bei 50 % Helligkeit wirkt für dein Auge weit heller als ein Blau bei identischen 50 %. Das ist eine Grenze des Modells, kein Fehler deiner Augen, und genau deshalb gibt es einen Kontrast-Checker, statt dem L-Wert zu vertrauen – mehr dazu weiter unten.

Welches verwendest du also tatsächlich?

In der Praxis verwendest du alle drei, aus unterschiedlichen Gründen, und der Trick besteht darin, das Format dem Moment zuzuordnen.

• HEX zum Speichern und Weitergeben einer einzelnen Farbe – Markenrichtlinien, eine CSS-Variable, das Weitergeben eines Werts an Teammitglieder. Es ist die Lingua franca; alles liest es.
• RGB, wenn du kanalweise arbeitest oder mit Code zu tun hast, der numerische Kanäle erwartet – Canvas, Bildverarbeitung oder immer dann, wenn du rohe 0–255-Werte brauchst. Auch, wenn du unkompliziert mit Alpha arbeiten willst und nicht in Hex-Paaren denken möchtest.
• HSL in dem Moment, in dem du Farben verändern oder zueinander in Beziehung setzen musst: Hover- und Aktiv-Zustände bauen, eine Tönungsskala erzeugen, einen harmonischen Akzent finden oder eine Dark-Mode-Palette abstimmen, bei der du ständig die Helligkeit nachjustierst und die Sättigung zurücknimmst, damit Farben auf dunklem Hintergrund nicht flimmern.

Mein tatsächlicher Workflow: Ich denke und experimentiere in HSL und liefere dann die endgültigen Werte als Hex-Variablen aus. Den Farbton wählen, die Helligkeitsrampe finden, die Kraft per Sättigung gegenchecken – und dann jeden Schritt als Hex-Token einfrieren, das der Rest des Teams konsumiert.

Wogegen dich kein Format schützt, ist Kontrast. Weder HEX noch RGB noch HSL sagt dir, ob Text auf einem Hintergrund lesbar sein wird; das verlangt eine echte Leuchtdichteberechnung gegen die WCAG-Verhältnisse. Die offizielle W3C-Kontrastrichtlinie fordert mindestens 4,5:1 für normalen Fließtext. Deshalb koppelt der Generator seine HSL- und RGB-Anzeigen mit einem eingebauten Kontrast-Checker – damit du den Helligkeitsregler verschieben und das Verhältnis live mitlaufen sehen kannst, statt ein hübsches Blau auszuliefern, das niemand lesen kann.

Sobald diese drei Formate aufhören, wie kryptische Zeichenketten auszusehen, und anfangen, wie drei Sichten auf eine Farbe zu wirken – ein kopierbares Token, die rohen Lichter des Bildschirms und ein menschenfreundlicher Satz Regler – hörst du auf, gegen deine Farben zu kämpfen, und beginnst, sie zu steuern. Öffne den Color Palette Generator, erzeuge etwas und beobachte, wie sich die HSL-Zahlen bewegen, während du ein Farbfeld anpasst. Diese unmittelbare Rückmeldung ist der schnellste Weg, damit all das Klick macht.