# Farben-Konverter

URL: https://www.toolflux.app/farben-konverter/
Stand: 2026-05-05

Farben-Konverter für 6 Räume gleichzeitig: HEX, RGB, HSL, OKLCH, LAB, Display-P3. Mit OKLCH-Helligkeitsregler und Live-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 (**H**ue, **S**aturation, **L**ightness). 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 (**L**ightness, **C**roma, **H**ue), 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ß).

| Stufe | Normaler Text | Großtext (≥ 18 pt regular oder 14 pt bold) |
|---|---|---|
| AA | ≥ 4,5 : 1 | ≥ 3 : 1 |
| AAA | ≥ 7 : 1 | ≥ 4,5 : 1 |

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.

### FAQ

**Was ist OKLCH und warum ist es besser als HSL?**

OKLCH steht für Oklab Lightness Chroma Hue. Der Farbraum ist wahrnehmungsgleichmäßig (engl. perceptually uniform) aufgebaut - das heißt: gleiche L-Werte wirken über alle Farbtöne hinweg gleich hell. HSL hat diese Eigenschaft nicht - ein HSL-Gelb mit 50 % Helligkeit sieht heller aus als ein HSL-Rot mit 50 %. Die Helligkeitsskala im Konverter zeigt das live: ein durchgehender OKLCH-Verlauf von L = 0 bis 100 % bei gleichem Farbton und gleicher Sättigung - links dunkel, rechts hell. Tippe oder ziehe entlang der Skala, um die Helligkeit zu setzen.

**Wie rechne ich HEX in OKLCH um?**

Im Konverter oben einfach den HEX-Wert eingeben - die OKLCH-Karte rendert den umgerechneten Wert sofort. Die Rechnung selbst läuft in mehreren Schritten: HEX → sRGB (8-Bit) → linear sRGB → CIE XYZ → Oklab → OKLCH. Der Konverter nutzt culori, eine etablierte Bibliothek; eigene Implementierungen scheitern oft an der sRGB-zu-linear-Transformation.

**Was ist der Unterschied zwischen sRGB und Display-P3?**

sRGB ist seit den 1990ern der Web-Standard - der Farbumfang, den fast alle alten Monitore darstellen. Display-P3 ist Apples 2015 eingeführter Wide-Gamut-Standard, etwa 25 % mehr Farbumfang in der 2D-Chromatizität (rund 50 % nach Gamut-Volumen laut CSS Color 4), vor allem in gesättigten Rottönen und Grüntönen. Viele neuere Apple-Displays, OLED-iPhones und einige Android-Flaggschiffe unterstützen P3; ältere Standard-Gamut-Displays in der Regel nicht. Im Konverter zeigen die Karten ein Badge: sRGB (überall), Display-P3 (nur auf P3-Hardware) oder 'außerhalb' (kein gängiger Display).

**Welcher WCAG-Kontrast gilt als barrierefrei?**

WCAG 2.1 verlangt: AA Normal mindestens 4,5:1, AA Großtext mindestens 3:1. Großtext ist 18 pt regular oder 14 pt bold. AAA verlangt 7:1 für normalen Text und 4,5:1 für Großtext. Schwarz auf Weiß erreicht 21:1 (das maximal mögliche), 50%-Grau auf Weiß nur etwa 3,9:1 - also AA-Großtext ja, AA-Normal nein. Der Live-WCAG-Meter im Konverter zeigt alle vier Pass/Fail-Indikatoren.

**Wann sollte ich LAB statt OKLCH verwenden?**

LAB wenn du in einem klassischen Print-Workflow arbeitest oder ΔE-Werte gegen einen festen Referenzraum brauchst (z. B. Pantone-Matching). Für moderne Web- und App-Designs ist OKLCH die bessere Wahl: gleich wahrnehmungsgleichmäßig wie LAB, aber mit klar definierter L-Achse von 0 bis 100 % und einem Hue-Wert in Grad statt zwei Achsen-Werten. CSS Color Level 4 spezifiziert alle vier (Lab, LCH, Oklab, OKLCH) und gibt Anwendungsempfehlungen, ohne einen einzelnen Raum zu bevorzugen; Browser unterstützen alle vier.

**Was bedeutet 'außerhalb des Farbraums'?**

Wenn die Werte einer LAB- oder P3-Farbe nicht in sRGB darstellbar sind, kann ein Standard-Browser auf einem Standard-Display sie nicht originalgetreu zeigen - er muss clippen oder skalieren. Der Konverter zeigt ein Badge an der Karte: 'außerhalb' bedeutet, dass die Farbe weder in sRGB noch in Display-P3 ohne Clipping darstellbar ist - typisch für stark gesättigte Lab-Werte am Rand des XYZ-Würfels.

**Wie erstelle ich eine komplementäre Farbpalette?**

Im Konverter unten den Palette-Modus auf 'Komplementär' stellen. Die Funktion dreht den OKLCH-Hue-Wert um 180° - das ist die saubere Definition einer Komplementärfarbe in einem wahrnehmungsgleichmäßigen Raum. Triadisch dreht um 120°, analog um ±30°, 'wahrnehmbar verschieden' nutzt 30/60/90°-Schritte beim Hue für Anker mit ähnlicher Helligkeit aber unterschiedlichen Tönen.