Vier Farbharmonien aus einer Basisfarbe
Wähle eine einzelne Farbe und der Paletten-Generator berechnet dafür die vier klassischen Harmonien des Farbkreises: komplementär, analog, triadisch und teilkomplementär. Jede wird als Reihe von Farbflächen angezeigt, die du mit einem Klick kopierst, und das ganze Set lässt sich auf einmal exportieren. Die Berechnung läuft im Browser, das Ergebnis aktualisiert sich also sofort, wenn du die Basisfarbe änderst, und die Farbe steht in der URL, sodass du jede Palette teilen oder als Lesezeichen speichern kannst.
So funktioniert es
- Wähle eine Basisfarbe mit dem Farbwähler oder tippe einen Hex-Code wie
#FF5722ein. Die RGB- und HSL-Werte erscheinen darunter. - Scrolle durch die vier Paletten. Klicke auf eine Farbfläche, um ihren Hex-Code zu kopieren.
- Klicke auf Alle exportieren, um alle Harmonien als CSS Custom Properties, Tailwind-Config, SCSS-Variablen und JSON in einem Paket zu kopieren.
- Klicke auf Teilen, um einen Link zu kopieren, der den Generator mit derselben Basisfarbe öffnet.
Welche Harmonie passt wann?
- Komplementär (zwei Farben im Abstand von 180°) liefert den stärksten Kontrast. Ideal für einen Primär-Button auf einem Markenhintergrund.
- Analog (Nachbarn im Farbkreis) wirkt ruhig und stimmig. Passt zu Dashboards, Lese-Apps und den meisten UI-Elementen.
- Triadisch (drei Farben im Abstand von 120°) ist lebendig und ausgewogen. Gut für Illustrationen, Diagramme und Kinderprodukte.
- Teilkomplementär behält die Kraft der Komplementärfarben, ist aber leichter auszubalancieren; eine sichere Wahl für Marketingseiten.
Tipps
- Starte mit einer Farbe, die du schon hast, zum Beispiel der Hauptfarbe deines Logos oder einer Farbe aus einem Foto, die du mit dem Bild-Farbextraktor gewonnen hast.
- Harmonien liefern Farbton-Beziehungen, keine Abstufungen. Bilde hellere und dunklere Varianten jeder Farbe für Hintergründe und Text.
- Prüfe Textfarben im Kontrast-Checker; ein Komplementärpaar kann leuchtend sein und als Text trotzdem die WCAG verfehlen.
- Für eine Palette, die von einer Stimmung oder Geschichte statt von einer Farbe ausgeht, nutze den KI-Paletten-Generator.