Farbtheorie für UI-Designer: Paletten, Kontrast und Emotionen

Farbe ist das unmittelbarste visuelle Signal in jedem Design. Noch bevor ein Nutzer ein einziges Wort liest, hat Farbe bereits Stimmung, Hierarchie und Markenidentität kommuniziert. Dennoch wählen viele Entwickler und Designer Farben aus dem Bauchgefühl heraus – und landen bei Paletten, die sich falsch anfühlen, Barrierefreiheitsprüfungen nicht bestehen oder im Hell-/Dunkel-Modus kollidieren. Das Verständnis von Farbtheorie gibt dir ein fundiertes Grundgerüst für jede Farbentscheidung.

Die Grundlagen des Farbmodells

Farbton, Sättigung und Helligkeit (HSL)

HSL ist das intuitivste Farbmodell für Designarbeiten:

• Farbton — Die Farbe selbst: 0° = Rot, 60° = Gelb, 120° = Grün, 180° = Cyan, 240° = Blau, 300° = Magenta
• Sättigung — Wie lebendig oder grau: 0% = Grau, 100% = vollständig gesättigt
• Helligkeit — Wie hell oder dunkel: 0% = Schwarz, 50% = reine Farbe, 100% = Weiß

/* Derselbe Farbton bei verschiedenen Sättigungen und Helligkeiten */
hsl(220, 90%, 50%)   /* Kräftiges Blau */
hsl(220, 30%, 50%)   /* Gedämpftes Stahlblau */
hsl(220, 90%, 90%)   /* Sehr heller Blauton */
hsl(220, 90%, 20%)   /* Sehr dunkler Blauton */

HSL ist leistungsstark, weil du jeweils eine Dimension einzeln anpassen kannst. Um eine Farbe heller zu machen, erhöhe L. Um sie weniger lebendig zu machen, verringere S.

RGB und HEX

RGB definiert Farben durch Rot-, Grün- und Blauwerte (0–255). HEX ist dasselbe in hexadezimaler Schreibweise:

rgb(59, 130, 246)  ≡  #3B82F6

HEX ist der Standard für CSS und Design-Tools. Konvertiere zwischen Formaten mit unserem Color Converter.

Farbharmonien

Farbharmonien sind Kombinationen, die aufgrund ihrer geometrischen Beziehungen auf dem Farbkreis optisch ansprechend wirken.

Monochrom

Ein Farbton, variierte Sättigung und Helligkeit. Klar, kohärent, anspruchsvoll.

Basis:      hsl(220, 80%, 50%)
Hell:       hsl(220, 70%, 85%)
Dunkel:     hsl(220, 60%, 25%)
Gedämpft:   hsl(220, 20%, 60%)

Ideal für minimalistische Produkte, dunkle Themes und markenbetonte Oberflächen.

Komplementär

Zwei Farbtöne, die sich auf dem Farbkreis direkt gegenüberliegen (180° auseinander). Hoher Kontrast und lebendig – verwende die zweite Farbe sparsam als Akzent.

Primär:   hsl(220, 80%, 50%)   /* Blau */
Akzent:   hsl(40,  90%, 55%)   /* Orange/Bernstein */

Beide Farben gleichermaßen zu verwenden erzeugt visuelle Spannung. Lass eine dominieren.

Analog

Drei oder mehr benachbarte Farbtöne (30–60° auseinander). Wirkt natürlich und harmonisch, wie Farbverläufe bei Sonnenuntergängen.

hsl(200, 70%, 50%)   /* Cyan-Blau */
hsl(220, 80%, 50%)   /* Blau */
hsl(250, 70%, 55%)   /* Blau-Lila */

Gut für Hintergründe und subtile Schichtung.

Triadisch

Drei gleichmäßig verteilte Farbtöne (120° auseinander). Lebendig und ausgewogen – erfordert sorgfältige Handhabung, um Chaos zu vermeiden.

hsl(0,   80%, 55%)   /* Rot */
hsl(120, 70%, 45%)   /* Grün */
hsl(240, 75%, 55%)   /* Blau */

Funktioniert gut für Infografiken, Diagramme und Datenvisualisierungen.

Eine Farbpalette für ein Design-System aufbauen

Ein robustes Farbsystem besteht aus mehreren Ebenen:

1. Markenfarben (primär + sekundär)

Die Farben, die die Identität deines Produkts repräsentieren. Meist 1–2 Farbtöne.

2. Semantische Farben

Farben mit spezifischer Bedeutung in deiner UI:

Token	Zweck
success	Grün – positive Zustände, Bestätigungen
warning	Gelb/Bernstein – Vorsicht, eingeschränkte Zustände
error	Rot – Fehler, destruktive Aktionen
info	Blau – neutrale Informationen, Hinweise

3. Neutrale Skala

Grautöne für Text, Hintergründe, Rahmen und Trennlinien. Eine vollständige Skala reicht typischerweise von 50 (nahezu weiß) bis 950 (nahezu schwarz):

