Farbsysteme im Überblick
In Webdesign und Entwicklung werden verschiedene Farbsystemeverwendet. Jedes hat Vor- und Nachteile für unterschiedliche Anwendungsfälle. Alle beschreiben dieselben Farben – nur in unterschiedlicher Notation.
HEX (Hexadezimal)
HEX-Farbcodes sind das gebräuchlichste Format im Webdesign. Sie bestehen aus einem # gefolgt von 6 hexadezimalen Zeichen. Beispiel: #3b82f6 für ein kräftiges Blau.
Die sechs Zeichen teilen sich in drei Paare: RR (Rotanteil 00-FF),GG (Grünanteil 00-FF), BB (Blauanteil 00-FF). #000000 ist Schwarz, #FFFFFF ist Weiß, #FF0000 ist reines Rot.
RGB (Rot, Grün, Blau)
RGB basiert auf dem additiven Farbmodell – wie bei Bildschirmen, wo Licht gemischt wird. Jede Farbe wird durch Werte von 0-255 für die drei Grundfarben definiert: rgb(59, 130, 246).
RGB ist besonders nützlich für JavaScript-Berechnungen und Transparenz (RGBA mit Alpha-Kanal): rgba(59, 130, 246, 0.5) für 50% Transparenz.
HSL (Farbton, Sättigung, Helligkeit)
HSL ist intuitiver als RGB, weil es der menschlichen Farbwahrnehmung entspricht. H (Hue) ist der Farbton als Winkel (0-360°): 0°=Rot, 120°=Grün, 240°=Blau.
S (Saturation) ist die Sättigung (0-100%), L (Lightness) die Helligkeit (0-100%). Mit HSL erstellst du leicht Farbvariationen: Gleicher H-Wert, aber unterschiedliche L-Werte für Hell-/Dunkel-Abstufungen.
Wann welches Format?
HEX: Standard für CSS, kompakt, weit verbreitet. Ideal für statische Farben. RGB: Gut für Transparenz (RGBA), JavaScript-Berechnungen, Animationen. HSL: Perfekt für Farbpaletten, Themes und Hover-Effekte (einfach Helligkeit ändern).
Tipps für Webdesign
Farbkontrast: Achte auf ausreichend Kontrast zwischen Text und Hintergrund (WCAG empfiehlt mindestens 4,5:1).Farbpaletten: Nutze HSL um zusammengehörige Farben zu erstellen – variiere S und L bei gleichem H.