Farbpaletten-Generator
Wähle eine Grundfarbe und erzeuge sofort farbtheoretische Harmonien – Komplementär, Analog, Triadisch, Tetradisch, Geteilt-komplementär und Monochromatisch – als lebendige Farbfelder, die du als HEX, RGB, HSL, CSS-Variablen oder Tailwind-Konfiguration kopieren kannst.
Komplementär
Die Grundfarbe und ihr Gegenüber auf dem Farbkreis (Farbton + 180°) – die kontraststärkste Kombination.
Analog
Die Grundfarbe flankiert von ihren beiden Nachbarn auf dem Farbkreis (Farbton ± 30°) – ein ruhiges, stimmiges Schema.
Triadisch
Drei Farben in gleichmäßigem Abstand von 120° (Farbton, +120°, +240°) – lebendig und dennoch ausgewogen.
Tetradisch (Rechteck)
Vier Farben, die auf dem Farbkreis ein Rechteck bilden (Farbton, +90°, +180°, +270°) – zwei Komplementärpaare.
Geteilt-komplementär
Die Grundfarbe plus die beiden Farben beiderseits ihres Komplements (Farbton +150° und +210°) – starker Kontrast, der sich leichter ausbalancieren lässt.
Monochromatisch
Ein einziger Farbton als Helligkeitsverlauf von hell nach dunkel – eine mühelos harmonische Skala.
Palette exportieren
Kopiere die gewählte Harmonie als einfügefertige CSS-Custom-Properties oder als Tailwind-Farbkonfiguration.
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}Über den Farbpaletten-Generator
Ein Farbpaletten-Generator verwandelt eine einzelne Grundfarbe mithilfe der Geometrie des Farbkreises in einen Satz zusammenpassender Farben. Farbtheoretische Harmonien sind einfach definierte Beziehungen zwischen Farbtönen: Farben, die einander gegenüberliegen, nebeneinander stehen oder gleichmäßig über den Kreis verteilt sind. Dieses Werkzeug nimmt deine Grundfarbe, liest ihren Farbton, ihre Sättigung und Helligkeit (HSL) und dreht den Farbton um feste Beträge, um sechs klassische Schemata zu erzeugen – komplementär (Farbton + 180°), analog (Farbton ± 30°), triadisch (120° Abstand), tetradisch bzw. Rechteck (90° Abstand), geteilt-komplementär (beiderseits des Komplements) und monochromatisch (ein Farbton, variierte Helligkeit). Jede Palette wird als lebendige Farbfelder angezeigt, damit du die Beziehungen siehst, statt nur Zahlen zu lesen, und zu jeder Farbe gehören ihre HEX-, RGB- und HSL-Werte zum Kopieren. Wenn dir ein Schema gefällt, exportiere es als CSS-Custom-Properties oder als Tailwind-Farbkonfiguration und übernimm es direkt in dein Projekt. Es ist für Designer, Entwickler, Illustratoren und alle gedacht, die Farben für eine Website, eine Marke, ein Diagramm, eine Präsentation oder ein Interieur wählen – ein schneller Weg von einer Farbe, die du liebst, zu einer ganzen ausgewogenen Palette.
So verwendest du diesen Generator
- 1 Wähle mit dem Farbwähler eine Grundfarbe oder gib einen beliebigen Hex-Wert (zum Beispiel #3498DB oder #39F) in das Feld ein.
- 2 Durchstöbere die sechs Harmonie-Abschnitte – komplementär, analog, triadisch, tetradisch, geteilt-komplementär und monochromatisch – jeweils als lebendige Farbfelder dargestellt.
- 3 Kopiere jede einzelne Farbe als HEX mit dem Button an jedem Farbfeld; jedes Feld zeigt außerdem die passenden RGB- und HSL-Werte an.
- 4 Wähle im Export-Feld eine Palette und ein Format, um CSS-Custom-Properties oder eine Tailwind-Farbkonfiguration zu kopieren, und füge sie dann in dein Projekt ein.
Wie Farbharmonien funktionieren (der Farbkreis)
Jede Harmonie ist eine Drehung des Farbtons der Grundfarbe um den 360°-Farbkreis, wobei Sättigung und Helligkeit gleich bleiben. Im HSL-Modell (Farbton, Sättigung, Helligkeit) ist das einfach: Nur der Farbton ändert sich. Komplementär – Farbton + 180°. Die beiden Farben liegen sich direkt gegenüber und ergeben den stärksten Kontrast. Analog – Farbton − 30°, Farbton, Farbton + 30°. Benachbarte Farben, die sanft ineinander übergehen und harmonisch wirken. Triadisch – Farbton, Farbton + 120°, Farbton + 240°. Drei Farben an den Ecken eines gleichseitigen Dreiecks: lebendig, aber ausgewogen. Tetradisch (Rechteck) – Farbton, Farbton + 90°, Farbton + 180°, Farbton + 270°. Zwei Komplementärpaare für ein reiches Vierfarbschema. Geteilt-komplementär – Farbton, Farbton + 150°, Farbton + 210°. Die Grundfarbe mit den beiden Farbtönen beiderseits ihres Komplements – fast der Kontrast von Komplementär, aber sanfter. Monochromatisch – ein Farbton in mehreren Helligkeitsstufen, von hellen Tönungen bis zu dunklen Schattierungen. Zum Beispiel hat die Grundfarbe #3498DB einen Farbton von etwa 204°. Ihr Komplement ist 204° + 180° = 24° (ein Orange), ihre triadischen Partner liegen bei 324° und 84°, und ihre geteilten Komplemente bei 354° und 54°. Die Berechnung erfolgt in HSL und wird für jedes Farbfeld zurück in HEX umgewandelt.
Häufig gestellte Fragen
Was ist eine Komplementärfarbe?
Eine Komplementärfarbe ist die Farbe, die einer anderen auf dem Farbkreis direkt gegenüberliegt – eine Farbtondrehung von 180°. Blau und Orange, Rot und Grün sowie Gelb und Violett sind Komplementärpaare. Nebeneinander gestellt erzeugen sie den stärkstmöglichen Kontrast, wodurch jede Farbe intensiver wirkt; deshalb sind Komplementärpaare beliebt für Handlungsaufforderungen, Akzente und alles, was hervorstechen soll. Dieser Generator findet ein Komplement, indem er den Farbton deiner Grundfarbe nimmt und 180° addiert.
Wie erstellt man eine Farbpalette?
Beginne mit einer Grundfarbe, die dir gefällt, und leite den Rest über farbtheoretische Beziehungen ab, statt zu raten. Wähle eine Harmonie, die zur Stimmung passt: analoge oder monochromatische Schemata wirken ruhig und einheitlich, während komplementäre, triadische und geteilt-komplementäre Schemata Kontrast und Energie hinzufügen. Halte Sättigung und Helligkeit konsistent, damit die Farben wie ein Satz wirken, und beschränke dich auf eine Handvoll Farben plus Neutraltöne. Dieses Werkzeug automatisiert diesen Prozess – gib eine Grundfarbe ein, und es erzeugt sechs fertige Paletten, die du als HEX, RGB, HSL, CSS-Variablen oder Tailwind-Konfiguration kopieren kannst.
Was ist ein triadisches Farbschema?
Ein triadisches Farbschema verwendet drei Farben, die gleichmäßig um den Farbkreis verteilt sind, 120° voneinander entfernt – zum Beispiel Rot, Blau und Gelb. Triadische Paletten sind lebendig und kontrastreich und wirken dennoch ausgewogen, weil die drei Farbtöne gleich weit voneinander entfernt sind. Ein verbreiteter Ansatz ist, eine Farbe dominieren zu lassen und die beiden anderen als Akzente zu verwenden. In diesem Generator ist die triadische Palette deine Grundfarbe plus die Farbtöne bei +120° und +240°.
Was ist ein analoges Farbschema?
Ein analoges Farbschema verwendet Farben, die auf dem Farbkreis nebeneinander liegen, typischerweise innerhalb von etwa 30° des Grundfarbtons – etwa Blau, Blaugrün und Grün. Weil die Farbtöne so nah beieinander liegen, wirken analoge Paletten glatt, natürlich und harmonisch, weshalb sie so oft in der Natur vorkommen (Sonnenuntergänge, Laub, das Meer). Sie haben weniger Kontrast als komplementäre Schemata, daher hilft es, eine Farbe dominieren zu lassen. Dieses Werkzeug baut eine analoge Palette aus den Farbtönen bei −30°, der Grundfarbe und +30°.
Verwandte Design- & Farbwerkzeuge
Der Paletten-Generator passt hervorragend zum Farbkonverter, um jedes Farbfeld zwischen HEX, RGB, HSL, HSV und CMYK zu übersetzen, zum Kontrast-Prüfer, um sicherzustellen, dass deine gewählten Farben lesbar und WCAG-konform sind, zum CSS-Verlaufsgenerator, um Palettenfarben zu sanften Hintergründen zu mischen, und zum Seitenverhältnis-Rechner für den Rest deines Design-Workflows.