RGB, HEX oder HSL: Welche Notation ist sinnvoll?

Eine Farbe kann im Web auf verschiedene Arten geschrieben werden. #2563eb, rgb(37 99 235) und ein entsprechender HSL-Wert können dieselbe sichtbare Farbe beschreiben.

Die Wahl zwischen RGB, HEX und HSL ist deshalb in erster Linie eine Frage von Lesbarkeit, Arbeitsweise und Kontext. Sie macht eine Farbe nicht automatisch „besser“.

Mit dem Farbkonverter lassen sich Werte schnell zwischen den üblichen Notationen umrechnen.

RGB: direkt an den Farbkanälen denken

RGB beschreibt eine Farbe über die Intensitäten von Rot, Grün und Blau.

Ein klassischer 8-Bit-Wert verwendet je Kanal Zahlen von 0 bis 255:

color: rgb(37, 99, 235);

Moderne CSS-Syntax erlaubt auch:

color: rgb(37 99 235);

RGB ist besonders verständlich, wenn man weiß, wie digitale Bilder aufgebaut sind. Ein Pixel enthält auf typischen Bildschirmen genau solche Farbkomponenten. Der Hintergrund dazu steht im Artikel Wie ist ein digitales Bild aufgebaut?.

Schwarz, Weiß und Primärfarben

Einige einfache Beispiele:

rgb(0 0 0)       → Schwarz
rgb(255 255 255) → Weiß
rgb(255 0 0)     → Rot
rgb(0 255 0)     → Grün
rgb(0 0 255)     → Blau

Mischt man Kanäle, entstehen weitere Farben. rgb(255 255 0) kombiniert Rot und Grün und ergibt Gelb.

Transparenz mit RGB

CSS kann Alpha direkt ergänzen:

color: rgb(37 99 235 / 0.5);

Der letzte Wert beschreibt die Deckkraft. Das ist oft lesbarer als ältere rgba()-Schreibweisen, obwohl beide Konzepte eng verwandt sind.

HEX: dieselben Kanäle in hexadezimaler Schreibweise

HEX-Farben kodieren Rot, Grün und Blau meist in sechs hexadezimalen Zeichen:

color: #2563eb;

Die Paare sind:

• 25 für Rot,
• 63 für Grün,
• eb für Blau.

Hexadezimal verwendet die Ziffern 0–9 und A–F. Ein Zweierblock kann Werte von 00 bis FF abbilden, also 0 bis 255.

Damit beschreibt #2563eb dieselben 24 Bit Farbinformation wie rgb(37 99 235).

Kurzform von HEX

Wenn sich jede Ziffer eines Paares wiederholt, kann eine Kurzschreibweise verwendet werden:

#fff → #ffffff
#000 → #000000
#3af → #33aaff

Diese Kurzform ist kompakt, aber nicht für jede Farbe möglich.

Alpha in HEX

Achtstellige HEX-Werte können zusätzlich Transparenz enthalten:

#2563eb80

Die letzten beiden Zeichen kodieren Alpha. Das ist technisch präzise, aber für Menschen oft weniger intuitiv als rgb(... / 0.5).

HSL: Farbton, Sättigung und Helligkeit

HSL steht für:

• Hue – Farbton,
• Saturation – Sättigung,
• Lightness – Helligkeit.

Beispiel:

color: hsl(221 83% 53%);

Der Farbton wird als Winkel auf einem Farbkreis verstanden. Ungefähr:

• 0° = Rot,
• 60° = Gelb,
• 120° = Grün,
• 180° = Cyan,
• 240° = Blau,
• 300° = Magenta.

Sättigung und Helligkeit werden in Prozent angegeben.

Warum HSL für Design praktisch sein kann

Wenn eine Farbe heller oder dunkler werden soll, ist HSL häufig intuitiver:

--blue-500: hsl(221 83% 53%);
--blue-600: hsl(221 83% 45%);

Die Helligkeit lässt sich gezielt verändern, ohne gleichzeitig drei RGB-Kanäle manuell anzupassen.

Dasselbe gilt für Sättigung: Eine Farbe kann gedämpft werden, indem man die Sättigung reduziert.

HSL ist kein Garant für wahrgenommene Helligkeit

Ein wichtiger Vorbehalt: Der HSL-Wert lightness entspricht nicht exakt der menschlich wahrgenommenen Helligkeit.

