CSS-Farbfunktionen: rgb(), hsl(), oklch() im Vergleich

CSS bietet mehr Möglichkeiten, eine Farbe zu schreiben, als die meisten Entwickler wissen. Jenseits des allgegenwärtigen Hex-Codes gibt es mindestens acht verschiedene Farbfunktionen – und jede hat ein anderes Modell, andere Stärken und andere Gründe, warum man zu ihr greifen könnte. Die richtige Wahl ist nicht nur eine Syntaxpräferenz; sie kann bestimmen, ob Ihre Farben barrierefrei sind, ob sie in Animationen korrekt interpolieren und ob Sie programmatische Farbskalen erstellen können, die visuell konsistent wirken.

Dieser Leitfaden behandelt jede wichtige CSS-Farbfunktion, wann jede einzelne glänzt und wie die Browser-Unterstützung im Jahr 2026 aussieht.

rgb() und rgba()

Die Funktion rgb() ist der direkte CSS-Ausdruck des RGB-Farbmodells: drei Zahlen von 0 bis 255, je eine für Rot, Grün und Blau.

color: rgb(59, 130, 246);     /* Ein lebhaftes Blau */
color: rgb(255, 87, 51);      /* Ein warmes Korallenrot */
color: rgb(0, 0, 0);          /* Schwarz */
color: rgb(255, 255, 255);    /* Weiß */

rgba() ist die historische Form zum Hinzufügen von Deckkraft, mit einem vierten Argument von 0 (transparent) bis 1 (opak):

color: rgba(59, 130, 246, 0.5);   /* Dasselbe Blau bei 50% Deckkraft */

Moderne rgb()-Syntax

In CSS Color Level 4 (seit 2023 vollständig in allen modernen Browsern unterstützt) wurde rgb() aktualisiert, um den Alphakanal direkt zu akzeptieren, wodurch rgba() überflüssig wird:

/* Diese sind nun gleichwertig */
color: rgba(59, 130, 246, 0.5);
color: rgb(59 130 246 / 0.5);

Die neue, durch Leerzeichen getrennte Syntax mit einem Schrägstrich vor dem Alphawert funktioniert mit rgb(), hsl() und anderen Funktionen. Beide Formen funktionieren – Sie werden beide in bestehenden Codebases sehen.

Wann rgb() verwenden

rgb() ist am nützlichsten, wenn: - Sie von einem Hex-Code aus arbeiten und die rohen Kanalwerte sichtbar haben möchten - Sie einzelne R-, G- oder B-Kanäle über CSS Custom Properties animieren müssen - Sie Farben programmgesteuert generieren und die Quelldaten bereits in RGB vorliegen

Seine Schwäche liegt darin, dass menschliche Intuition nicht gut auf RGB abbildet. Es ist schwer, rgb(107, 142, 35) anzuschauen und zu wissen, dass man Olivgrün erhält. Für Designarbeit sind HSL oder OKLCH intuitiver.

hsl() und hsla()

HSL steht für Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit). Es bildet Farben auf einen Zylinder statt auf einen Würfel ab, was viel näher daran ist, wie Designer tatsächlich über Farbe denken.

• Hue: ein Grad auf dem Farbrad von 0 bis 360 (0 = Rot, 120 = Grün, 240 = Blau)
• Saturation: 0% (Grau, keine Farbe) bis 100% (vollständig lebhaft)
• Lightness: 0% (Schwarz) bis 100% (Weiß), mit 50% als der „reinen" Farbe

color: hsl(217, 91%, 60%);    /* Ein lebhaftes Blau */
color: hsl(9, 100%, 60%);     /* Ein warmes Korallenrot */
color: hsl(80, 60%, 35%);     /* Olivgrün */
color: hsl(0, 0%, 50%);       /* Reines Mittelgrau */

hsla() fügt den Alphakanal hinzu, identisch mit dem rgb()/rgba()-Muster:

color: hsla(217, 91%, 60%, 0.5);  /* Blau bei 50% Deckkraft */
color: hsl(217 91% 60% / 0.5);   /* Dasselbe, mit moderner Syntax */

