Farbpaletten-Generator
Harmonische Farbpaletten aus einer Ausgangsfarbe erzeugen: komplementär, analog, triadisch und mehr – Export als CSS.
Der Farbpaletten-Generator erzeugt aus einer Ausgangsfarbe harmonische Kombinationen nach klassischen Regeln: komplementär, analog, triadisch, geteilt komplementär, Quadrat, Rechteck und monochrom. Dazu schlägt er passende Neutral- und Statusfarben vor und kann für jede Farbe die Stufen 50 bis 950 erzeugen. Export als CSS-Variablen, Tailwind-Theme oder JSON.
Drei gleichmäßig verteilte Farben (120°) – lebendig.
:root {
--color-primary: #3b82f6;
--color-secondary: #f63b82;
--color-tertiary: #82f63b;
--color-neutral: #788190;
--color-success: #00a24a;
--color-warning: #b57900;
--color-danger: #e24c44;
--color-info: #008dde;
}Farbharmonien einfach erklärt
Farbharmonien beruhen auf der Lage der Farben im Farbkreis. Der Generator dreht den Farbton der Ausgangsfarbe um feste Winkel und behält Sättigung und Helligkeit bei.
| Harmonie | Winkel | Wirkung |
|---|---|---|
| Komplementär | 180° | Starker Kontrast |
| Analog | ±30° | Ruhig, verwandt |
| Triadisch | 120°, 240° | Lebendig, ausgewogen |
| Geteilt komplementär | 150°, 210° | Kontrast mit weniger Spannung |
| Quadrat | 90° Schritte | Vielfältig |
| Monochrom | – | Eine Farbe in fünf Helligkeiten |
So gehst du vor
- Ausgangsfarbe wählen, etwa die Markenfarbe.
- Harmonie testen und die passende Kombination übernehmen.
- Kontraste prüfen mit dem Farbkontrast-Prüfer und die Farben in Skalen ausbauen mit dem OKLCH-Farbskala-Generator.
Beispiel
Mit dem Blau #3b82f6 und einer triadischen Harmonie erhältst du zusätzlich ein Pink
und ein Grün. Für ein ruhiges Interface nimmst du nur das Blau als Primärfarbe und ein Neutral,
das zum Blau passt, die anderen Farben dienen als Akzente oder Statusfarben.
Häufige Fragen
Was sind Farbharmonien?
Regeln, welche Farben auf dem Farbkreis gut zusammenpassen. Komplementär nutzt Gegenüber, analog Nachbarn, triadisch drei gleichmäßig verteilte Farben. Sie sind ein Startpunkt, kein Gesetz. Helligkeit und Sättigung entscheiden mindestens so viel.
Welche Harmonie passt zu meinem Projekt?
Analog wirkt ruhig und einheitlich, komplementär kontrastreich und auffällig, triadisch bunt und lebendig. Für Interfaces genügt oft eine Primärfarbe mit einer Akzentfarbe und viel Neutral.
Wie viele Farben braucht eine Website?
Meist eine Primärfarbe, eine Akzentfarbe, Neutraltöne für Text und Flächen sowie Statusfarben für Erfolg, Warnung und Fehler. Mehr Farben erhöhen den Pflegeaufwand und machen Designs unruhig.
Sind die Farben barrierefrei?
Harmonie sagt nichts über Kontrast. Prüfe Text-Hintergrund-Kombinationen im Farbkontrast-Prüfer oder passe die ganze Palette in der barrierefreien Farbpalette an.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.