HandyTools Hub

Farbpaletten-Generator

Harmonische Farbschemata aus jeder Basisfarbe erstellen

Zurück zu den Tools

Der Farbpaletten-Generator verwandelt eine Grundfarbe in einen vollständigen, harmonischen Satz mithilfe klassischer Farbtheorie-Schemata: komplementär, analog, triadisch, tetradisch und monochromatisch. Wählen Sie die Farbe, auf die Ihr Design bereits ausgerichtet ist, entscheiden Sie sich für eine Harmonie und erhalten Sie HEX-Werte, bereit für CSS, ein Designwerkzeug oder einen Markenleitfaden. Er ist gedacht für Produktdesigner, die ein System aufbauen, Entwickler, die Hover- und Rahmenschattierungen passend zu einer Markenfarbe benötigen, und alle, die eine Palette wollen, die absichtlich und nicht zufällig wirkt.

Verwendung

  1. Grundfarbe festlegen. Fügen Sie einen HEX-Wert ein oder nutzen Sie den Farbwähler. Dies ist der Farbton, um den die gesamte Palette herum aufgebaut wird – meist Ihre primäre Markenfarbe.
  2. Ein Schema wählen aus den fünf Harmonien. Die Vorschau aktualisiert sich sofort, sodass der Vergleich der Schemata Sekunden dauert.
  3. Die Farbfelder zusammen prüfen. Betrachten Sie sie als Satz: Trennen sich die Akzente klar von der Grundfarbe, und gibt es genug Helligkeitsspannweite, um eine Oberfläche aufzubauen?
  4. Einen beliebigen HEX-Wert kopieren, indem Sie auf sein Farbfeld klicken – bereit zum Einfügen in CSS-Variablen oder ein Designwerkzeug.

Die fünf Harmonien und wann jede passt

Jedes Schema ist eine feste geometrische Beziehung auf dem Farbkreis, und diese Geometrie sagt voraus, wie das Ergebnis wirken wird.

  • Komplementär (180° entfernt). Zwei gegenüberliegende Farbtöne – maximaler Kontrast und Energie. Am besten als Grundfarbe plus ein kleiner Akzent, etwa eine Primärfarbe und ihre Handlungsaufforderung. Nutzt man das Paar über große Flächen, beginnt die Oberfläche zu flimmern.
  • Analog (innerhalb von etwa ±30°). Benachbarte Farbtöne, die natürlich ineinanderfließen. Die sicherste Wahl für Hintergründe, Illustrationen und ruhige, geschlossene Produkte. Das Risiko ist eine Palette ohne Akzent, der stark genug ist, den Blick zu ziehen.
  • Triadisch (120° entfernt). Drei gleichmäßig verteilte Farbtöne, ausgewogen und lebendig. Gut, wenn Sie eine eigenständige Identität mit mehr als einem Akzent möchten, und eine gängige Grundlage für verspielte Marken. Balancieren Sie sie, indem Sie einen Farbton dominieren lassen und die anderen beiden sparsam einsetzen.
  • Tetradisch (ein 90°-Rechteck). Vier Farbtöne, reich und abwechslungsreich. Am schwersten auszubalancieren – wählen Sie einen als Primärfarbe, nutzen Sie einen zweiten als Stütze und behalten Sie die übrigen zwei für kleine Highlights.
  • Monochromatisch (ein Farbton, variierende Helligkeit). Die zuverlässigste Palette: ein einziger Farbton in mehreren Helligkeits- und Sättigungsstufen. Hervorragend für Dashboards und minimalistische Oberflächen, wo sie Hierarchie erzeugt, ohne neue Farben einzuführen.

Praxisbeispiele

Beispiel 1 – eine Markenfarbe erweitern. Aus einem Markenblau #3B82F6 wird eine analoge Palette für eine Marketingseite: Die Grundfarbe bleibt für Schaltflächen und Links, hellere Nachbarn dienen als Abschnittshintergründe, und ein einzelner komplementärer Akzent markiert die primäre Handlungsaufforderung. Die Seite hat nun ein System statt einer wiederholten Farbe.

