Worin unterscheiden sich diese Harmonien?

Komplementär nutzt die Farbe 180° gegenüber im Farbkreis - maximaler Kontrast, ideal für Akzente auf Call-to-Action-Buttons. Analog nimmt 30°-Nachbarn - geringer Kontrast, ruhig, super für Hintergründe. Triadisch wählt drei gleichmässig verteilte Farben (120° auseinander) - lebendig und ausbalanciert. Tetradisch fügt eine vierte hinzu, also zwei Komplementärpaare - reichhaltig, aber schwerer auszubalancieren. Monochrom variiert Helligkeit und Sättigung bei gleichem Farbton - die kohärenteste Option.

Der Hex wird in HSL umgewandelt, dann der Farbton mit festen Offsets pro Harmonie rotiert (180° komplementär, ±30° analog, ±120° triadisch, +60/+180/+240 tetradisch). Sättigung und Helligkeit bleiben konstant, damit die Varianten zusammengehörig wirken. Monochrom hält den Farbton und stuft die Helligkeit von 90 % auf 20 % ab.

Warum HSL und nicht HSV oder LCH?

HSL ist der Farbraum, den CSS nativ kennt und der zu der Art passt, wie die meisten Designer über Farben denken («dunklere Version davon», «das Gegenteil»). LCH würde wahrnehmungsmässig gleichmässigere Schritte liefern, ist aber noch nicht überall in Design-Tools unterstützt. HSL ist der pragmatische Mittelweg - gut genug zum Ideieren, mit stabiler Ausgabe quer durch Tools.

Bestehen diese Paletten den WCAG-Kontrast?

Nicht zwangsläufig - Farbharmonie und Accessibility sind verschiedene Fragen. Zwei Farben können harmonisch sein und trotzdem zu wenig Kontrast für Text haben. Nach der Palettenwahl jedes Text/Hintergrund-Paar in den Kontrast-Prüfer geben. Der Farbton-Generator hilft auch: Die meisten Paletten brauchen festgesetzte helle und dunkle Varianten für Fliesstext, nicht die gesättigten Mittel-Töne, die eine Harmonie zurückgibt.

Lieber von der Markenfarbe oder einem Zufallston starten?

Markenfarbe, fast immer. Der Generator hilft dir, Stützfarben zu finden, die mit dem Vorhandenen funktionieren. Vom Zufallston aus zu starten gibt eine hübsche Palette ohne Anker, was meist endet, indem die Marke an die Palette angepasst wird - und nicht umgekehrt.

Farbpaletten-Generator

Komplementäre, analoge, triadische, tetradische und monochrome Paletten aus jeder Basisfarbe erzeugen.

Basisfarbe

Komplementär

Analog

Triadisch

Tetradisch

Monochrom

Klick auf eine Probe, um den Hex zu kopieren.

Eine Basisfarbe, fünf Paletten. Der Generator wendet die klassischen Harmonien - komplementär, analog, triadisch, tetradisch, monochrom - auf den eingegebenen Hex an. Jede Zeile zeigt die volle Palette, die Basisprobe markiert, die anderen über Hue-Rotation in HSL abgeleitet. Klick auf eine Probe kopiert den Hex.

So funktioniert's

Basisfarbe setzen
Picker nutzen oder Hex einfügen. Die fünf Paletten-Zeilen berechnen sich sofort neu.
Harmonien durchgehen
Jede Zeile ist eine Harmonie. Wähle die, deren Energie zum Projekt passt - ruhig (analog), kräftig (triadisch), ikonisch (komplementär).
Kopieren, was du brauchst
Klick auf eine Probe kopiert ihren Hex. Die Basisprobe ist markiert.
Gegen Text gegenprüfen
Gewählte Farben in den Kontrast-Prüfer geben, um sicherzustellen, dass sie WCAG für die genutzten Textgrössen erfüllen.

Was ist das?

