Farbpalettengenerator
Der Farbpaletten-Generator erstellt aus jeder Grundfarbe eine 5-Farben-Palette nach den Harmonien der Farbenlehre – komplementär, triadisch, analog, geteilt komplementär, tetradisch oder monochrom – und exportiert sie als CSS Custom Properties.
Über dieses Tool
Der Farbpaletten-Generator erstellt aus jeder Grundfarbe eine 5-Farben-Palette nach den Harmonien der Farbenlehre – komplementär, triadisch, analog, geteilt komplementär, tetradisch oder monochrom – und exportiert sie als CSS Custom Properties.
So funktioniert’s
- Wähle eine Grundfarbe mit dem Farbwähler.
- Wähle eine Harmonie, zum Beispiel komplementär oder triadisch.
- Sieh dir die fünf erzeugten Farbfelder an.
- Klicke auf „Als CSS-Variablen kopieren“, um die Palette in dein Stylesheet einzufügen.
Gut zu wissen
- Komplementärfarben liegen auf dem Farbkreis 180° auseinander; triadische Farben haben 120° Abstand.
- Analoge Paletten nutzen benachbarte Farbtöne (etwa 30° Abstand) und wirken meist ruhig und stimmig.
- Geteilt komplementär kombiniert einen Grundton mit den beiden Tönen links und rechts seiner Komplementärfarbe (±30°) – das bringt Kontrast mit weniger Spannung.
- Monochrome Paletten behalten einen Farbton bei und variieren nur Sättigung und Helligkeit.
- Der Generator arbeitet in HSL, das den Farbton dreht, ohne die Helligkeit einer Farbe zu verändern.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Was ist eine komplementäre Farbpalette?
Eine komplementäre Palette kombiniert einen Farbton mit dem, der ihm auf dem Farbkreis direkt gegenüberliegt (180° entfernt), etwa Blau und Orange. Sie bietet den stärksten Kontrast aller Harmonien.
Wie viele Farben sollte eine Website-Palette haben?
Die meisten Oberflächen nutzen eine Primärfarbe, ein oder zwei Akzentfarben und eine Reihe neutraler Töne. Eine 5-Farben-Harmonie ist ein guter Ausgangspunkt, den du kürzen oder mit Tints und Shades erweitern kannst.
Was ist der Unterschied zwischen triadisch und tetradisch?
Triadisch nutzt drei Farbtöne im gleichmäßigen Abstand von 120°. Tetradisch nutzt vier Farbtöne im Abstand von 90°, die ein Quadrat auf dem Farbkreis bilden – reichhaltiger, aber schwerer auszubalancieren.
Kann ich die Palette in CSS oder Tailwind verwenden?
Ja. Kopiere die Palette als CSS Custom Properties und referenziere sie mit var(), oder füge die Hex-Werte in die Theme-Farben deiner Tailwind-Konfiguration ein.