Farbpaletten-Generator
Aus einer Grundfarbe Farbpaletten nach der Farbenlehre erzeugen: komplementär, analog, triadisch, tetradisch, split-komplementär und monochrom, mit HEX-Codes zum Kopieren.
Weiteres Tool ausprobieren
Passend zu diesem Tool ausgewähltDer Farbpaletten-Generator berechnet aus einer Grundfarbe sechs klassische Farbharmonien: komplementär, analog, triadisch, tetradisch, split-komplementär und monochrom. Grundlage ist der Farbkreis im HSL-Modell: Die Harmonien drehen den Farbton um feste Winkel und lassen Sättigung und Helligkeit gleich, die monochrome Reihe ändert nur die Helligkeit. Jede Farbe erscheint mit ihrem HEX-Code und lässt sich direkt kopieren, etwa für eine Website, ein Logo, eine Präsentation oder ein Moodboard. Die Berechnung läuft im Browser.
So funktioniert das Tool
- 01Grundfarbe wählenEinen HEX-Code eingeben, zum Beispiel die Hauptfarbe der eigenen Marke, oder die Farbe im Farbwähler aussuchen.
- 02Harmonien vergleichenAlle sechs Paletten erscheinen gleichzeitig, jede mit zwei bis fünf Farben.
- 03Farben übernehmenDen HEX-Code einer Farbe kopieren und in CSS, Grafikprogramm oder Präsentation einfügen.
Wann ist das nützlich?
- Markenfarben ergänzenZur bestehenden Hauptfarbe passende Akzent- und Hintergrundfarben finden, statt nach Gefühl zu wählen.
- Diagramme und PräsentationenTriadische oder tetradische Paletten liefern gut unterscheidbare Farben für Datenreihen.
- Abstufungen für OberflächenDie monochrome Reihe ergibt helle Flächen, mittlere Akzente und dunkle Texte aus demselben Farbton.
Beispiele
- Komplementär zu TürkisZum Farbton 175° von #1ED4C5 liegt das Gegenstück bei 355°, ein kräftiges Rot: #D21E2D.
- TriadischDieselbe Grundfarbe ergibt mit +120° und +240° ein Violett (#C31ED2) und ein Gelb (#D2C31E).
- MonochromBei Helligkeit 20, 35, 50, 65 und 80 Prozent entstehen #0D5953, #169C91, #20DFCF, #63E9DE und #A6F2EC.
Tipps für ein besseres Ergebnis
- Eine Farbe führtIn den meisten Designs trägt eine Farbe die Fläche, die übrigen setzen Akzente. Eine Verteilung von etwa 60, 30 und 10 Prozent ist ein bewährter Startpunkt.
- Kontrast getrennt prüfenHarmonisch heißt nicht lesbar. Bevor eine Farbe Text trägt, das Paar im Kontrast-Checker testen.
- Leichte Rundung beachtenDie Grundfarbe wird auf ganze HSL-Werte gerundet, deshalb kann ihr HEX-Code in der Palette um wenige Stufen abweichen: #1ED4C5 erscheint als #1ED2C3.
Die sechs Harmonien
Komplementär stellt der Grundfarbe ihr Gegenüber im Farbkreis gegenüber (+180°). Analog nimmt die Nachbarn bei −30° und +30°. Triadisch verteilt drei Farben im Abstand von 120°, tetradisch vier im Abstand von 90°. Split-komplementär ersetzt das direkte Gegenüber durch die beiden Farben daneben (+150° und +210°). Monochrom bleibt beim Farbton und variiert die Helligkeit in fünf Stufen von 20 bis 80 Prozent.
Warum das HSL-Modell
HSL beschreibt eine Farbe durch Farbton (0 bis 360 Grad), Sättigung und Helligkeit. Damit lassen sich Harmonien als einfache Drehung des Farbtons rechnen, während Sättigung und Helligkeit erhalten bleiben. Der Nachteil: Gleiche HSL-Helligkeit bedeutet nicht gleich empfundene Helligkeit, ein Gelb wirkt heller als ein Blau mit demselben Wert.
Von der Palette zum Design
Eine Palette ist ein Vorschlag, kein fertiges Design. Kräftige Komplementärfarben wirken nebeneinander unruhig und eignen sich eher für kleine Akzente. Für große Flächen passen oft hellere Stufen aus der monochromen Reihe, für Text dunkle. Wer Farben in CSS verwaltet, legt sie am besten als Variablen an und kann sie dann zentral anpassen.
Häufige Fragen
Wie finde ich die Komplementärfarbe?
Den Farbton um 180 Grad drehen und Sättigung und Helligkeit beibehalten. Der Generator rechnet das automatisch und zeigt den HEX-Code.
Was ist der Unterschied zwischen triadisch und tetradisch?
Triadisch verteilt drei Farben im Abstand von 120 Grad, tetradisch vier im Abstand von 90 Grad. Tetradische Paletten sind bunter und schwerer auszubalancieren.
Welche Harmonie eignet sich für eine Website?
Für ruhige Seiten analog oder monochrom, für deutliche Akzente komplementär oder split-komplementär, sparsam eingesetzt. Entscheidend ist, dass Text und Hintergrund genug Kontrast haben.
Welche Formate werden angezeigt?
Jede Farbe erscheint als HEX-Code, der in CSS, Figma, Canva, PowerPoint und den meisten Grafikprogrammen funktioniert.
Werden meine Farben gespeichert?
Nein. Die Paletten werden im Browser berechnet, eingegebene Farben verlassen das Gerät nicht.