Farbwerte in CSS lassen sich als Hex, RGB, HSL und in den neueren Räumen schreiben. Welche Schreibweise wofür taugt, hängt vom Zweck ab.
- Farbwerte in CSS (Hex, RGB, HSL)
Die Schreibweisen, mit denen sich Farben in CSS angeben lassen.
Beispiel: „Jeder Farbwert lässt sich in jede andere Schreibweise übersetzen.“
Die Schreibweisen
color: #0078ff;
color: rgb(0 120 255);
color: rgb(0 120 255 / 0.5);
color: hsl(212 100% 50%);Hex ist die kürzeste und in Designwerkzeugen übliche. RGB und HSL nehmen einen Alphawert nach dem Schrägstrich. HSL beschreibt Farbton, Sättigung und Helligkeit und ist dadurch lesbar: Eine dunklere Variante derselben Farbe entsteht, indem man die letzte Zahl senkt.
Die neueren Räume
oklch() beschreibt Farben so, wie das Auge sie wahrnimmt. Gleiche Helligkeitswerte wirken dort tatsächlich gleich hell, was beim Erzeugen von Farbpaletten und beim Prüfen von Kontrasten hilft. Alle großen Browser unterstützen es.