Beispiel 2 – UI-Zustandsschattierungen. Erzeugen Sie aus einer monochromatischen Palette fünf Helligkeitsstufen desselben Farbtons. Nutzen Sie die hellste für Hover-Hintergründe, den Mittenton für die Basisschaltfläche und den dunkelsten für den gedrückten Zustand. Weil sich der Farbton nie ändert, lesen sich die Zustände als ein Element unter verschiedenen Bedingungen – genau das, was Nutzer erwarten.

Beispiel 3 – ein Moodboard für eine Illustration. Eine Illustratorin, die eine Szene plant, wählt ein triadisches Set für eine lebhafte Komposition oder ein analoges Set für eine melancholische und heftet die Farbfelder neben die Leinwand, um das Farbdrehbuch über Panels hinweg konsistent zu halten.

Von der Palette zur barrierefreien Oberfläche

Eine Palette löst das ästhetische Problem; der Kontrast löst das der Lesbarkeit. Bevor Sie ein Schema übernehmen, testen Sie die Paare, die tatsächlich zusammen erscheinen: Fließtext auf dem Seitenhintergrund, Schaltflächenbeschriftung auf der Füllung und Linkfarbe gegen den umgebenden Text. WCAG verlangt ein Verhältnis von 4,5:1 für normalen Text und 3:1 für großen Text, und eine rein auf Farbtordrehung aufgebaute Palette kann beide leicht verfehlen. Der praktische Ablauf ist, die Palette zu erzeugen, dann speziell für Text eine abgedunkelte Variante des Akzents abzuleiten und diese Variante mit einem Kontrastprüfer zu verifizieren, statt anzunehmen, das gesättigte Original bestehe.

Häufige Fehler

  • Ein komplementäres Paar gleichgewichtig einsetzen. Zwei gegeneinander antretende Farben über eine ganze Seite zu verteilen ist anstrengend; lassen Sie eine dominieren und nutzen Sie die andere für Akzente.
  • Annehmen, Harmonie bedeute Barrierefreiheit. Farbbeziehung und Lesbarkeit sind verschiedene Probleme mit verschiedenen Werkzeugen.
  • Helligkeitsspannweite ignorieren. Eine Palette, die nahe 50 % Helligkeit bleibt, hat keinen Raum für Hintergründe und Rahmen; leiten Sie Tönungen und Schatten ab.
  • Eine vierte oder fünfte Farbe hinzufügen, wo zwei genügen. Jeder zusätzliche Farbton erhöht die Chance, dass die Oberfläche inkonsistent wirkt. Eine Grundfarbe plus ein Akzent deckt die meisten Produkte ab.
  • Dark Mode vergessen. Ein auf weiße Hintergründe abgestimmter Satz versagt oft auf dunklen; erzeugen Sie eine separate dunklere Palette, statt dieselben Werte wiederzuverwenden.

Funktionen

  • Fünf Harmonieschemata: komplementär, analog, triadisch, tetradisch, monochromatisch
  • Funktioniert mit jeder HEX-Grundfarbe, eingegeben oder visuell gewählt
  • Sofortige Vorschau der resultierenden Farbfelder nebeneinander
  • Klick zum Kopieren jedes HEX-Werts für CSS oder Designwerkzeuge
  • Im HSL-Raum berechnet für präzise Farbtonbeziehungen
  • Läuft vollständig im Browser ohne Konto

Anwendungsfälle

  • Webdesign: Eine Markenfarbe zu einer funktionierenden Palette erweitern.
  • Branding: Akzentfarben erkunden, die ein Logo stützen.
  • UI-Entwicklung: Hover-, Rahmen- und Deaktiviert-Schattierungen aus einem Farbton erzeugen.
  • Illustration: Ein Farbdrehbuch vor dem Malen planen.
  • Präsentationen: Folien mit einem kleinen definierten Satz visuell konsistent halten.