Zwei Farben mit gleicher HSL-Helligkeit können visuell sehr unterschiedlich hell wirken. Deshalb kann HSL beim Entwerfen hilfreich sein, ersetzt aber keine echte Kontrastprüfung.

Mit dem Kontrastprüfer lässt sich kontrollieren, ob Vorder- und Hintergrund die gewünschten WCAG-Schwellen erreichen.

Welche Notation ist „moderner“?

Keine der drei Notationen ist grundsätzlich veraltet. Moderne CSS-Syntax hat alle weiterentwickelt.

Wichtiger ist, innerhalb eines Projekts konsistent zu arbeiten und eine Darstellung zu wählen, die zum Anwendungsfall passt.

Wann HEX sinnvoll ist

HEX eignet sich gut:

• für kompakte Design-Tokens,
• wenn ein Designsystem bereits HEX verwendet,
• für statische Farben ohne häufige Berechnungen,
• wenn Werte zwischen Designsoftware und CSS kopiert werden.

Viele Entwickler erkennen verbreitete Werte wie #fff oder #000 sofort.

Wann RGB sinnvoll ist

RGB ist praktisch:

• bei direkter Arbeit mit Bildpixeln,
• bei Kanalberechnungen,
• bei dynamischen Farbwerten,
• wenn Alpha gut lesbar sein soll,
• beim Vergleich mit Bildverarbeitung oder Canvas.

Wann HSL sinnvoll ist

HSL ist oft angenehm:

• für Farbfamilien,
• für Varianten heller/dunkler,
• für systematische Sättigungsänderungen,
• wenn Farbton als primäre Designentscheidung betrachtet wird.

Ein Designsystem sollte semantische Rollen nutzen

Statt überall Rohwerte zu wiederholen, ist es meist besser, semantische Variablen zu definieren:

:root {
  --color-primary: #2563eb;
  --color-text: #111827;
  --color-background: #ffffff;
}

Die eigentliche Notation kann später geändert werden, ohne dass das gesamte Interface konzeptionell neu gedacht werden muss.

Eine Palette aus einer Bildquelle ableiten

Wer mit einer Fotografie, einem Logo oder einer Illustration startet, kann zunächst dominante Farben extrahieren und daraus ein konsistentes System entwickeln.

Der Leitfaden Wie erstellt man eine Farbpalette aus einem Bild? erklärt den Prozess. Der Farbpaletten-Generator kann anschließend Varianten erzeugen.

Kontrast bleibt unabhängig von der Notation

Ob Vordergrund und Hintergrund als HEX, RGB oder HSL geschrieben sind, ist für die Barrierefreiheit irrelevant. Entscheidend sind die resultierenden Farben.

Der Artikel WCAG-Kontrast: Farben zugänglich gestalten erläutert die Schwellen für Text und UI.

CSS-Farben und Bildfarben

Ein Browser kann dieselbe numerische Farbe aus CSS und aus einem dekodierten Bild unterschiedlich behandeln, wenn Farbprofile und Farbräume ins Spiel kommen. Für die meisten üblichen sRGB-Webfälle ist das jedoch kein Grund, HEX, RGB oder HSL zu bevorzugen.

Die Notation beschreibt vor allem, wie der Farbwert geschrieben wird.

Nicht mit CMYK verwechseln

RGB ist ein additives Modell für Licht und Bildschirme. CMYK ist ein subtraktives Modell aus dem Druck.

Eine HEX-Farbe ist nicht „ein anderes Farbmodell“ als RGB; sie ist im üblichen Webkontext nur eine andere Schreibweise von RGB-Kanalwerten.

Praktische Entscheidung

Eine einfache Orientierung:

• HEX, wenn kompakte statische Tokens wichtig sind;
• RGB, wenn Kanäle oder Transparenz direkt verständlich sein sollen;
• HSL, wenn Farbton, Sättigung und Helligkeit gezielt variiert werden.

In vielen Projekten können diese Notationen problemlos nebeneinander vorkommen.

Fazit

RGB, HEX und HSL beschreiben im üblichen Webeinsatz häufig dieselben Farben aus unterschiedlichen Perspektiven. HEX ist kompakt, RGB kanalnah und HSL für manuelle Designvariationen oft intuitiv.

Die wichtigste Entscheidung ist nicht die Syntax, sondern ein konsistentes Farbsystem mit ausreichendem Kontrast und klaren semantischen Rollen.