Warum hsl() die Web-Entwicklung veränderte

Bevor hsl() in CSS 2.1 (2011) kam, erforderte das Ändern der Helligkeit oder Sättigung einer Farbe in CSS, zu einem Hex-Code oder RGB-Werten zurückzukehren und von Grund auf neu zu berechnen. Mit hsl() können Sie ganz einfach konsistente Variationen einer Farbe erstellen:

:root {
  --blue-h: 217;
  --blue-s: 91%;
}

.btn {
  background: hsl(var(--blue-h), var(--blue-s), 60%);    /* Basis */
}
.btn:hover {
  background: hsl(var(--blue-h), var(--blue-s), 50%);    /* Dunkler beim Hover */
}
.btn:active {
  background: hsl(var(--blue-h), var(--blue-s), 40%);    /* Noch dunkler */
}

Das Problem mit hsl()

Trotz seiner intuitiven Attraktivität hat HSL einen grundlegenden Fehler: Es ist nicht wahrnehmungsgleichmäßig. Gleiche numerische Schritte in HSL erzeugen keine Farben, die dem menschlichen Auge gleich unterschiedlich erscheinen.

Das offensichtlichste Symptom ist Gelb. Ein reines HSL-Gelb (hsl(60, 100%, 50%)) erscheint viel heller und intensiver als ein reines HSL-Blau (hsl(240, 100%, 50%)), obwohl beide dieselben Sättigungs- und Helligkeitswerte haben. Das macht es schwierig, Farbskalen zu erstellen, bei denen verschiedene Farbtöne visuell ausgewogen wirken.

Aus diesem Grund bewegt sich moderne CSS-Farbarbeit zunehmend in Richtung OKLCH.

lab() und lch()

CSS Color Level 4 führte lab() und lch() ein, basierend auf dem CIE L*a*b*-Farbraum, der von Farbwissenschaftlern entwickelt wurde, um wahrnehmungsgleichmäßig zu sein – gleiche numerische Unterschiede entsprechen gleich wahrgenommenen Farbunterschieden.

lab()

lab() verwendet drei Achsen: - L: Helligkeit von 0 (Schwarz) bis 100 (Weiß) - a: Position auf der Grün-Rot-Achse (negativ = Grün, positiv = Rot) - b: Position auf der Blau-Gelb-Achse (negativ = Blau, positiv = Gelb)

color: lab(53 -5 -60);    /* Ein lebhaftes Blau */
color: lab(55 60 40);     /* Ein warmes Rot-Orange */
color: lab(80 -15 20);    /* Weiches Olive/Lime */

Die a- und b-Achsen sind weniger intuitiv als Farbtongrade, was lab() etwas schwierig macht, von Hand zu schreiben. Es ist am nützlichsten programmatisch – zum Beispiel beim Berechnen wahrnehmungsgleichmäßiger Verläufe oder Kontrastverhältnisse.

lch()

lch() ist eine zylindrische Neugestaltung von Lab mit Lightness, Chroma (ähnlich wie Sättigung) und Hue:

color: lch(53 60 265);    /* Lebhaftes Blau (L=53, C=60, H=265°) */
color: lch(60 55 25);     /* Warmes Orange-Rot */

Der Farbton in lch() bildet sich ungefähr (aber nicht identisch) auf den Farbton in hsl() ab. Der wesentliche Unterschied ist, dass Helligkeit und Chroma in lch() wahrnehmungsmäßig bedeutsam sind – zwei Farben bei lch(70 40 X) erscheinen gleich hell unabhängig von ihrem Farbton, was in hsl() nicht der Fall ist.

Wann lab() und lch() verwenden

Diese Funktionen eignen sich hervorragend für: - Die Erzeugung barrierefreier Farbpaare, bei denen der wahrgenommene Kontrast vorhersehbar ist - Den Aufbau von Datenvisualisierungspaletten, bei denen Farben gleich gewichtet wirken - Das Erstellen glatter, natürlich wirkender Verläufe

