Farblehre-Guide
Lerne Farbharmonie, Kontrast und Palettenentscheidungen für UI-Design.
Was diese Seite abdeckt
Diese Seite erklärt den Ablauf und verlinkt direkt auf den passenden Bereich des Chromoforge-Haupttools.
- Generiere Paletten aus einer Basisfarbe.
- Prüfe Kontrast vor dem Veröffentlichen von UI-Text.
- Exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.
- Läuft lokal im Browser.
Wie es funktioniert
Die Farblehre basiert auf wissenschaftlichen und wahrnehmungsbasierten Prinzipien, die erklären, warum manche Farbkombinationen harmonisch wirken und andere nicht. Sie zu verstehen ermöglicht bewusste statt intuitiver Entscheidungen.
Die grundlegenden Konzepte für UI-Design:
- Farbton (Hue): Die reine Farbe, ausgedrückt in Grad auf dem Farbrad (0 = Rot, 120 = Grün, 240 = Blau). Es ist der "Name" der Farbe.
- Sättigung (Saturation): Die Intensität oder Lebhaftigkeit der Farbe, von 0% (Grau) bis 100% (reine Farbe). Hohe Sättigung zieht Aufmerksamkeit auf sich; niedrige verschmilzt mit dem Hintergrund.
- Helligkeit (Lightness): Die Helligkeit der Farbe, von 0% (Schwarz) bis 100% (Weiß). Bestimmt die Lesbarkeit von Text darüber.
- Luminanzkontrast: Der wahrgenommene Helligkeitsunterschied zwischen zwei Farben. Das misst WCAG und bestimmt die Textlesbarkeit.
- Farbtemperatur: Wärme Farben (Rot, Orange, Gelb) evozieren Energie und Nahe; kühle (Blau, Grün, Violett) Vertrauen und Distanz.
Im HSL-Farbraum definieren sich Farbharmonien durch feste Winkel zwischen Farbtönen: Komplementär (180°), Analog (±30°), Triadisch (120°/240°).
Farblehre im UI-Design anwenden
Farblehre ist nicht akademisch: Sie leitet konkrete Entscheidungen in jedem Projekt:
- Primärfarbe wählen: Blau steht für Vertrauen (Finanzen, Tech), Grün für Gesundheit und Nachhaltigkeit, Orange für Energie und Zugänglichkeit. Der Farbton sollte zu den Markenwerten passen.
- Palette begrenzen: Die Regel "60-30-10" — 60% dominierende Farbe (Hintergründe), 30% sekundär (Elemente), 10% Akzent (CTA) — erzeugt ausgeglichene Interfaces.
- Visuelle Hierarchie steuern: Erhöhe Sättigung und Kontrast wichtiger Elemente; reduziere sie für sekundäre Elemente.
- Konsistenter Dark Mode: Im Dark Mode nicht einfach Farben umkehren. Reduziere die Sättigung lebhafter Farben (sie wirken auf dunklem Hintergrund aggressiv) und erhöhe die Helligkeit der Oberflächen-Hintergründe progressiv.
FAQ — Farblehre
Muss ich HSL oder oklch für modernes Web-Design lernen?
HSL ist intuitiver für den Einstieg, da seine Werte direkt dem Farbrad entsprechen. Oklch ist überlegen für Interpolationen und Verläufe (keine grauen Bänder, linear wahrgenommene Übergänge) und ist das native Format von Tailwind 4. Meistere HSL für Entwurfe und adoptiere oklch für den Export in modernes CSS.
Wie viele Farben sollte eine ideale UI-Palette enthalten?
Eine gut strukturierte Palette umfasst: 1 Primärfarbe + ihre Nuancen (Skala 50-950), 1 Neutralfarbe (Grau) + ihre Nuancen, 1-2 semantische Farben (Erfolg Grün, Fehler Rot, Warnung Orange, Info Blau) und optional 1 Akzentfarbe für CTAs. Also 4-5 Familien, aber potenziell 40-60 Tokens insgesamt.
Wie verhindert man, dass das Interface mit Komplementärfarben "vibriert"?
Reine Komplementärpaare (Rot/Grün, Blau/Orange) bei hoher Sättigung erzeugen einen unangenehmen Vibrationseffekt. Die Lösung: Entsättige eine der beiden Farben, verwende eine als Dominante und die andere sparsam als Akzent, oder fugs einen Neutralton zwischen sie ein. Designer nennen dies "Split-Komplementär", um die Spannung abzumildern.
Gibt es Regeln für Farben in der Typografie?
Im UI-Design sollte der Haupttext ein Kontrastverhältnis von mindestens 7:1 (AAA) für optimalen Lesekomfort bei langen Texten haben. Für Hilfstexte und Labels ist 4.5:1 (AA) das Minimum. Vermeide reines Schwarz (#000) auf reinem Weiß (#FFF) für langere Texte: Ein sehr dunkles Grau wie #1a1a1a reduziert die Augenermüdung.