Farbpaletten-Generator
Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
Base Color
Harmony Rule
Global Refinement
Assign Roles
Drag swatches → drop on a card · drag cards to swap · to pick any color
Primary
#197FE6
Secondary
#1461B8
Accent
#F59E0B
Background
#FFFFFF
Surface
#F5F7FA
Text
#111827
Build products
your users love
The fastest way to ship your next project with a polished design system and production-ready components.
Popular Palettes
Brand Palettes
So erstellst du eine Farbpalette
Eine Basisfarbe, eine Harmonieregel, fünf fertige Farbtöne
1. Basisfarbe wählen
Klicke auf das Farbfeld, um den Picker zu öffnen, oder gib direkt einen Hex-Code in das Feld ein.
2. Harmonieregel auswählen
Analog, Monochromatisch, Komplementär, Triadisch oder Tetradisch — die Palette aktualisiert sich sofort bei jeder Änderung.
3. Feinjustieren und exportieren
Passe Sättigung und Helligkeit über die Regler an und exportiere anschließend als CSS, JSON oder PNG.
Was dieser Farbpaletten-Generator kann
Bewährte geometrische Regeln aus dem Farbkreis, automatisch angewendet
Immer 5 Farben pro Palette
Der ideale Mittelweg zwischen Abwechslung und Zusammenhalt für die meisten Design Systems.
Globale Regler für Sättigung und Helligkeit
Verschiebt die gesamte Harmonie auf einmal, ohne die Beziehungen zwischen den Farbtönen zu verändern.
Neu generieren unter Beibehaltung der Regel
Würfelt den Basis-Farbton neu und behält dabei Harmonie und aktuelle Einstellungen bei — mit einem Verlauf der letzten 10 Generationen.
3 Exportformate
CSS Custom Properties, JSON mit Hex/RGB/HSL je Farbe, oder eine PNG-Karte mit allen Farbfeldern.
Rollen-Zuweisung mit intelligenter Erkennung
Ziehe ein beliebiges Farbfeld auf die Karten Primary, Secondary, Accent, Background, Surface oder Text — bei Marken-Presets sind die Rollen anhand der Helligkeit bereits automatisch vorbelegt.
Bibliothek fertiger Paletten
20 Paletten mit einem Klick laden: 10 beliebte Editor-Themes (Dracula, Nord, Catppuccin ...) und 10 Paletten echter Marken (Spotify, Netflix, Google ...).
Die fünf Harmonieregeln im Farbkreis
Jede Regel verschiebt den Farbton auf eine andere Weise
Wann du dieses Tool brauchst
Die häufigsten Einsatzszenarien
UI-Design-Systeme
Erzeuge 5 Farben aus der Primärfarbe der Marke und exportiere sie direkt als CSS Custom Properties.
Markenidentität
Probiere analoge und komplementäre Harmonien rund um die Logofarbe aus, bevor die offizielle Palette feststeht.
Dark-Mode-Themes
Nutze die Regel Monochromatisch mit niedriger Helligkeit, um Surface, Background und gedämpfte Töne aufzubauen.
Design-Token-Pipelines
Der JSON-Export enthält Hex/RGB/HSL mit semantischem Label je Farbe, direkt einsatzbereit für Style Dictionary.
Schnelles Website-Mockup
Die Live-Vorschau zeigt Navbar, Hero, Feature-Karten und Footer mit den zugewiesenen Rollen — noch bevor eine Zeile Code geschrieben ist.
Referenz bekannter Markenpaletten
Lade Paletten wie Spotify, Netflix oder Vercel als Ausgangspunkt, um die eigene visuelle Identität zu vergleichen oder zu inspirieren.
Häufige Fehler bei der Paletten-Erstellung
Analog mit Monochromatisch verwechseln
Analog verschiebt den Farbton in kleinen Schritten; Monochromatisch behält den Farbton bei und ändert nur die Helligkeit.
Tetradisch ohne klare Hierarchie einsetzen
Die reichhaltigste Harmonie braucht eine dominante Farbe — die anderen drei sollten unterstützend wirken, sonst wirkt das Ergebnis überladen.
Vergessen, vor dem Neu-Generieren zu speichern
Der Verlauf speichert nur die letzten 10 Generationen — kopiere CSS oder JSON, wenn du eine Palette dauerhaft sichern willst.
Eine Rolle überschreiben, ohne den Kontrast zu prüfen
Über das Stift-Symbol lässt sich jeder Rollen-Karte frei eine beliebige Farbe zuweisen — die automatische Kontrastprüfung gilt aber nur für die vorgeschlagenen Farben. Eine manuelle Überschreibung kann die Lesbarkeit ohne Warnung beeinträchtigen.
Annehmen, der Export folge der Reihenfolge der Farbfelder
CSS und JSON übernehmen die Farben aus den Rollen-Karten (Primary, Secondary ...), nicht die Reihenfolge der Farbfeld-Leiste oben. Wurden Farben anderen Rollen zugewiesen, spiegelt der Export genau diese Zuordnung wider.
Eine Markenpalette ohne Blick in die Vorschau übernehmen
Fertige Paletten wie Dracula oder Spotify wurden für ihren ursprünglichen Kontext entworfen, nicht zwingend für dein Layout. Öffne die Website-Vorschau vor dem Export, um sicherzustellen, dass Text und Hintergrund lesbar bleiben.
Warum diesen Farbpaletten-Generator nutzen
Er wendet bewährte geometrische Regeln des Farbkreises an — analoge Nachbarschaft, komplementärer Gegensatz, triadische Dreiteilung — und liefert damit Ausgangspunkte, die auch ohne geschultes Designer-Auge funktionieren.
Die globalen Regler für Sättigung und Helligkeit verschieben eine ganze Harmonie von "lebendige Tages-UI" zu "barrierearm im Dark Mode", ohne die Beziehungen zwischen den Farben zu zerstören.
Über die reine mathematische Erzeugung hinaus ist der Workflow vollständig: Weise die 5 Farben per Drag-and-drop den echten Rollen eines Design Systems zu (Primary, Secondary, Accent, Background, Surface, Text) und sieh das Ergebnis in der Vorschau einer kompletten Website, bevor überhaupt etwas exportiert wird.
Häufig gestellte Fragen
Farbharmonie nutzt mathematisch definierte Beziehungen zwischen Farbtönen im Farbkreis, um ausgewogene Paletten zu erzeugen. Harmonische Paletten sind visuell leichter zu verarbeiten und wirken professionell, auch ohne geschultes Designer-Auge.
Weiterführende Ressourcen
Wie sich die von diesem Tool exportierten CSS-Variablen in einem echten Projekt einsetzen lassen.
Theoretische Grundlage des Farbkreises und der geometrischen Harmonieregeln, die dieser Generator anwendet.
Das in Deutschland etablierte physische Farbsystem mit 1.825 Farbtönen — relevant, sobald eine digitale Palette in Lack, Druck oder Bauprodukte übersetzt werden muss.
Verwandte Tools
- Farbpalette aus Bild Design Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
- DESIGN.md Generator Design KI-fähige DESIGN.md-Dateien für Google Stitch, Claude Code, Cursor und Copilot erstellen — Farben, Typografie, Abstände und Komponenten für KI-Tools definieren.
- Farbwähler Design Kostenloser Online-Farbwähler — wähle visuell eine Farbe und erhalte sofort HEX-, RGB-, HSL-, HSV- und CMYK-Codes. Schattierungen, Töne, Farbharmonien und...
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
