CSS-Farbformate: Hex, RGB, HSL, OKLCH — wann was verwenden

Modernes CSS unterstützt vier primäre Farbnotationen: Hex (#FF6600), rgb(),hsl() und das neuere oklch(). Alle beschreiben denselben Farbraum (standardmäßig sRGB, breiter für OKLCH). Sie unterscheiden sich in der Lesbarkeit für Menschen, der Bearbeitbarkeit und darin, welche Art von Farbänderung sich natürlich anfühlt.

Die vier Formate im Überblick

Hex: das Speicherformat

Hex kodiert jeden RGB-Kanal als zweistelligen Hexadezimalwert.#FF6600 bedeutet Rot 255, Grün 102, Blau 0 — das ist ein kräftiges Orange.

Vorteile: kurz, universell verständlich, copy-paste-freundlich, funktioniert in jedem CSS-Kontext.

Nachteile: schwer zu lesen („ist #7E4F2Bein warmer oder kühler Ton?“), Helligkeit oder Sättigung lassen sich nicht ohne vorherige Konvertierung leicht anpassen.

Modernes CSS unterstützt achtstelliges Hex für Transparenz:#FF6600AA ist das obige Orange bei 67 % Deckkraft (AA = 170 / 255).

rgb(): das explizite Kanalformat

Dieselben Kanäle wie Hex, dezimale Zahlen, optionaler Alphawert. Zwei Syntaxen existieren nebeneinander:

• Klassische Kommaform: rgb(255, 102, 0) oder mit Alpha rgba(255, 102, 0, 0.67)
• Moderne Leerzeichenform: rgb(255 102 0) oder mit Alpha rgb(255 102 0 / 0.67)

Am besten für programmatische Erzeugung: Farben aus Algorithmus-Ausgaben aufbauen, zwei Farben mischen, Barrierefreiheits-Kontrast berechnen.

hsl(): das für Menschen anpassbare Format

Drei Werte: Farbton (0-360°), Sättigung(0-100 %), Helligkeit (0-100 %). Jeden Wert unabhängig anzupassen fühlt sich natürlicher an als das Justieren von RGB-Kanälen.

• Farbton: die Farbe selbst. 0 = Rot, 60 = Gelb, 120 = Grün, 180 = Cyan, 240 = Blau, 300 = Magenta.
• Sättigung: 0 % = Grau, 100 % = reine Farbe.
• Helligkeit: 0 % = Schwarz, 50 % = reiner Farbton, 100 % = Weiß.

Am besten für: Design-Tokens, bei denen Sie eine Variante „dieselbe Farbe, dunkler“ wollen — die Helligkeit um 10 % senken, Farbton und Sättigung beibehalten. Hover-Zustände, Theme-Varianten und Verläufe profitieren alle davon.

Der Haken: Die Helligkeit von HSL folgt der wahrgenommenen Helligkeit nicht gleichmäßig. HSL-Gelb bei 50 % Helligkeit wirkt viel heller als HSL-Blau bei 50 % Helligkeit. Für perzeptiv gleichmäßiges Farbdesign ist OKLCH die bessere Wahl.

oklch(): das perzeptive Format

Drei Werte: L (Helligkeit, 0-1),C (Chroma, 0-~0,4 für sRGB-darstellbar),H (Farbton, 0-360°). Basiert auf dem perzeptiven Farbraum OKLab (Björn Ottosson, 2020).

Die entscheidende Eigenschaft: gleiche Helligkeitswerte sehen gleich hell aus. oklch(0.6 0.2 0) (Rot) undoklch(0.6 0.2 120) (Grün) undoklch(0.6 0.2 240) (Blau) haben alle dieselbe wahrgenommene Helligkeit, anders als bei HSL, wo diese dramatisch variieren würden.

Am besten für: Entwerfen von Farbskalen, Dark-Mode-Themes, Sicherstellen, dass der Textkontrast über eine Farbtonrotation hinweg erhalten bleibt. In allen Evergreen-Browsern seit 2023 unterstützt.

Der Haken: Chroma erreicht je nach Farbton unterschiedliche Maximalwerte. Blau mit hohem Chroma ist erreichbar; Gelb mit hohem Chroma stößt früher an die Grenzen des sRGB-Farbraums. Verwenden Sie einen Chroma-Wert, den der Browser bei jedem benötigten Farbton darstellen kann, oder akzeptieren Sie Beschneidung an den Extremen.

Das richtige Format wählen

• Für Markenfarben und Design-Tokens:in HSL oder OKLCH definieren; das ist es, was Designer sinnvoll anpassen können. Hex als Fallback in Legacy-Dateien speichern.
• Für UI-Farbrampen (50/100/200/.../900):OKLCH mit festem Chroma und variierender Helligkeit erzeugt perzeptiv gleichmäßige Skalen. HSL funktioniert, aber die visuelle Abstufung ist ungleichmäßig.
• Zum Kopieren aus einer Figma-/Photoshop-Vorgabe:Hex einfügen. Konvertieren Sie über unser Hex-zu-RGB-Tool oder einen CSS-Präprozessor, wenn Sie etwas bearbeiten müssen.
• Für barrierefreiheitsgetriebene Entscheidungen: berechnen Sie den WCAG-Kontrast in der RGB-Form. Die Kontrastformel arbeitet mit linearem RGB, nicht direkt mit Hex oder HSL.

Das CSS-Custom-Property-Muster

Moderne Theme-Architekturen speichern Farben als HSL-/OKLCH-Custom-Properties, damit sie abgeleitet werden können:

:root {
  --primary-hue: 24;
  --primary: oklch(0.72 0.18 var(--primary-hue));
  --primary-hover: oklch(0.65 0.18 var(--primary-hue));
  --primary-bg: oklch(0.92 0.05 var(--primary-hue));
}

Eine einmalige Änderung des Farbtons rotiert die gesamte Palette konsistent. Dasselbe Muster ist mit Hex ohne Präprozessor-Funktionen nicht möglich.

Das Fazit

Hex zum Speichern und Copy-Paste. RGB für Programmatisches. HSL für das Anpassen durch Designer. OKLCH für perzeptiv gleichmäßige Rampen. Die CSS-Spezifikation erlaubt die freie Mischung; wählen Sie das Format, das zu dem passt, was Sie mit der Farbe vorhaben.

Quellen: CSS Color Module Level 4 (W3C); Björn Ottosson,A perceptual colour space (2020); MDNs Dokumentation zu modernen CSS-Farbfunktionen.

Durchgerechnetes Beispiel: Aufbau einer 10-stufigen UI-Farbrampe

Eine Design-System-Rampe verläuft typischerweise 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 — von hellster zu dunkelster — mit 500 als der „wahren“ Markenfarbe. Die Frage ist, wie jede Zwischenstufe aussehen soll.

Mit HSL bei konstantem Farbton und konstanter Sättigung, mit variierender Helligkeit von 95 % (Stufe 50) bis 15 % (Stufe 900):

--brand-50:  hsl(24 100% 95%);
--brand-100: hsl(24 100% 90%);
--brand-200: hsl(24 100% 80%);
--brand-300: hsl(24 100% 70%);
--brand-400: hsl(24 100% 60%);
--brand-500: hsl(24 100% 50%);  /* base */
--brand-600: hsl(24 100% 42%);
--brand-700: hsl(24 100% 34%);
--brand-800: hsl(24 100% 26%);
--brand-900: hsl(24 100% 18%);

Problem: Die HSL-Helligkeit ist mathematisch gleichmäßig, aber perzeptiv nicht. Der Sprung von brand-400 zu brand-500 wirkt dramatisch; der Sprung von brand-800 zu brand-900 ist kaum sichtbar. Die Rampe wirkt ungleichmäßig.

OKLCH bei konstantem Chroma, mit variierender Helligkeit von 0,97 bis 0,20:

--brand-50:  oklch(0.97 0.04 47);
--brand-100: oklch(0.93 0.07 47);
--brand-200: oklch(0.86 0.11 47);
--brand-300: oklch(0.78 0.15 47);
--brand-400: oklch(0.71 0.18 47);
--brand-500: oklch(0.64 0.21 47);  /* base */
--brand-600: oklch(0.55 0.20 47);
--brand-700: oklch(0.46 0.17 47);
--brand-800: oklch(0.36 0.13 47);
--brand-900: oklch(0.26 0.09 47);

Jede Stufe wirkt wie ein perzeptiv gleichmäßiger Schritt von der vorherigen. Das Chroma nimmt am dunklen Ende ab, weil Farben mit hohem Chroma bei niedriger Helligkeit in sRGB schlicht nicht existieren — Physik, keine Tooling-Entscheidung. Tailwind v4, Radix Colors v3 und die meisten modernen Design-Systeme sind nach 2023 genau aus diesem Grund auf OKLCH-Rampen umgestiegen.

Häufige Fehler bei der Wahl eines Farbformats

• Transparenz inkonsistent auf zwei verschiedene Arten angeben. rgba(255 102 0 / 0.67) und #FF6600AB sind dieselbe Farbe, doch beide in einem Stylesheet zu haben macht Suchen-und-Ersetzen und Theming brüchig. Wählen Sie eine Notation pro Projekt.
• OKLCH bei extremem Chroma vertrauen. oklch(0.6 0.4 47) fordert ein Chroma, das der sRGB-Display-Farbraum gar nicht darstellen kann; der Browser beschneidet auf den nächstmöglichen darstellbaren Wert. Überprüfen Sie, dass Ihre Designabsicht auf echten Displays korrekt dargestellt wird, oder begrenzen Sie das Chroma auf den sicheren sRGB-Bereich (max. ~0,25 für warme Farbtöne, ~0,15 für Grün-Gelb).
• WCAG-Kontrast auf HSL- oder OKLCH-Werten berechnen. Die WCAG-2.1-Kontrastformel arbeitet mit linear-light-sRGB. Tools, die HSL- oder OKLCH-Eingaben entgegennehmen, konvertieren intern zunächst nach sRGB; die manuelle Berechnung der Formel erfordert diese Konvertierung. APCA (die Kontrastmetrik des WCAG-3-Entwurfs) handhabt perzeptive Gleichmäßigkeit nativ und ist für neue Projekte eine Untersuchung wert.
• Hex fest in Komponenten kodieren. color: #FF6600 innerhalb einer Komponente legt die Farbe auf einen Wert fest; das Wechseln des Themes wird zu einer Suchen-und-Ersetzen-Übung. Referenzieren Sie stets Custom-Properties (var(--brand-500)), die am Root definiert sind, nicht literale Hex-Werte.
• Verwenden von color: red oder anderen benannten Farben. Benannte CSS-Farben (red =#FF0000, orange =#FFA500) werden technisch unterstützt, haben aber grelle, undesignte sRGB-Primärfarben, die selten zu einer Markenpalette passen. Behandeln Sie sie als Debug-Farben, nicht als Produktionsfarben.

Wann die Wahl des CSS-Farbformats NICHT wichtig ist

• Statische Einzelseiten ohne Theming. Eine Landingpage mit 5 Farben und ohne Dark Mode: wählen Sie Hex und gut ist. Die Vorteile von OKLCH zahlen sich nur aus, wenn Sie Rampen erzeugen oder mehrere Themes unterstützen.
• Druckgebundene Ausgabe. Alles, was für den CMYK-Druck bestimmt ist, muss von sRGB über ein ICC-Profil in den Farbraum der Zielmaschine konvertiert werden. Die CSS-Notation ist irrelevant; entscheidend sind das Quellprofil und der Rendering-Intent. Siehe unseren RGB-vs.-CMYK-Vergleich für die Details zu Farbraum und Konvertierung.
• E-Mail-HTML. Outlook 2007-2019 und einige Webmail-Clients unterstützen moderne CSS-Farbfunktionen noch immer nicht zuverlässig. E-Mail-Vorlagen sollten auf sechsstelliges Hex zurückfallen; OKLCH und achtstelliges Hex brechen in Outlook Desktop.
• Striktes P3-/Display-P3-Wide-Gamut-Design. Der über color(display-p3 ...) zugängliche Apple-Display-P3-Farbraum ist ein ganz eigenes Thema — siehe den P3-Glossareintrag und unseren Farbraum-Glossareintrag (Gamut) dazu, wann Wide-Gamut-Ausgabe die Komplexität wert ist.

Für die vollständigen Spezifikationsdetails behandelt das CSS Color Module Level 4 jede Notation, und Björn Ottossons ursprünglicher OKLab-Beitrag (2020) ist die kanonische Referenz für das perzeptive Modell hinter OKLCH. Für die interaktive Formatkonvertierung beherrscht der Farbkonverter Hex ↔ rgb ↔ hsl ↔ oklch mit WCAG-Kontrastbericht.

Performance-Überlegungen

Die vier Notationen sind zur Renderzeit rechnerisch äquivalent — der Browser konvertiert vor dem Zeichnen intern alles in lineares RGB. Performance-Unterschiede zwischen den Notationen liegen auf jedem modernen Gerät im Bereich des Messrauschens. Performance kosten kann hingegen:

• Starke Verwendung von color-mix() mit Custom-Property-Argumenten. Jedercolor-mix()-Aufruf wird zur Paint-Zeit aufgelöst; Hunderte davon in einem einzigen Render-Frame können in Lighthouse-Audits auffallen. Berechnen Sie Mischungen für statische Paletten zur Build-Zeit vor.
• Wide-Gamut-color(display-p3 ...) auf Geräten ohne P3-Displays. Der Browser führt pro Element ein Gamut-Mapping durch. Kostenlos auf M-Series-Macs und neueren iPhones; messbarer Aufwand auf älterer Windows-Hardware.
• Geschichtete halbtransparente Hintergründe. Die Alphakanal-Komposition ist auf modernen GPUs schnell, auf schwacher Android-Hardware aber langsam. Das Stapeln von 5+ transparenten Ebenen kann auf den untersten 20 % der Geräte Paint-Storms auslösen.

Browser-Unterstützung und Fallback-Strategie

Browser-Unterstützung Stand Anfang 2026:

Für E-Mail- und Legacy-Browser-Kontexte ist das sichere Ziel sechsstelliges Hex plus separate Alphakanal-Lösungen (halbtransparente PNG-Fallbacks). Für das moderne Web ist OKLCH voll nutzbar; der seltene veraltete Browser scheitert wahrscheinlich ohnehin an wichtigeren Funktionen und verdient eine eigene Strategie statt Kompromisse bei der Farbe.

Die CSS-At-Rule @supports ermöglicht Progressive Enhancement: definieren Sie zuerst einen Hex-Fallback, dann ein OKLCH-Override innerhalb von @supports (color: oklch(0 0 0)) für Browser, die die neue Syntax beherrschen. In der Praxis machen sich das nur wenige Websites zur Mühe — die OKLCH-unterstützende Gruppe liegt laut Can-I-Use-Daten mittlerweile bei über 96 % des globalen Browser-Traffics, und der visuelle Unterschied zwischen einer OKLCH-Rampe und einem HSL-Fallback ist klein genug, dass die einfachste Strategie darin besteht, einen Satz Werte auszuliefern und die 3–4 % zu akzeptieren, die eine HSL-Näherung sehen.