--gray-50:  #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;

4. Vollständige Farbskalen

Erstelle für jede Markenfarbe eine 10-stufige Skala, die dem Muster der neutralen Skala entspricht. Tools wie Radix Colors und Tailwinds Farbpalette sind gut kalibrierte Referenzen.

Farbkontrast und Barrierefreiheit

WCAG 2.2 schreibt folgende Mindest-Kontrastverhältnisse vor (Text vs. Hintergrund):

Texttyp	Minimum (AA)	Erhöht (AAA)
Normaler Text (< 18pt)	4,5:1	7:1
Großer Text (≥ 18pt oder 14pt fett)	3:1	4,5:1
UI-Komponenten, Icons	3:1	—

Formel für das Kontrastverhältnis:

ratio = (L1 + 0.05) / (L2 + 0.05)

Dabei ist L1 die relative Leuchtdichte der helleren Farbe und L2 die der dunkleren.

Praktische Regeln:

• Weißer Text funktioniert auf Farben mit einer Helligkeit unter ~45–50% (abhängig von der Sättigung)
• Dunkler Text funktioniert auf Farben mit einer Helligkeit über ~50–55%
• Dieselbe Farbe kann beim Kontrast auf Weiß scheitern, auf einem hellgrauen Hintergrund aber bestehen

Verlasse dich niemals allein auf Farbe – jede 12. Person hat eine Form von Farbsehschwäche. Kombiniere Farbe immer mit Form, Icon oder Text.

Farbe im Dunkelmodus

Dunkelmodus bedeutet nicht einfach, deine helle Palette zu invertieren. Wichtige Grundsätze:

Vermeide rein schwarze Hintergründe

#000000 erzeugt einen harten Kontrast mit Text und wirkt schwer. Verwende stattdessen dunkle Grautöne:

/* Hellmodus-Hintergrund */
background: #ffffff;

/* Dunkelmodus-Hintergrund */
background: #0f172a;  /* Oder #111827, #1a1a2e */

Sättigung für dunkle Oberflächen reduzieren

Stark gesättigte Farben auf dunklen Hintergründen können grell wirken und die Augen ermüden. Reduziere im Dunkelmodus die Sättigung der Markenfarben leicht:

/* Hellmodus-Primärfarbe */
--primary: hsl(220, 90%, 50%);

/* Dunkelmodus-Primärfarbe – gleicher Farbton, weniger Sättigung, mehr Helligkeit */
--primary: hsl(220, 70%, 65%);

Tiefe durch Helligkeit

Im Dunkelmodus erscheinen höher liegende Flächen heller (wie ein erhabenes Element, das mehr Licht einfängt):

--surface-1: #1e293b;   /* Basis */
--surface-2: #253044;   /* Karten */
--surface-3: #2d3a52;   /* Modals, Dropdowns */

Farbpsychologie nach Farbton

Farbton	Assoziationen	Typische Verwendung
Rot	Dringlichkeit, Gefahr, Leidenschaft, Energie	CTAs, Fehler, Warnungen, Verkauf
Orange	Wärme, Kreativität, Begeisterung	Hervorhebungen, Lebensmittel, Unterhaltung
Gelb	Optimismus, Vorsicht, Aufmerksamkeit	Warnungen, Hervorhebungen, Kinderprodukte
Grün	Wachstum, Erfolg, Natur, Ruhe	Erfolgszustände, Finanzen, Gesundheit
Blau	Vertrauen, Stabilität, Professionalität	Tech, Finanzen, Gesundheitswesen, Standard-Links
Lila	Luxus, Kreativität, Geheimnis	Premium-Stufen, Beauty, Spiritualität
Pink	Verspieltheit, Romantik, Fürsorge	Lifestyle, Gesundheitswesen, Beauty
Grau	Neutral, Ausgewogenheit, Raffinesse	UI-Grundstruktur, sekundärer Text

Dies sind Verallgemeinerungen – kultureller Kontext und Branchennormen spielen eine enorme Rolle. Blau wirkt im Finanzbereich „vertrauenswürdig", im Lebensmittelbereich dagegen gewöhnlich.

Farbworkflow in der Praxis

1. Beginne mit einer neutralen Skala (Graupalette)
2. Wähle eine primäre Markenfarbe mit starkem Kontrast sowohl auf weißem als auch auf dunklem Hintergrund
3. Definiere semantische Farben (Erfolg, Warnung, Fehler, Info)
4. Erstelle vollständige Skalen für jede Farbe (50–950)
5. Überprüfe den Kontrast für jede Text-/Hintergrundkombination
6. Teste in Hell- und Dunkelmodus
7. Prüfe mit Simulationstools für Farbenblindheit

Gute Farbe ist unsichtbar – Nutzer spüren sie, bevor sie sie bewusst wahrnehmen. Ein gut aufgebautes Farbsystem lässt deine UI professionell, vertrauenswürdig und barrierefrei wirken, ohne dass jemand genau sagen könnte, warum.