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 Chromaforge-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 erklaren, warum manche Farbkombinationen harmonisch wirken und andere nicht. Sie zu verstehen ermoglicht bewusste statt intuitiver Entscheidungen.
Die grundlegenden Konzepte für UI-Design:
- Farbton (Hue): Die reine Farbe, ausgedruckt in Grad auf dem Farbrad (0 = Rot, 120 = Grun, 240 = Blau). Es ist der "Name" der Farbe.
- Sattigung (Saturation): Die Intensitat oder Lebhaftigkeit der Farbe, von 0% (Grau) bis 100% (reine Farbe). Hohe Sattigung 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 daruber.
- Luminanzkontrast: Der wahrgenommene Helligkeitsunterschied zwischen zwei Farben. Das misst WCAG und bestimmt die Textlesbarkeit.
- Farbtemperatur: Warme Farben (Rot, Orange, Gelb) evozieren Energie und Nahe; kuhle (Blau, Grun, Violett) Vertrauen und Distanz.
Im HSL-Farbraum definieren sich Farbharmonien durch feste Winkel zwischen Farbtonen: Komplementar (180°), Analog (±30°), Triadisch (120°/240°).
Farblehre im UI-Design anwenden
Farblehre ist nicht akademisch: Sie leitet konkrete Entscheidungen in jedem Projekt:
- Primarfarbe wählen: Blau steht für Vertrauen (Finanzen, Tech), Grun für Gesundheit und Nachhaltigkeit, Orange für Energie und Zuganglichkeit. Der Farbton sollte zu den Markenwerten passen.
- Palette begrenzen: Die Regel "60-30-10" — 60% dominierende Farbe (Hintergrunde), 30% sekundar (Elemente), 10% Akzent (CTA) — erzeugt ausgeglichene Interfaces.
- Visuelle Hierarchie steuern: Erhohe Sattigung und Kontrast wichtiger Elemente; reduziere sie für sekundare Elemente.
- Konsistenter Dark Mode: Im Dark Mode nicht einfach Farben umkehren. Reduziere die Sattigung lebhafter Farben (sie wirken auf dunklem Hintergrund aggressiv) und erhohe die Helligkeit der Oberflachen-Hintergrunde 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 uberlegen für Interpolationen und Verläufe (keine grauen Bander, linear wahrgenommene Ubergange) 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 Primarfarbe + ihre Nuancen (Skala 50-950), 1 Neutralfarbe (Grau) + ihre Nuancen, 1-2 semantische Farben (Erfolg Grun, 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 Komplementarfarben "vibriert"?
Reine Komplementarpaare (Rot/Grun, Blau/Orange) bei hoher Sattigung erzeugen einen unangenehmen Vibrationseffekt. Die Losung: Entsattige 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-Komplementar", um die Spannung abzumildern.
Gibt es Regeln für Farben in der Typografie?
Im UI-Design sollte der Haupttext ein Kontrastverhaeltnis 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 Augenermudung.
Ist die Bedeutung von Farben universell?
Nein. Rot bedeutet Gefahr im Westen, aber Gluck in China. Weiß ist in Europa mit Reinheit und in mehreren asiatischen Kulturen mit Trauer assoziiert. Grun kann Erlaubnis, Natur oder Eifersucht bedeuten, je nach Kontext. Für internationale Produkte halte an universellen UI-Konventionen fest (Rot für Fehler, Grun für Erfolg) und teste bei deiner Zielgruppe.