Überblick über Farbdarstellungen
Im Webdesign und in der Entwicklung gibt es verschiedene Möglichkeiten, Farben darzustellen. Die drei häufigsten sind:
- HEX (hexadezimal): z. B.
#FF5733 - RGB (Rot-Grün-Blau): z. B.
rgb(255, 87, 51) - HSL (Farbton-Sättigung-Helligkeit): z. B.
hsl(9, 100%, 60%)
Jede Darstellungsform hat ihre eigenen Anwendungsbereiche. Wenn du die Umrechnungsbeziehungen zwischen ihnen verstehst, kannst du beim Design sicherer und flexibler arbeiten.
Detaillierte Erläuterung der drei Farbmodelle
HEX (hexadezimal)
Das am weitesten verbreitete Web-Farbformat. Es beginnt mit #, gefolgt von 6 hexadezimalen Ziffern (oder 3 Ziffern in Kurzform). Jeweils zwei Ziffern repräsentieren den Wert des Rot-, Grün- und Blaukanals (00-FF).
# FF5733 → Rot=FF(255), Grün=57(87), Blau=33(51)
RGB Rot Grün Blau
Das intuitivste Farbmodell, das direkt die Werte der drei Kanäle Rot, Grün und Blau angibt (0-255). In CSS kann zusätzlich ein Alpha-Transparenzkanal hinzugefügt werden, geschrieben als rgba(255, 87, 51, 0.5).
HSL Farbton-Sättigung-Helligkeit
Das designerfreundlichste Farbmodell:
- Farbton (Hue): 0-360°, gibt die Position auf dem Farbkreis an
- Sättigung (Saturation): 0-100%, die Reinheit der Farbe
- Helligkeit (Lightness): 0-100%, der Helligkeitsgrad der Farbe
Der Vorteil von HSL liegt darin: Wenn man „denselben Farbton, aber etwas heller" möchte, muss man nur den Helligkeitswert anpassen.
Umrechnungsformeln
HEX → RGB
R = parseInt(HEX[1..2], 16)
G = parseInt(HEX[3..4], 16)
B = parseInt(HEX[5..6], 16)
RGB → HSL
R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B')
Cmin = min(R', G', B')
Δ = Cmax - Cmin
H = 60° × (Formel je nach Fall)
S = Δ / (1 - |2L - 1|)
L = (Cmax + Cmin) / 2
Praktische Anwendungsempfehlungen
- CSS-Variablen: HSL zur Definition von Theme-Farben verwenden, um durch Anpassung des Helligkeitswerts Varianten zu erzeugen
- Designsysteme: Mit HSL den Farbton einheitlich verwalten; durch Änderung des Farbtons kann global das Design gewechselt werden
- Barrierefreiheit: Über den Helligkeitswert den Kontrast zwischen Vordergrund- und Hintergrundfarbe beurteilen
- Farbverläufe: HSL ermöglicht natürlichere Verlaufsübergänge
Die Konvertierung von Farbcodes mag grundlegend erscheinen, ist aber im Entwicklungsalltag eine Fähigkeit, die nahezu täglich zum Einsatz kommt.