Sie wurden für die meisten neuen Arbeiten von oklch() abgelöst, das genauer ist und eine bessere Tool-Unterstützung hat.

oklch()

OKLCH ist der aktuelle Stand der Technik für die CSS-Farbspezifikation. Es basiert auf dem Oklab-Farbraum, der 2020 von Björn Ottosson entwickelt wurde und CIE Lab durch bessere Wahrnehmungsgleichmäßigkeit verbessert – insbesondere für Blau- und Lilatöne, die CIE Lab schlecht verarbeitet.

Die Funktion nimmt drei Werte plus ein optionales Alpha:

• L: Helligkeit von 0 (Schwarz) bis 1 (Weiß)
• C: Chroma (Farbintensität), typischerweise 0 bis 0,4
• H: Farbtonwinkel in Grad, 0 bis 360

color: oklch(0.62 0.19 250);    /* Lebhaftes Blau */
color: oklch(0.65 0.22 25);     /* Warmes Rot-Orange */
color: oklch(0.85 0.08 130);    /* Weiches Grün */
color: oklch(0.62 0.19 250 / 0.5); /* Blau bei 50% Deckkraft */

Warum oklch() wichtig ist

Vorhersehbare Helligkeit. Da OKLCH-Helligkeit wahrnehmungsgleichmäßig ist, sehen zwei Farben mit demselben L-Wert gleich hell aus, unabhängig vom Farbton. Das macht es einfach, Farbpaletten aufzubauen, bei denen jeder Farbton ausgewogen wirkt:

/* All diese wirken gleich "mittelgewichtig" in OKLCH */
--red:    oklch(0.65 0.25 15);
--green:  oklch(0.65 0.18 145);
--blue:   oklch(0.65 0.19 250);
--yellow: oklch(0.65 0.15 90);

Versuchen Sie das mit hsl() – das Gelb wird spürbar heller als das Blau wirken.

Zugang zum Wide Gamut. OKLCH kann Farben außerhalb des sRGB-Farbraums ausdrücken und ermöglicht so Zugang zu den lebhaften Farben, die auf modernen Displays (iPhone, MacBook Pro, die meisten Laptops ab 2023) verfügbar sind und Display P3 oder Breiteres unterstützen. Hex-Codes und rgb() sind auf sRGB beschränkt:

/* Dieses lebhafte Grün ist nur mit oklch möglich – außerhalb von sRGB */
color: oklch(0.72 0.30 145);

Browser ordnen automatisch Out-of-Gamut-OKLCH-Farben der nächsten verfügbaren Farbe zu, sodass es sicher ist, Wide-Gamut-Farben jetzt zu verwenden.

Bessere Verlaufinterpolation. Farben, die in OKLCH interpoliert (animiert oder verlaufen) werden, passieren wahrnehmungsmäßig zwischenliegende Farben. Der berüchtigte „graue schlammige Mittelpunkt", der in RGB-Verläufen zwischen Komplementärfarben auftritt, tritt in OKLCH nicht auf.

oklch() in Design-Systemen

Eine wachsende Anzahl von Design-Systemen und CSS-Frameworks übernimmt OKLCH für ihre Farbskalen. Wenn Sie ab 2025 ein Design-System von Grund auf aufbauen, ist OKLCH der empfohlene Ausgangspunkt. Verwenden Sie den Farbkonverter, um jeden vorhandenen Hex-Code in sein OKLCH-Äquivalent zu übersetzen.

color-mix()

color-mix() ist eine neuere CSS-Funktion, die zwei Farben in einem bestimmten Farbraum und Verhältnis mischt:

