Die Farbsyntaxen
| Syntax | Beispiel | Hinweise |
|---|---|---|
| Hex | #1F4FE0, #1F4FE080 | Zwei Hex-Ziffern pro Kanal; 8 Ziffern fügen Alpha hinzu. #RGB ist die Kurzform von #RRGGBB. |
| rgb() | rgb(31 79 224 / 50%) | 0–255 pro Kanal. Die moderne Syntax nutzt Leerzeichen und einen Schrägstrich für Alpha; die Kommaform funktioniert weiterhin. |
| hsl() | hsl(225 76% 50%) | Farbton in Grad, Sättigung und Helligkeit in Prozent. Leicht von Hand anzupassen, aber gleiche Helligkeitswerte wirken nicht gleich hell. |
| hwb() | hwb(225 12% 12%) | Farbton, Weißanteil, Schwarzanteil: wie ein Maler mischt. |
| oklch() | oklch(0.51 0.22 266) | Wahrnehmungshelligkeit 0–1, Chroma, Farbton. Eine Änderung von L um denselben Betrag wirkt bei jedem Farbton wie dieselbe Änderung, was es zum richtigen Raum für Paletten macht. |
| oklab() | oklab(0.51 0.01 -0.22) | Die kartesische Form von OKLCH. |
| Benannt | rebeccapurple | 148 Namen aus CSS Color Level 4. |
Kontrast
WCAG 2 definiert Kontrast als (L₁ + 0,05) / (L₂ + 0,05) anhand der relativen Leuchtdichte, von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). Fließtext braucht 4,5:1 für AA und 7:1 für AAA; großer Text (18 pt oder 14 pt fett) und UI-Komponenten wie Rahmen und Icons brauchen 3:1. Der Prüfer zeigt alle vier Urteile und tauscht die beiden Farben, um zu zeigen, dass das Verhältnis symmetrisch ist.
Warum OKLCH
In HSL unterscheiden sich ein Gelb und ein Blau mit derselben „Helligkeit“ enorm darin, wie hell sie wirken, sodass in HSL gebaute Paletten ungleichmäßige Stufen haben. OKLCH wurde so entworfen, dass gleiche numerische Unterschiede gleich aussehen. Es wird von jedem aktuellen Browser unterstützt, und color-mix() sowie die relative Farbsyntax funktionieren darin. Der Konverter markiert OKLCH-Farben außerhalb des sRGB-Gamuts, da das Tool sie beschneidet.
Fragen
Wie rechne ich Hex von Hand in RGB um?
Die sechs Ziffern in Paare teilen und jedes aus Hex umrechnen: #1F4FE0 → 1F = 31, 4F = 79, E0 = 224 → rgb(31, 79, 224). Dreistelliges Hex verdoppelt jede Ziffer (#F80 = #FF8800).
Welches Kontrastverhältnis brauche ich?
4,5:1 für normalen Text und 3:1 für großen Text oder UI-Komponenten für WCAG AA; 7:1 und 4,5:1 für AAA. Platzhaltertext und deaktivierte Bedienelemente sind ausgenommen, aber trotzdem eine Prüfung wert.
Warum sieht dieselbe hsl()-Helligkeit bei verschiedenen Farbtönen anders aus?
HSL ist eine geometrische Transformation von RGB ohne Wahrnehmungsmodell; reines Gelb (hsl 60 100% 50%) ist bei gleichem L weit heller als reines Blau (hsl 240 100% 50%). Nehmen Sie OKLCH, wenn Sie visuell gleichmäßige Stufen brauchen.
Was ist der Alphakanal?
Die Deckkraft, 0 (transparent) bis 1 (deckend), in moderner Syntax nach einem Schrägstrich oder als vierter Wert in rgba() geschrieben. Der Kontrast wird hier auf der deckenden Farbe berechnet; halbtransparenter Text auf einem Hintergrund braucht das gemischte Ergebnis.