Farben-Konverter: HEX, RGB, HSL, OKLCH, LAB, P3 mit WCAG-Kontrast

Eine Farbe ist kein einzelner Wert, sondern eine Sammlung verschiedener Darstellungsformen. HEX zum Schreiben, RGB zum Senden, OKLCH zum Denken in wahrgenommener Helligkeit. Der Konverter unten zeigt sechs Farbräume gleichzeitig, mit Hinweisen zum Tonumfang (sRGB / Display-P3 / außerhalb), einem OKLCH-Helligkeitsregler und einem Live-WCAG-Kontrast, der dir sofort sagt, ob eine Vordergrund/Hintergrund-Kombination für Barrierefreiheit geeignet ist.

Sechs Farbräume, eine Farbe

Jeder Farbraum hat Stärken und Schwächen.

HEX ist eine kompakte sRGB-Notation und der CSS-Klassiker. Aber er bleibt auf sRGB beschränkt - wenn du Display-P3 nutzen willst, brauchst du die color(display-p3 …)-Notation; HEX trägt dort nicht mehr.

RGB ist die natürliche Sprache des Bildschirms: drei Zahlen, eine pro Kanal. Praktisch beim Übergeben an Betriebssystem-Schnittstellen und beim Mischen, aber nicht wahrnehmungsgleichmäßig. RGB sagt dir nicht, ob zwei Farben gleich hell aussehen.

HSL ist der Anfänger-Liebling: Farbton, Sättigung, Helligkeit (Hue, Saturation, Lightness). Praktisch im Farbwähler, aber die L-Komponente entspricht nicht der wahrgenommenen Helligkeit. Ein HSL-Gelb mit L = 50 % sieht deutlich heller aus als ein HSL-Rot mit L = 50 %.

OKLCH ist heute eine zeitgemäße Wahl für Web-Design: Helligkeit, Farbsättigung, Farbton (Lightness, Croma, Hue), alle wahrnehmungsgleichmäßig. Der Wert L = 60 % bedeutet "mittlere wahrgenommene Helligkeit", egal welcher Farbton. Viele neuere Design-Systeme und CSS-Workflows mit gleichmäßigen Helligkeitsstufen (für Tonwerte oder dunkle Modi) setzen auf OKLCH.

LAB ist der ältere wahrnehmungsgleichmäßige Raum, in Print- und Druckvorstufen-Workflows seit Jahrzehnten Standard. ΔE-Berechnungen für Pantone-Matching laufen über LAB. OKLCH ist die mathematisch verfeinerte Nachfolge - näher an der menschlichen Wahrnehmung.

Display-P3 ist Apples Wide-Gamut-Standard, etwa 25 % größerer Farbumfang als sRGB in der 2D-Chromatizität (rund 50 % nach Gamut-Volumen laut CSS Color 4). Vor allem rote und grüne Sättigungen jenseits sRGB. Sichtbar nur auf P3-Hardware (Retina-Macs, OLED-iPhones, manche Android-Flaggschiffe). Auf einem älteren LCD wird P3 nach sRGB umgerechnet oder abgeschnitten.

Helligkeitsskala in OKLCH

Das Herzstück des Konverters. Sobald du eine Farbe eingibst, erscheint darunter ein durchgehender OKLCH-Helligkeitsverlauf von L = 0 bis 100 %. Farbton und Sättigung bleiben dabei konstant. Die Skala wird von links (dunkel) nach rechts (hell) gleichmäßig heller - das ist die wahrnehmungsgleichmäßige Eigenschaft von OKLCH. Tippe oder ziehe entlang der Skala, um die Helligkeit deiner Farbe zu setzen; die Markierungen liegen bei 0, 25, 50, 75 und 100 %.

Wenn du dasselbe gedanklich in HSL durchspielst, fällt der Unterschied auf: eine HSL-Helligkeitsreihe sieht für Gelb anders aus als für Blau. Dieser Konverter zeigt die Skala bewusst nur in OKLCH - aber genau dieser Effekt erklärt, warum ein selbst gestaffeltes HSL-Design oft "ungleichmäßig" wirkt.

Anwendung in Design-Systemen: definiere deine Tonwerte als OKLCH mit festen L-Stufen (z. B. 95 / 80 / 60 / 40 / 20 %) und variiere nur Farbton und Sättigung. Du bekommst eine Palette, die in jedem Farbton dieselbe wahrgenommene Helligkeitsabstufung hat. HSL kann das nicht.