/* Blau und Rot zu gleichen Teilen in oklch mischen */
color: color-mix(in oklch, #3B82F6 50%, #EF4444 50%);

/* Einen helleren Ton erstellen: mit Weiß mischen */
color: color-mix(in oklch, oklch(0.62 0.19 250) 60%, white);

/* Einen dunkleren Ton erstellen: mit Schwarz mischen */
color: color-mix(in oklch, oklch(0.62 0.19 250) 70%, black);

Das in oklch (oder in srgb, in hsl usw.) gibt den Farbraum an, der für die Mischberechnung verwendet wird, was das Ergebnis erheblich beeinflusst.

Warum der Farbraum beim Mischen wichtig ist

Das Mischen in sRGB erzeugt bei Komplementärfarben oft stumpfe, entsättigte Mittelpunkte. Das Mischen in OKLCH erzeugt wahrnehmungsmäßig lebhafte Zwischenfarben – weil die OKLCH-Interpolation demselben Weg folgt, den die menschliche Farbwahrnehmung nimmt.

/* Blau und Gelb in sRGB mischen ergibt oft ein stumpfes Olive/Grau */
color: color-mix(in srgb, blue, yellow);

/* Mischen in oklch ergibt eine lebhafte grüne Zwischenstufe */
color: color-mix(in oklch, blue, yellow);

Praktische Anwendungsfälle für color-mix()

Generierung von Themenvarianten. Statt fünf Schattenvarianten Ihrer Markenfarbe fest zu kodieren, generieren Sie sie dynamisch:

:root {
  --brand: oklch(0.55 0.22 250);
  --brand-light: color-mix(in oklch, var(--brand) 50%, white);
  --brand-lighter: color-mix(in oklch, var(--brand) 25%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 80%, black);
}

Dark-Mode-Anpassung. Automatisch Dark-Mode-Oberflächenfarben durch Mischen mit einer dunklen Basis ableiten:

@media (prefers-color-scheme: dark) {
  --surface: color-mix(in oklch, var(--brand) 15%, #121212);
}

Deckkraft ohne tatsächliche Transparenz. Eine Farbe mit Weiß oder einer bestimmten Hintergrundfarbe zu mischen, simuliert Deckkraft ohne überlagernde Ebenen:

/* Simuliert rgba(59, 130, 246, 0.2) auf weißem Hintergrund */
color: color-mix(in srgb, #3B82F6 20%, white);

Browser-Unterstützung 2026

Anfang 2026 werden oklch() und color-mix() in allen großen aktuellen Browsern unterstützt. Das primäre Problem sind Nutzer mit älteren mobilen Browsern oder Unternehmensumgebungen mit veralteten Browser-Richtlinien. Für Produktionsarbeit, bei der maximale Kompatibilität wichtig ist, geben Sie einen Hex- oder rgb()-Fallback vor der modernen Syntax an:

.element {
  /* Fallback für ältere Browser */
  color: #3B82F6;
  /* Progressive Enhancement */
  color: oklch(0.62 0.19 250);
}

Die richtige CSS-Farbfunktion auswählen

Wesentliche Erkenntnisse

• rgb() und hsl() sind die etablierten Standards mit universeller Browser-Unterstützung. Die moderne leerzeichen-getrennte Syntax (rgb(R G B / alpha)) macht rgba() und hsla() überflüssig.
• hsl() ist intuitiver als rgb() für Designarbeit, aber nicht wahrnehmungsgleichmäßig – gleiche numerische Schritte erzeugen ungleiche Wahrnehmungsänderungen, besonders über Farbtöne hinweg.
• lab() und lch() führten Wahrnehmungsgleichmäßigkeit in CSS ein, wurden aber weitgehend vom genaueren oklch() abgelöst.
• oklch() ist der moderne Standard: wahrnehmungsgleichmäßig, Wide-Gamut-fähig und ausgezeichnet für Verläufe, Animationen und Design-System-Farbskalen.
• color-mix() ermöglicht dynamische Farbgenerierung direkt in CSS – nützlich für Themes, Töne, Schattierungen und Dark-Mode-Anpassung.
• Verwenden Sie den Farbkonverter, um jeden vorhandenen Hex-Code in oklch() oder ein anderes Format zu übersetzen.
• Geben Sie Fallback-Hex- oder rgb()-Werte vor oklch() oder color-mix() an, um maximale Browser-Kompatibilität zu gewährleisten.