Farbe I: Farbsysteme aufbauen
Warum fünf „perfekte" Farben nicht reichen — und wie du ein systematisches, praxistaugliches Farbsystem für deine Projekte erstellst.
- Farbformate verstehen: HEX, RGB, HSL, HSB — wann nutzt du welches?
- HSL als bevorzugtes Format für systematische Farbarbeit einsetzen
- Eine vollständige Farbpalette mit Grautönen, Primärfarbe und Akzentfarben aufbauen
- Abstufungen (Shades) für jede Farbe definieren — von 100 bis 900
- Die Rolle von Sättigung und Helligkeit beim Erstellen konsistenter Farbskalen verstehen
Fünf Hex-Codes reichen nicht. Ein echtes Farbsystem besteht aus 8–10 Abstufungen pro Farbgruppe — Grautöne, Primärfarbe und mehrere Akzentfarben.
Farbformate im Überblick
Als Entwickler begegnest du Farben in verschiedenen Formaten. Jedes hat seinen Zweck — aber nicht jedes ist gleich gut geeignet, wenn du systematisch mit Farbe arbeiten willst. Hier ein kurzer Überblick über die wichtigsten Formate.
HEX (#0ea5a0)
6 Hexadezimalstellen für Rot, Grün, Blau. Am häufigsten in CSS, aber schwer zu lesen — du siehst den Werten nicht an, ob die Farbe hell oder dunkel ist.
RGB / RGBA (14, 165, 160)
Rot, Grün, Blau als 0–255. RGBA ergänzt einen Alpha-Kanal (Transparenz). Etwas lesbarer als HEX, aber Farbtöne bleiben schwer abschätzbar.
HSL (178, 84%, 35%)
Hue (Farbton), Saturation (Sättigung), Lightness (Helligkeit). Du siehst sofort: Welche Farbe? Wie kräftig? Wie hell? Ideal für Farbsysteme.
HSB / HSV (178, 92%, 65%)
Hue, Saturation, Brightness. Gängig in Design-Tools (Figma, Photoshop). Achtung: Brightness ≠ Lightness! Browser verstehen nur HSL, nicht HSB.
OKLCH / LCH (modern)
Perceptuell gleichmäßige Standards für barrierefreie Farbarbeit. Neuer, aber noch nicht überall unterstützt.
Warum HSL das bessere Format ist
HEX und RGB beschreiben Farben aus der Perspektive eines Bildschirms — wie viel Rot, Grün und Blau leuchtet. HSL beschreibt Farben so, wie Menschen sie wahrnehmen: Welcher Farbton? Wie satt? Wie hell? Dadurch erkennst du Verwandtschaften auf einen Blick.
Praxis-Empfehlung: Verwende HSL als Arbeitsformat. Du kannst damit Abstufungen intuitiv erstellen — einfach Lightness anpassen, fertig. HEX bleibt dein Export-Format für Code.
HSL Color Lab — Farben live erkunden
Bewege die Regler und beobachte, wie sich Hue, Saturation und Lightness auf die Farbe auswirken. Achte besonders darauf, was passiert, wenn du nur die Lightness änderst — genau so baust du später Abstufungen.
Du brauchst mehr Farben als du denkst
Farbpaletten-Generatoren geben dir fünf Farben — das reicht vielleicht für ein Logo, aber nicht für eine echte UI. In der Praxis brauchst du drei Farbgruppen, jede mit mehreren Abstufungen.
Farbsystem verbessern
Die folgende Dashboard-Karte verwendet unsystematische Farben — reine HEX-Werte ohne Abstufungs-Logik. Deine Aufgabe: Baue ein HSL-basiertes Farbsystem und wende es auf die Karte an.
Aufgabenstellung
- Definiere CSS Custom Properties mit HSL-Werten für mindestens eine Farbfamilie (z.B.
--blue-100bis--blue-900) - Ersetze die festen HEX-Farbwerte durch deine Custom Properties
- Verwende verschiedene Abstufungen für Background, Border und Text der Alerts
- Gib den Grautönen einen leichten Farbstich (kühl oder warm — deine Wahl)
- Bonus: Passe die Sättigung an — hellere und dunklere Töne etwas stärker sättigen