Was dieses Tool macht
Füge eine beliebige CSS-Farbe ein oder wähle sie aus, und sie wird als HEX, RGB, HSL, HWB, LAB, LCH und OKLCH angezeigt — jede mit eigener Kopieren-Schaltfläche. Ein Farbmuster und ein Alpha-Regler zeigen, wie die Farbe mit Transparenz aussieht. Darunter vergleicht eine Kontrastprüfung zwei Farben mit den WCAG-2-Schwellenwerten und zeigt eine Textvorschau.
Farbmodelle kurz erklärt
- HEX und RGB beschreiben eine Farbe als Anteile von Rot, Grün und Blau (0–255 oder 0–100 %).
- HSL ergänzt Farbton (Hue), Sättigung und Helligkeit, was oft leichter nachzuvollziehen ist als reine RGB-Werte.
- HWB (Hue, Weißanteil, Schwarzanteil) mischt Weiß und Schwarz in einen Farbton — praktisch für Auf- und Abtönungen.
- LAB und LCH beschreiben Farbe so, wie das menschliche Auge Helligkeit (L) zusammen mit den Achsen Grün–Rot/Blau–Gelb (LAB) oder mit Chroma und Farbton (LCH) wahrnimmt.
- OKLCH ist eine neuere, wahrnehmungsgleichmäßige Version von LCH für das moderne Web.
Warum OKLCH nützlich ist
Bei HSL kann derselbe „Lightness“-Wert bei unterschiedlichen Farbtönen trotzdem viel heller oder dunkler wirken — reines Gelb bei L = 50 % sieht deutlich heller aus als Blau bei demselben L. Der Helligkeitskanal von OKLCH folgt dagegen der tatsächlich wahrgenommenen Helligkeit. Paletten, die nur über den Helligkeitswert erstellt werden, wirken deshalb über verschiedene Farbtöne hinweg visuell einheitlich, und die Sättigung lässt sich ändern, ohne dass sich die wahrgenommene Helligkeit ungewollt mitverändert.
Wie der WCAG-Kontrast berechnet wird
Die Kontrastprüfung folgt der WCAG-2-Formel: Zuerst wird die relative Leuchtdichte jeder Farbe berechnet (eine gewichtete Mischung ihrer linearen Rot-, Grün- und Blaukanäle), dann wird (L1 + 0,05) durch (L2 + 0,05) geteilt, wobei die hellere Farbe L1 ist. Das Ergebnis ist ein Verhältnis wie 4,5:1.
- AA, normaler Text: 4,5:1
- AA, großer Text: 3:1
- AAA, normaler Text: 7:1
- AAA, großer Text: 4,5:1
„Großer Text“ bedeutet mindestens 18 pt (etwa 24 px) in normaler Stärke oder 14 pt fett (etwa 19 px).
Farben außerhalb des Farbraums
LAB, LCH und OKLCH können Farben beschreiben, die kein gewöhnlicher Bildschirm darstellen kann, weil sie einen größeren Bereich als sRGB abdecken. In diesem Fall weist dieses Tool darauf hin und zeigt bei HEX und RGB die nächstliegende Farbe, die dein sRGB-Bildschirm tatsächlich wiedergeben kann.