Verwandte Tools

Häufig gestellte Fragen

Welche Harmonie sollte ich für ein neues Projekt wählen?

Beginnen Sie mit analog oder monochromatisch, wenn Sie ein sicheres, professionelles Ergebnis möchten, und greifen Sie zu komplementär oder triadisch, wenn Sie einen kräftigen Akzent brauchen. Analoge Paletten bleiben in einem schmalen Farbtonband und wirken dadurch ruhig und geschlossen; monochromatisch hält einen einzigen Farbton und variiert die Helligkeit, was sich kaum falsch anfühlen kann. Komplementär und triadisch erzeugen kontrastreiche Akzente, die ideal für Handlungsaufforderungen sind, aber über eine ganze Oberfläche hinweg hart wirken können.

Warum arbeitet das Tool in HSL statt in RGB oder HEX?

Weil Harmonien geometrische Beziehungen auf dem Farbkreis sind und HSL genau diese Koordinaten offenlegt. Der Farbton ist der Winkel, die Sättigung der Abstand von Grau und die Helligkeit die Position zwischen Schwarz und Weiß. Den Farbton für ein triadisches Schema um 120 Grad zu drehen, ist in HSL eine saubere Operation, während das Äquivalent in RGB bis zu drei voneinander abhängige Kanäle transformieren müsste.

Warum wirken manche Paletten im Design stumpf?

Meistens, weil jede Farbe auf mittlerer Helligkeit liegt. Eine Palette aus fünf Farben, alle bei 50 % Helligkeit, liest sich flach; echte Oberflächen brauchen Spannweite. Sobald die Harmonie steht, erzeugen Sie aus jedem Farbton eine helle Tönung und einen dunklen Schatten und nutzen diese für Hintergründe, Rahmen und Hover-Zustände, während der gesättigte Mittenton für Akzente bleibt.

Erfüllen diese Paletten bereits die Kontrastanforderungen der Barrierefreiheit?

Nein – eine Harmonie garantiert, dass die Farben verwandt aussehen, nicht dass ein beliebiges Paar lesbar ist. Der Kontrast hängt vom Helligkeitsunterschied zwischen einer konkreten Textfarbe und einem konkreten Hintergrund ab, sodass ein komplementäres Grün und Rot visuell bestechend sein und dennoch WCAG deutlich verfehlen können. Prüfen Sie jedes Text-/Hintergrund-Paar mit einem Kontrastprüfer, bevor Sie ausliefern.

Kann ich eine Palette aus einem Foto oder einem vorhandenen Logo erzeugen?

Nehmen Sie die genaue Farbe ab, von der Sie starten möchten – ein Farbwähler kann sie aus einem Bild lesen –, und fügen Sie diesen HEX-Wert hier als Grundfarbe ein. Der Generator erweitert eine Startfarbe zu einem vollständigen Satz, was meist alles ist, was Sie brauchen, um aus einer einzigen Logofarbe markenkonsistente Schattierungen und Akzente aufzubauen.

Was ist der Unterschied zwischen einer monochromatischen und einer analogen Palette?

Eine monochromatische Palette verwendet einen einzigen Farbton und variiert nur Sättigung und Helligkeit, sodass alle Farben eindeutig verwandt wirken und sich ideal für Hierarchie ohne neue Farben eignen. Eine analoge Palette nutzt mehrere benachbarte Farbtöne innerhalb von etwa ±30 Grad, wodurch sie etwas lebendiger wirkt, aber weiterhin ruhig und zusammenhängend bleibt. Für ein Dashboard ist monochromatisch meist die sichere Wahl, für eine Illustration analog.

Geprüft vom HandyTools-Hub-Team · Zuletzt aktualisiert