Live-WCAG-Kontrast

Wenn du eine Farbe als Vordergrund wählst und Weiß / Schwarz / eine eigene Farbe als Hintergrund, erscheint das WCAG-2.1-Kontrastverhältnis live darunter. Es ist eine Zahl von 1 (kein Kontrast) bis 21 (maximaler Kontrast, Schwarz auf Weiß).

Vier Erfüllt/Nicht-erfüllt-Hinweise decken beide Stufen × beide Textgrößen ab. Dazu ein Beispielfeld mit der tatsächlichen Vordergrund/Hintergrund-Darstellung, damit du nicht nur die Zahl, sondern auch das Aussehen siehst. Wichtig: die Anzeige prüft nur den Vordergrund/Hintergrund-Kontrast - sie weiß nichts über deine Schriftgröße. Wenn du kleinen Text auf einer Markenfarbe einsetzt, brauchst du AA Normal.

Gamut-Hinweise

Jede Farbraum-Karte trägt eine kleine Kennzeichnung:

• sRGB: Die Farbe ist im klassischen Web-Farbumfang darstellbar. Funktioniert überall.
• Display-P3: Die Farbe geht über sRGB hinaus, bleibt aber in Display-P3 - sichtbar auf moderner Apple-Hardware und vielen OLED-Displays.
• außerhalb: Die Farbe ist weder in sRGB noch in P3 ohne Verlust darstellbar. Typisch für Lab-Werte am Rand des Farbraums oder stark gesättigte CIELCH-Werte. Der Browser passt den Wert dann an oder schneidet ihn ab, je nach Ausgabepfad (CSS Color 4 nennt das Gamut-Mapping).

Beim Designen: HEX-Werte sind immer in sRGB. OKLCH-Werte können in P3 oder darüber hinaus liegen, je nach Sättigung. Wenn dein oklch(60% 0.4 30) als "außerhalb" gekennzeichnet ist, weißt du: auf einem Standard-Display kommt eine andere Farbe an, als du eingegeben hast.

Paletten

Vier Modi, jeder mit deiner aktuellen Eingabe als Basis:

• Komplementär: Hue + 180°. Klassische Vordergrund/Hintergrund-Spannung.
• Triadisch: Hue + 120° + 240°. Ausgewogene 3-Farben-Komposition.
• Analog: Hue ± 30°. Sanfte Variation, Ton-in-Ton.
• Wahrnehmbar verschieden: Hue + 30° / +60° / +90° bei gleichbleibender L und C. Vier Anker, die nicht nach derselben Farbe aussehen, aber gleich hell wirken.

Alle Berechnungen laufen in OKLCH. Das heißt: die abgeleiteten Farben behalten dieselbe wahrgenommene Helligkeit wie deine Basis - solange sie in den darstellbaren sRGB-Farbraum passen. Liegt eine berechnete OKLCH-Farbe außerhalb sRGB, wird sie für die Anzeige angepasst oder abgeschnitten, und die L kann leicht abweichen. Eine HSL-Komplementär-Berechnung gibt dir auch ohne Gamut-Probleme häufig eine deutlich andere Helligkeit zurück.

Häufige Fragen

Was ist OKLCH und warum ist es besser als HSL?

OKLCH ist wahrnehmungsgleichmäßig: gleiche L-Werte wirken über alle Farbtöne gleich hell. HSL hat diese Eigenschaft nicht - HSL-Gelb bei 50 % L sieht heller aus als HSL-Rot bei 50 % L. Der Helligkeitsregler zeigt das.

Wie rechne ich HEX in OKLCH um?

HEX-Wert oben eingeben - die OKLCH-Karte zeigt den Wert sofort. Die Rechnung selbst geht über sRGB → linear → XYZ → Oklab → OKLCH und nutzt die culori-Bibliothek.

Was ist der Unterschied zwischen sRGB und Display-P3?

sRGB ist der Web-Standard (alte Monitore). Display-P3 ist Apples Wide-Gamut, etwa 25 % mehr Farbumfang in der 2D-Chromatizität (rund 50 % nach Gamut-Volumen), vor allem in Rot- und Grüntönen.

Welcher WCAG-Kontrast gilt als barrierefrei?

AA: 4,5:1 normal, 3:1 groß. AAA: 7:1 normal, 4,5:1 groß. Großtext ab 18 pt regular oder 14 pt bold.