Farbpaletten erstellen: Regeln, Arten & viele Beispiele
Eine gute Farbpalette sorgt dafür, dass ein Design „wie aus einem Guss“ wirkt. Auf dieser Seite findest du die wichtigsten Palette-Arten (analog, komplementär, triadisch …), praxisnahe UI/Branding-Tipps und viele Beispiele – inklusive Hinweisen zu WCAG-Kontrast.
Was ist eine Farbpalette?
Eine Farbpalette ist eine bewusst ausgewählte Sammlung von Farben, die zusammen harmonisch wirken und bestimmte Aufgaben im Design erfüllen: Hintergrund, Text, Buttons, Akzente, Statusmeldungen usw.
Arten von Farbpaletten (mit Beispielen)
Die meisten Paletten lassen sich als Beziehung im Farbkreis beschreiben. Hier sind die gängigsten Typen – jeweils mit Beispiel-Paletten als schnelle Inspiration.
Bei HSL (Hue, Saturation, Lightness) wird oft der Farbton
(H) beibehalten
und nur die Helligkeit (L) verändert. So erhältst du eine Skala aus
„derselben Farbe“,
die von hell bis dunkel abgestuft ist.
Das ist ideal, um schnell Hover-/Active-States zu erzeugen oder eine einfache Skala zu bauen. Aber: HSL-Lightness wirkt nicht immer gleichmäßig — manche Schritte können optisch „springen“ oder in den hellen Stufen schneller ausbleichen.
Typischer Einsatz: UI-States (Hover/Active), schnelle Varianten, einfache monochrome Skala.
Diese Variante orientiert sich am bekannten Tailwind-Pattern (z. B.
50…900).
Die Palette wird in OKLCH erzeugt: Dabei wird die wahrgenommene
Helligkeit (L)
abgestuft, während Farbstärke (C) und Farbton (H) so gesteuert werden,
dass die Stufen optisch konsistent wirken.
OKLCH eignet sich besonders gut für professionelle Farbskalen, die in Komponenten (Buttons, Backgrounds, Borders, Text) zuverlässig funktionieren – auch in Dark Mode.
Typischer Einsatz: Design Tokens, konsistente UI-Stufen, bessere Ableitung für Dark Mode und Kontrast. Tipp: WCAG-Kontrast prüfen.
Farben liegen nebeneinander im Farbkreis. Wirkt sehr natürlich und „ruhig“. Ideal für Branding, Landingpages und Hintergründe.
Zwei gegenüberliegende Farben im Farbkreis. Sehr aufmerksamkeitsstark. Gut für Call-to-Action Buttons (eine Farbe als Primär, die andere als Akzent).
Drei Farben gleichmäßig im Farbkreis verteilt. Wirkt lebendig, aber stabil, wenn du eine Farbe dominieren lässt und die anderen als Akzent nutzt.
Statt der direkten Gegenfarbe nimmst du die zwei Nachbarn davon. Gibt Kontrast, wirkt aber „weicher“ als eine harte Komplementär-Palette.
Vier Farben in zwei Komplementärpaaren. Kann super sein, ist aber schnell „zu bunt“. Für UI: eine Farbe dominieren lassen, die anderen als Akzente.
Beispiel: Farbpalette im Einsatz (UI-Rollen + Mini-Design)
Theorie ist gut – aber eine Palette wird erst verständlich, wenn man sieht, welches UI-Element welche Farbe bekommt. Unten findest du ein klassisches Setup aus Palette-Farben (Primary/Accent/Status) plus Neutraltönen (Background, Surface, Border, Text). Daraus entsteht ein kleines Beispiel-Layout.
Warum Neutrals? Sie schaffen Struktur (Hintergrund, Karten, Borders) und lassen Akzentfarben wirken, ohne dass das UI „bunt“ wird.
| Rolle | Farbe | Typische UI-Elemente | Hinweis |
|---|---|---|---|
| Background | #FFFFFF |
Seitenhintergrund | Hält die Bühne ruhig, damit Farben wirken |
| Surface | #F8FAFC |
Karten, Panels, Input-Flächen | Leichter Kontrast zum Background für Struktur |
| Border | #E2E8F0 |
Trenner, Card-Rand, Inputs | Zu helle Borders können „verschwinden" (Non-text ≥3:1 beachten) |
| Text | #0F172A |
Überschriften, Fließtext, Labels | Hauptlesbarkeit – hier WCAG-konform bleiben |
| Muted Text | #64748B |
Hinweise, sekundäre Infos | Vorsicht: nicht zu hell, sonst fällt AA schnell durch |
| Primary | #4F46E5 |
Primär-Button, Links, Fokus-Ring | Deine „Brand"-Farbe; konsistent einsetzen |
| Accent/CTA | #F97316 |
Call-to-Action, Highlights, Badges | Gezielt dosieren, sonst wirkt es aggressiv |
| Status |
#16A34A
#EF4444
|
Success/Error Hinweise | Nie nur Farbe: immer Icon/Text + Kontrast |
Tipp: Genau diese Rollen sind später deine Design Tokens (z. B.
--color-primary, --color-surface, --text-muted …).
Genau so kannst du aus einer Palette ein kleines Designsystem ableiten: Farben bekommen Rollen, Rollen werden konsistent in Komponenten genutzt.
Neutraltöne: Hintergrund, Flächen und Text
Neutraltöne sind der „Klebstoff“ einer Palette. Sie sorgen dafür, dass Akzentfarben wirken, ohne dass alles bunt wird. Besonders wichtig: Textfarben und Muted Text — hier passieren die häufigsten Kontrastfehler.
Achte darauf, dass „Muted Text“ nicht zu hell wird — sonst fällt AA schnell durch.
Im Dark Mode wirkt zu heller Text blendend. „Nicht maximal hell“ ist oft angenehmer.
Palette im Tool generieren
Nutze den Generator, um Paletten-Typen auszuprobieren, Skalen zu erzeugen und Farben zu speichern. Für saubere Ergebnisse: erst Palette wählen, dann Text-/UI-Kontrast prüfen.
→ Tool öffnen · WCAG-Kontrast prüfen · Farbmodelle verstehen
FAQ: Häufige Fragen zu Farbpaletten
Kurz und praktisch – für Webdesign, UI und Branding.
Was ist eine Farbpalette?
Eine Farbpalette ist eine abgestimmte Auswahl von Farben, die zusammen harmonisch wirken. Sie wird z. B. für Branding, Webdesign, UI-Komponenten (Buttons, Hintergründe) oder Illustrationen genutzt.
Welche Farbpalette ist am einfachsten für ein stimmiges Design?
Analoge Farbpaletten (benachbarte Farbtöne im Farbkreis) sind besonders einfach, weil sie von Natur aus harmonisch wirken. Für UI reicht oft eine Primärfarbe + Akzent + neutrale Grautöne.
Wie viele Farben sollte eine Farbpalette haben?
Für Webdesign reichen oft 5 bis 9 Farben: 1–2 Hauptfarben, 1 Akzentfarbe, 2–3 neutrale Hintergründe/Flächen, 1–2 Textfarben und optional Statusfarben (Success/Warning/Error).
Wie stelle ich sicher, dass meine Palette barrierefrei ist?
Prüfe Kontraste für Text und UI: Normaler Text sollte mindestens 4.5:1 (WCAG
AA) erreichen,
großer Text mindestens 3:1. Für UI-Komponenten gilt meist 3:1.
Mehr dazu: WCAG-Kontrast erklärt.
Warum wirken Farbskalen in OKLCH oft besser als in HSL?
OKLCH ist wahrnehmungsbasiert. Abstufungen über die Lightness (L) wirken meist gleichmäßiger und konsistenter als HSL-Lightness, die je nach Farbton unterschiedlich hell wirkt.
Weiterlesen: Farbmodelle · WCAG-Kontrast · Tool öffnen