Farbmodelle erklärt: HEX, RGB, HSL und OKLCH

Was ist ein Farbmodell?

Ein Farbmodell ist ein mathematisches System, das eine Farbe über Zahlenwerte beschreibt. Im Web werden Farben nicht als Namen („Blau“) gespeichert, sondern als Werte, die z. B. die Mischung der Anteile von Rot, Grün und Blau definieren.

Man unterscheidet grob zwischen technischen Farbmodellen (z. B. RGB, HEX) und wahrnehmungsbasierten Farbmodellen (z. B. HSL, OKLCH), die näher an der menschlichen Farbwahrnehmung liegen.

HEX – Der Web-Standard für Farben

HEX ist die am häufigsten verwendete Schreibweise für Farben im Web. Ein HEX-Farbwert besteht aus sechs hexadezimalen Zeichen, wobei die ersten beiden Ziffern den Rotanteil, die nächsten zwei den Grünanteil und die letzten zwei den Blauanteil darstellen, jeweils als Werte in hexadezimaler Schreibweise von 00 bis FF (0 bis 255 in Dezimal).

• 63 → Rot
• 66 → Grün
• F1 → Blau

Eigenschaften von HEX

• Standard in HTML & CSS
• kompakt und gut zu kopieren
• technisch orientiert, für Menschen weniger intuitiv

Typische Nutzung: CSS, UI-Themes, Design-Tools, Styleguides

RGB – wie HEX aber in dezimaler Schreibweise

RGB steht für Red, Green und Blue. Ähnlich wie bei HEX wird eine Farbe durch die Anteile der drei Grundfarben definiert. Im Gegensatz zu HEX werden die Werte jedoch im Dezimalsystem von 0 bis 255 angegeben.

Eigenschaften von RGB

• sehr präzise und maschinennah
• Grundlage für viele Farbkonvertierungen
• Helligkeit/Farbwirkung lässt sich weniger „gefühlt“ steuern

Typische Nutzung: Programmierung, Grafikverarbeitung, technische Farbmanipulation

HSL – Farbmodell für Menschen (mit anschaulichen Beispielen)

HSL beschreibt Farben über drei Werte: H = Hue (Farbton, 0–360°), S = Saturation (Sättigung, 0–100%), L = Lightness (Helligkeit, 0–100%). Der große Vorteil: Du kannst gezielt an „Farbton“, „Buntheit“ und „Helligkeit“ drehen – das ist für Menschen oft intuitiver als RGB.

1) Hue (H) – der Farbton

Wenn du nur H veränderst, wandert die Farbe entlang des Farbrads. Sättigung und Helligkeit bleiben gleich (hier: S=80%, L=50%).

Typische Daumenregel: 0° = Rot, 120° = Grün, 240° = Blau.

2) Saturation (S) – Sättigung (grau ↔ knallig)

Bei gleichbleibendem Farbton (H=210°) und gleicher Helligkeit (L=50%) macht eine höhere Sättigung die Farbe „bunter“. S=0% bedeutet: komplett grau (keine Farbinformation).

3) Lightness (L) – Helligkeit (dunkel ↔ hell)

L ist der schnellste Weg, um eine Farbe heller oder dunkler zu machen. Bei gleichem Farbton (H=280°) und gleicher Sättigung (S=70%) siehst du hier den Effekt:

Wichtiger Hinweis: Warum HSL-Lightness nicht immer „gleich hell“ wirkt

Ein häufiger Stolperstein: Zwei Farben mit gleicher L-Angabe können visuell sehr unterschiedlich hell wirken. Der Grund ist, dass HSL nicht vollständig auf menschlicher Wahrnehmung basiert. Besonders deutlich wird das bei unterschiedlichen Farbtönen (z. B. Gelb vs. Blau).

Hier haben beide Beispiele die gleiche Lightness (L=50%) und gleiche Sättigung (S=100%) – dennoch wirkt Gelb meist deutlich heller als Blau:

OKLCH – modernes Farbmodell (mit anschaulichen Beispielen)

OKLCH ist ein modernes, wahrnehmungsbasiertes Farbmodell. Das bedeutet: Wenn du in OKLCH z. B. die „Helligkeit“ veränderst, wirkt das für unser Auge deutlich gleichmäßiger als bei HSL. Genau deshalb eignet sich OKLCH besonders gut für Farbskalen, Designsysteme, Dark Mode und barrierefreie UI-Farben.

