🎨
← Zurück zu Anleitungen

Moderne CSS-Farbfunktionen: rgba(), hsl(), oklch() und mehr

· Tags: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Moderne CSS-Farbfunktionen: rgba(), hsl(), oklch() und mehr

CSS-Farbfunktionen haben sich dramatisch weiterentwickelt. Was einst eine Wahl zwischen Hex, rgb() und hsl() war, ist heute ein reichhaltiges Ökosystem aus Farbräumen und Manipulationsfunktionen, die Entwicklern eine beispiellose Kontrolle über Farbdarstellung, Interpolation und Barrierefreiheit geben.

Dieser Leitfaden behandelt jede wichtige CSS-Farbfunktion, die 2026 verfügbar ist – von den vertrauten bis zu den neuesten.

RGB und RGBA: Die Arbeitstiere

Die Funktion rgb() definiert Farben mithilfe des additiven Rot-Grün-Blau-Farbmodells. Sie ist seit CSS1 Teil von CSS und wird in jedem je hergestellten Browser unterstützt.

/* Ältere, durch Kommas getrennte Syntax */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Moderne, durch Leerzeichen getrennte Syntax (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Prozentwerte */
color: rgb(100% 0% 0%);

Wichtige Änderungen im modernen RGB

CSS Color Level 4 führte zwei wichtige Verbesserungen ein:

  1. Durch Leerzeichen statt Kommas getrennt — Die Funktion rgb() akzeptiert nun Werte, die durch Leerzeichen oder Schrägstriche getrennt sind
  2. Vereinheitlichte Alpha-Syntax — Das Alias rgba() ist veraltet (aber weiterhin unterstützt). rgb() akzeptiert nun nativ einen Alpha-Kanal

Diese moderne Syntax wird in allen Browsern unterstützt, die seit 2020 veröffentlicht wurden. Verwenden Sie für neue Projekte die moderne Syntax und lassen Sie das Alias rgba() ganz weg.

RGB-Kanäle

Jeder RGB-Kanal akzeptiert:

  • Eine ganze Zahl von 0 bis 255
  • Einen Prozentsatz von 0 % bis 100 %
  • Das Schlüsselwort none für fehlende Kanäle (CSS Color Level 4)

Das Schlüsselwort none ist nützlich beim Interpolieren von Farben – es teilt dem Browser mit, diesen bestimmten Kanal nicht zu interpolieren.

HSL und HSLA: Intuitive Farbsteuerung

HSL steht für Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Es verwendet ein zylindrisches Koordinatensystem, das sich auf natürliche Weise darin abbildet, wie Menschen über Farbe denken.

/* H ist der Farbtonwinkel (0–360), S die Sättigung (0–100 %), L die Helligkeit (0–100 %) */
color: hsl(0 100% 50%);        /* Reines Rot */
color: hsl(0 100% 50% / 0.5);  /* Rot mit 50 % Deckkraft */

/* Farbtonwinkel mit Einheiten */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Farbtonwinkel-Referenz

| Farbton | Farbe | Hex | |-----|---------|----------| | 0 | Rot | #FF0000 | | 30 | Orange | #FF8000 | | 60 | Gelb | #FFFF00 | | 120 | Grün | #00FF00 | | 180 | Cyan | #00FFFF | | 240 | Blau | #0000FF | | 300 | Magenta | #FF00FF |

HSL ist die beste Wahl für die programmatische Erzeugung von Farbpaletten, weil die Änderung nur des Helligkeits- oder Sättigungskanals konsistente visuelle Varianten erzeugt.

HWB: Mischen mit Weiß und Schwarz

HWB (Farbton, Weißanteil, Schwarzanteil) ist eine intuitivere Alternative zu HSL. Sie wählen einen Farbton und fügen dann Weiß- und Schwarzanteile hinzu, um Tönungen und Schattierungen zu erzeugen.

color: hwb(0 0% 0%);    /* Reines Rot */
color: hwb(0 40% 0%);   /* Getöntes Rot (Weiß hinzugefügt) */
color: hwb(0 0% 40%);   /* Abgeschattetes Rot (Schwarz hinzugefügt) */
color: hwb(0 20% 20%);  /* Ton (Weiß + Schwarz) */

HWB ist für einen bestimmten Anwendungsfall einfacher als HSL: das Erzeugen von Tönungs- und Schattierungsvarianten einer Markenfarbe. Sie müssen nie über Sättigungskurven nachdenken – fügen Sie einfach Weiß oder Schwarz hinzu.

Browserunterstützung: HWB wird in allen modernen Browsern unterstützt (Chrome 101+, Firefox 96+, Safari 15+).

LAB und LCH: Wahrnehmungsgleichmäßige Farbräume

LAB (Helligkeit, A-Achse, B-Achse) und LCH (Helligkeit, Chroma, Farbton) sind wahrnehmungsgleichmäßige Farbräume. Das bedeutet, dass die euklidische Distanz zwischen zwei Farbwerten der wahrgenommenen visuellen Differenz entspricht – etwas, das RGB und HSL nicht leisten können.

color: lab(50% 50 0);        /* Mittelrot */
color: lch(50% 50 0);        /* Gleiche Farbe in zylindrischer Form */

Warum wahrnehmungsgleichmäßige Farbräume wichtig sind:

  • Verläufe — Die Interpolation in LAB oder LCH erzeugt weiche, natürliche Übergänge ohne die stumpfe „Schlammzone", die RGB-Verläufe erzeugen
  • Farbdifferenzmessung — Delta E (das Maß für wahrgenommene Differenz) ist im LAB-Raum aussagekräftig
  • Barrierefreiheit — Wahrnehmungsgleichmäßigkeit hilft vorherzusagen, wie Farben von Nutzern mit Farbschwäche wahrgenommen werden

Einschränkungen: LAB und LCH können Farben außerhalb des sRGB-Gamuts erzeugen. Diese Farben werden auf sRGB-Bildschirmen abgeschnitten, sind aber auf Displays mit breiterem Gamut (DCI-P3, Rec. 2020) verfügbar.

Browserunterstützung: Unterstützt in Chrome 111+, Firefox 113+, Safari 15+. Keine IE- oder Legacy-Edge-Unterstützung.

OKLAB und OKLCH: Moderner Wahrnehmungsstandard

OKLCH ist eine verbesserte Version von LCH, entwickelt von Bjorn Ottosson. Es behebt wahrnehmungsbezogene Ungleichmäßigkeiten in LCH, insbesondere bei Blautönen. OKLCH ist 2025–2026 zum empfohlenen Standard-Farbraum für neue CSS-Projekte geworden.

color: oklch(60% 0.2 30);
/* Helligkeit: 0–100 %, Chroma: 0–~0.4, Farbton: 0–360 */

Warum OKLCH der beste Farbraum für CSS ist

  1. Beste wahrnehmungsbezogene Gleichmäßigkeit — Gleiche numerische Änderungen erzeugen über alle Farbtöne hinweg gleiche visuelle Änderungen
  2. Vorhersehbare Helligkeit — Farben mit demselben Helligkeitswert wirken tatsächlich gleich hell
  3. Keine schlammigen Verläufe — Die Interpolation bleibt über den gesamten Farbtonbereich sauber
  4. Standardmäßig sRGB-sicher — Die meisten OKLCH-Werte erzeugen In-Gamut-sRGB-Farben
  5. Intuitive Kanäle — Wie HSL, aber mit tatsächlicher wahrnehmungsbezogener Genauigkeit

OKLCH in der Praxis

/* Erstellen einer ausgewogenen Farbskala mit OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Beachten Sie, dass sich jeder Schritt um ungefähr denselben Helligkeitswert ändert (20 Prozentpunkte). Da OKLCH wahrnehmungsgleichmäßig ist, erscheinen diese Schritte für das menschliche Auge gleichmäßig verteilt – etwas, das mit HSL nur schwer zu erreichen ist.

Browserunterstützung: OKLCH wird in Chrome 111+, Firefox 113+, Safari 15.4+ unterstützt. Es ist schnell zum am häufigsten empfohlenen modernen Farbraum geworden.

Color-Mix: Farben in CSS mischen

Die Funktion color-mix() mischt zwei Farben in einem bestimmten Farbraum:

/* Rot und Blau zu gleichen Teilen in sRGB mischen */
color: color-mix(in srgb, red, blue);

/* 30 % Primärfarbe, 70 % Weiß – eine Tönung */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Mit wahrnehmungsbezogenem Farbraum für weiche Ergebnisse mischen */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

Mit dem Parameter in <Farbraum> steuern Sie den Interpolationsraum. In den meisten Fällen erzeugt in oklch die besten visuellen Ergebnisse.

Anwendungsfälle:

  • Erstellen von Tönungen und Schattierungen ohne Präprozessor-Funktionen
  • Aufbau von Komponentenvarianten aus einem einzigen Farb-Token
  • Dynamisches Erzeugen von Hover- und Aktiv-Zuständen
  • Erzeugen verlaufsartiger Effekte in einer einzigen Funktion

Relative Farb-Syntax: Vorhandene Farben modifizieren

CSS Color Level 4 ermöglicht es Ihnen, neue Farben aus vorhandenen abzuleiten, indem Sie einzelne Kanäle modifizieren:

--primary: #3366cc;

/* Verwendung von OKLCH-Kanälen */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Verwendung von HSL-Kanälen */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

Das Schlüsselwort from <Farbe> entpackt die Kanäle der Quellfarbe in die Kanäle der Zielfunktion, die Sie anschließend mit Arithmetik anpassen können.

Kanal-Schlüsselwörter pro Farbraum

Jeder Farbraum stellt spezifische Kanal-Schlüsselwörter bereit:

| Farbraum | Schlüsselwörter | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Überblick über die Browserunterstützung (2026)

| Funktion | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Alle | Alle | Alle | Alle | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Relative Farb-Syntax | 111+ | 113+ | 16.2+ | 111+ |

Alle modernen Farbfunktionen können 2026 sicher für Projekte verwendet werden, die keine Internet-Explorer-Unterstützung erfordern. Für eine breitere Kompatibilität verwenden Sie einen Build-Schritt, der moderne Syntax in Hex oder das ältere rgb() konvertiert.

Praktische Empfehlungen

  • Für bestehende Projekte — HSL bleibt die beste Balance aus Lesbarkeit und Leistungsfähigkeit
  • Für neue Projekte — Verwenden Sie OKLCH als primären Farbraum wegen seiner wahrnehmungsbezogenen Genauigkeit
  • Für Verläufe — Interpolieren Sie immer in OKLCH, um schlammige Übergänge zu vermeiden
  • Für Designsysteme — Speichern Sie Grundfarben in OKLCH und erzeugen Sie Varianten mit color-mix() oder relativer Syntax
  • Für Canvas/WebGL — Bleiben Sie bei RGB, das nativ zur Rendering-Pipeline gehört

Fazit

Moderne CSS-Farbfunktionen haben verändert, was Sie mit Farbe im Web tun können. OKLCH bietet wahrnehmungsbezogene Gleichmäßigkeit, die das Design von Farbsystemen vorhersehbar macht. color-mix() und die relative Farb-Syntax eliminieren die Notwendigkeit für Farbfunktionen in Präprozessoren. Zusammen geben diese Tools Webentwicklern dieselbe Farbkraft, die Designtools seit Jahren bieten – jetzt direkt im Browser.

Nutzen Sie unseren kostenlosen Online-Color-Converter, um zwischen allen modernen CSS-Farbformaten zu konvertieren, einschließlich OKLCH, LAB, HWB und klassischem HEX/RGB/HSL.