Farbpaletten-Generator

Dieser Palettengenerator rechnet im HSL-Farbmodell: H (Farbton) ist ein Winkel von 0 bis 360° auf dem Farbkreis, S (Sättigung) und L (Helligkeit) sind Prozentwerte. Nach Wahl einer Ausgangsfarbe dreht das Tool nach klassischen Regeln der Farbenlehre um den Kreis und erzeugt fünf Farben auf einmal. Da nur der Farbton oder nur Helligkeit und Sättigung verändert werden, stehen die Farben in einer klaren mathematischen Beziehung und wirken natürlich aufeinander abgestimmt statt zufällig.

Jeder Modus hat sein Einsatzgebiet. Monochrom behält einen Farbton und variiert Helligkeit und Sättigung – die sicherste Wahl für Marken und datenreiche Oberflächen. Komplementär nimmt die gegenüberliegende Farbe bei 180° und liefert den stärksten Kontrast für Buttons und Hervorhebungen. Analog nutzt Nachbarn bei ±15° und ±30°, weich und natürlich wie viele Illustrationen und Landschaftsfotos. Triadisch teilt den Kreis in Drittel (120° und 240°) für eine farbenfrohe Palette, die sorgfältige Proportionen braucht. Zufall wählt innerhalb sinnvoller Bereiche, wenn du Inspiration suchst.

Bei der Anwendung hilft die 60-30-10-Regel: 60 % Hauptfarbe für Hintergründe und große Flächen, 30 % Sekundärfarbe für Bereiche und Karten, 10 % Akzentfarbe für Buttons und Links. Komplementäre und triadische Paletten wirken unruhig, wenn alle Farben gleich stark eingesetzt werden – wähle eine Hauptrolle und entsättige den Rest. Und denk an die Lesbarkeit: Text sollte mindestens das WCAG-AA-Kontrastverhältnis von 4,5:1 erreichen, was du mit unserem Farbkontrast-Analyzer prüfen kannst.

Ein Klick auf ein Farbfeld kopiert den HEX-Code; die ganze Palette lässt sich als CSS-Variablen, SCSS-Variablen, Tailwind-Konfiguration oder JSON exportieren und direkt ins Projekt einfügen. Der CSS-Verlaufsgenerator darunter macht aus der Palette einen Hintergrundverlauf. Alles wird im Browser berechnet.