In CSS lässt sich dieselbe Farbe auf mindestens drei verschiedene Arten schreiben, und jede davon ist für eine andere Aufgabe praktisch — vom Design bis zur Animation von Transparenz.
HEX: eine kompakte Schreibweise zum Kopieren
Die Hex-Schreibweise wie #FF5733 kodiert die drei Kanäle — Rot, Grün, Blau — mit je zwei Zeichen. Das ist das kompakteste Format, praktisch zum Kopieren aus Design-Mockups, aber für Menschen kaum lesbar: Es ist schwer, auf einen Blick zu erkennen, welcher Farbton sich hinter einer Zeichenfolge verbirgt.
RGB: direkter Zugriff auf jeden Kanal
rgb(255, 87, 51) schreibt dieselben drei Kanäle als Dezimalzahlen von 0 bis 255. Das ist praktisch, wenn man einen einzelnen Kanal programmatisch ändern muss, etwa Rot in einer JavaScript-Animation stufenweise zu erhöhen.
HSL: intuitive Auswahl eines Farbtons
HSL beschreibt eine Farbe über den Farbton (Hue, 0–360°), die Sättigung und die Helligkeit. Das ist das praktischste Format, um eine Farbe von Hand auszuwählen: Um eine dunklere Variante desselben Farbtons zu erhalten, muss man nur die Helligkeit verringern, ohne alle drei RGB-Kanäle neu zu berechnen.
Der Alphakanal für Transparenz
Die Formate rgba() und hsla() fügen einen vierten Parameter hinzu — die Deckkraft von 0 bis 1. Modernes CSS erlaubt es auch, Transparenz in HEX über zwei zusätzliche Zeichen am Ende festzulegen, etwa #FF573380.
Wofür das gebraucht wird
- Schnell eine Farbe aus einem Design-Mockup in das benötigte CSS-Format umwandeln.
- Eine dunklere oder hellere Variante derselben Farbe über HSL auswählen.
- Einer Farbe Transparenz hinzufügen, ohne ihren Grundfarbton zu ändern.
RAL: der deutsche Farbstandard, der HEX-Codes vorausging
Lange bevor es HEX oder RGB gab, entstand 1927 in Deutschland das RAL-Farbsystem — benannt nach dem Reichsausschuss für Lieferbedingungen — um Lackfarben in Industrie und Bauwesen eindeutig und verbindlich zu benennen, etwa RAL 3020 für Verkehrsrot oder RAL 5010 für Enzianblau. Anders als HEX definiert RAL keine Bildschirmfarbe, sondern ein physisches Farbmuster auf Papier oder Lack, das Hersteller weltweit exakt reproduzieren müssen — deshalb wird RAL bis heute für Fassaden, Fahrzeuge und Beschilderung verwendet, wo eine Bildschirmdarstellung allein nicht reicht. Wer eine RAL-Farbe für das Web braucht, muss sie über eine Umrechnungstabelle in einen Näherungswert in RGB oder HEX übersetzen, da beide Systeme auf völlig unterschiedlichen Prinzipien beruhen: additives Licht auf dem Bildschirm gegenüber physischer Pigmentmischung auf einer Oberfläche.