Ein Farbpaletten-Generator nimmt eine Basisfarbe und erzeugt mehrere harmonische Schemata, indem er ihren Farbton im Farbkreis rotiert. Die traditionellen Harmonien - komplementär, analog, triadisch, tetradisch, monochrom - stammen aus der Farbtheorie des 19. Jahrhunderts und sind weiterhin die Grundlage der meisten Design-System-Farbpicker (Material, Adobe, Tailwind, IBM Carbon). Sie geben einen garantiert nicht beissenden Ausgangspunkt, noch bevor Helligkeit und Sättigung feinjustiert sind.

Wann verwenden

Akzentfarben für eine Marke mit fixer Primärfarbe wählen, Chart-Paletten gestalten, in denen jede Serie unterscheidbar sein muss, Stützfarben für eine Marketing-Seite aus einer einzigen Markenfarbe ableiten, Moodboards skizzieren, bevor man sich auf ein volles Design-System festlegt, und sich beibringen, welche Töne zusammen lesbar bleiben, indem man mit einem Slider experimentiert.

Häufige Fehler

Die Generator-Ausgabe als finale Palette behandeln - es ist ein Ausgangspunkt. Pro Probe muss die Helligkeit für Lesbarkeit nachjustiert, eine Probe gegen einen Nachbarn getauscht werden, der zur Marke passt, und neutrale Grautöne (die Harmonien erzeugen keine) hinzugefügt werden. Eine Palette auswählen, ohne sie auf den tatsächlichen Hintergründen zu testen - Farben lesen sich anders auf Weiss, Beige und dunklen Oberflächen.

FAQ

Worin unterscheiden sich diese Harmonien?: Komplementär nutzt die Farbe 180° gegenüber im Farbkreis - maximaler Kontrast, ideal für Akzente auf Call-to-Action-Buttons. Analog nimmt 30°-Nachbarn - geringer Kontrast, ruhig, super für Hintergründe. Triadisch wählt drei gleichmässig verteilte Farben (120° auseinander) - lebendig und ausbalanciert. Tetradisch fügt eine vierte hinzu, also zwei Komplementärpaare - reichhaltig, aber schwerer auszubalancieren. Monochrom variiert Helligkeit und Sättigung bei gleichem Farbton - die kohärenteste Option.
Wie wird gerechnet?: Der Hex wird in HSL umgewandelt, dann der Farbton mit festen Offsets pro Harmonie rotiert (180° komplementär, ±30° analog, ±120° triadisch, +60/+180/+240 tetradisch). Sättigung und Helligkeit bleiben konstant, damit die Varianten zusammengehörig wirken. Monochrom hält den Farbton und stuft die Helligkeit von 90 % auf 20 % ab.
Warum HSL und nicht HSV oder LCH?: HSL ist der Farbraum, den CSS nativ kennt und der zu der Art passt, wie die meisten Designer über Farben denken («dunklere Version davon», «das Gegenteil»). LCH würde wahrnehmungsmässig gleichmässigere Schritte liefern, ist aber noch nicht überall in Design-Tools unterstützt. HSL ist der pragmatische Mittelweg - gut genug zum Ideieren, mit stabiler Ausgabe quer durch Tools.
Bestehen diese Paletten den WCAG-Kontrast?: Nicht zwangsläufig - Farbharmonie und Accessibility sind verschiedene Fragen. Zwei Farben können harmonisch sein und trotzdem zu wenig Kontrast für Text haben. Nach der Palettenwahl jedes Text/Hintergrund-Paar in den Kontrast-Prüfer geben. Der Farbton-Generator hilft auch: Die meisten Paletten brauchen festgesetzte helle und dunkle Varianten für Fliesstext, nicht die gesättigten Mittel-Töne, die eine Harmonie zurückgibt.
Lieber von der Markenfarbe oder einem Zufallston starten?: Markenfarbe, fast immer. Der Generator hilft dir, Stützfarben zu finden, die mit dem Vorhandenen funktionieren. Vom Zufallston aus zu starten gibt eine hübsche Palette ohne Anker, was meist endet, indem die Marke an die Palette angepasst wird - und nicht umgekehrt.