Wie ist OKLCH aufgebaut?

OKLCH besteht aus drei Komponenten:

• L = Lightness (wahrgenommene Helligkeit, typischerweise 0 bis 1)
• C = Chroma (Farbstärke / „Buntheit“, typischerweise 0 bis ca. 0.3)
• H = Hue (Farbton, Winkel in Grad 0–360)

Beispiel:

Hinweis: Manche Tools schreiben OKLCH mit Prozent (L=67%) – in CSS ist häufig die 0–1-Schreibweise üblich.

1) L (Lightness) – Helligkeit, die „wirklich“ gleichmäßig wirkt

Wenn du nur L änderst, bekommst du eine echte Helligkeitsskala: hell → dunkel, ohne dass einzelne Stufen plötzlich „zu springen“ scheinen. Hier bleibt C=0.16 und H=240° konstant:

2) C (Chroma) – Farbstärke (grau ↔ kräftig), ohne Helligkeit zu „verwackeln“

C steuert, wie „bunt“ eine Farbe ist. Bei C=0 ist die Farbe neutral (grau/weiß/schwarz je nach L). Hier bleibt L=0.65 und H=200° konstant – nur die Farbstärke steigt:

3) H (Hue) – der Farbton (wie beim Farbrad), aber stabiler für Skalen

Wenn du nur den Hue änderst, wandert die Farbe wie bei HSL entlang des Farbrads. Der Unterschied: Bei gleichbleibendem L bleiben die Farben oft konsistenter in ihrer wahrgenommenen Helligkeit. Hier bleibt L=0.65 und C=0.14 konstant:

Warum OKLCH für Farbskalen & Dark Mode oft besser ist als HSL

In der Praxis baust du selten nur „eine Farbe“ – du brauchst Abstufungen: Hover, Active, Border, Background, Dark Mode usw. Mit HSL wirken solche Skalen oft ungleichmäßig, weil gleiche L-Abstände nicht gleich wahrgenommen werden. OKLCH liefert hier häufig die „saubereren“ Stufen.

Wichtiger Hinweis: „Out of Gamut“ (wenn Farben plötzlich „clippen“)

OKLCH kann Farben beschreiben, die nicht in jedem Farbraum (z. B. sRGB) exakt darstellbar sind. Dann müssen Browser/Tools die Farbe anpassen (man spricht oft von Clipping). Das passiert eher bei sehr hohem C (sehr knallig) – vor allem bei mittlerer bis hoher Helligkeit.

Beispiel-Idee: Wenn dir Farben „komisch“ oder „zu ähnlich“ werden, reduziere C etwas (z. B. von 0.22 auf 0.16) oder bewege L leicht.

Mini-Beispiel für ein UI-Set (Primary + Hover + Active)

Hier ein kleines Set, bei dem H und C konstant bleiben und nur L variiert – sehr typisch für Buttons:

Weiterlesen: HSL erklärt · WCAG-Kontrast · Tool öffnen

Wann sollte man welches Farbmodell nutzen?

In CSS kannst du HEX, RGB, HSL und OKLCH grundsätzlich alle verwenden. Der Unterschied ist weniger „richtig oder falsch“, sondern: Welches Format passt zur Aufgabe und zum Workflow?

Empfehlungen nach Anwendungsfall

Empfohlener Workflow (praxisnah)

Viele professionelle Workflows nutzen OKLCH zum Generieren von Skalen und exportieren anschließend in ein „Austauschformat“:

Warum das sinnvoll ist: HEX/RGB sind in nahezu allen Tools und Workflows problemlos nutzbar, während OKLCH bei der Farbgestaltung und beim Ableiten konsistenter Skalen oft bessere Ergebnisse liefert.

Weiterlesen: WCAG-Kontrast · HSL · OKLCH · Tool öffnen

Fazit

Farbmodelle sind nicht nur verschiedene Schreibweisen derselben Farbe. Sie beeinflussen, wie Farben wahrgenommen, verändert und eingesetzt werden. Während HEX und RGB weiterhin die technische Basis bilden, gewinnen wahrnehmungsbasierte Modelle wie OKLCH zunehmend an Bedeutung – vor allem im modernen Webdesign und in Designsystemen.

FAQ: Häufige Fragen zu Farbmodellen

Hier findest du kurze Antworten auf häufige Fragen rund um HEX, RGB, HSL und OKLCH.

Mehr Praxis: Tool öffnen · WCAG-Kontrast