So nutzt du den Farbpaletten-Generator

Dieser kostenlose Farbpaletten-Generator verwandelt eine einzelne Startfarbe mithilfe klassischer Berechnungen der Farblehre in ein vollständiges, harmonisches Schema. Wähle eine Basisfarbe über den Farbkreis, den Farbton-Regler oder durch Eingabe eines Hex-Codes und entscheide dich dann für eine Harmonieregel, um sofort eine passende Farbauswahl zu sehen. Jede Farbfläche lässt sich mit einem Klick in die Zwischenablage kopieren und direkt in CSS, Tailwind, Figma oder ein beliebiges Design-Tool einfügen.

• Wähle eine Basisfarbe — ziehe den Punkt auf dem Farbkreis, bewege den Farbton-Regler, tippe einen sechsstelligen Hex-Wert ein oder nutze die native Farbauswahl in der oberen Leiste.
• Wähle eine Harmonieregel — öffne das Dropdown „Farbharmonie“ und wähle die gewünschte Beziehung (komplementär, analog, triadisch und mehr).
• Kopiere deine Farben — fahre mit der Maus über eine Farbfläche im Palettenstreifen, um ihren Hex-Code einzublenden, und klicke dann zum Kopieren.
• Prüfe die Barrierefreiheit — nutze den integrierten WCAG-Kontrastprüfer oben, um sicherzustellen, dass deine Text- und Hintergrundfarben lesbar sind.
• Entdecke Variationen — durchstöbere das Raster „Alle Harmoniepaletten“, um jede Regel für deine Basisfarbe zu vergleichen, oder starte mit einer der kuratierten Paletten.

Die sieben Farbharmonieregeln

Farbharmonien beschreiben, wie Farbtöne im Farbkreis zueinander stehen. Jede Regel erzeugt eine andere Stimmung und einen anderen Kontrastgrad:

• Komplementär — zwei direkt gegenüberliegende Farbtöne (180° auseinander). Maximaler Kontrast und Energie; ideal für Handlungsaufforderungen.
• Analog — benachbarte Farbtöne (etwa 30° auseinander). Ruhig, stimmig und natürlich wirkend.
• Triadisch — drei gleichmäßig im Abstand von 120° verteilte Farbtöne. Lebendig und dennoch ausgewogen.
• Geteilt-komplementär — eine Basisfarbe plus die beiden Farbtöne, die ihr Komplement flankieren. Starker Kontrast mit weniger Spannung als reines Komplementär.
• Tetradisch — vier Farbtöne, die ein Rechteck im Farbkreis bilden. Reichhaltig und vielfältig; funktioniert am besten mit einer dominanten Farbe.
• Quadratisch — vier gleichmäßig im Abstand von 90° verteilte Farbtöne. Kräftig und ausgewogen mit gleichem visuellem Gewicht.
• Monochromatisch — ein einzelner Farbton in unterschiedlicher Helligkeit und Sättigung. Elegant, klar und einfach anzuwenden.

Farbkontrast für Barrierefreiheit prüfen

Eine schöne Palette muss auch lesbar sein. Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse zwischen Text und Hintergrund: 4.5:1 für normalen Fließtext und 3:1 für großen Text, um den AA-Standard zu erfüllen, sowie 7:1 für den strengeren AAA-Standard. Der Kontrastprüfer auf dieser Seite berechnet das exakte Verhältnis zwischen zwei beliebigen Farben und zeigt an, ob sie AA oder AAA bestehen, sodass du deine Palette anpassen kannst, bevor sie live geht.

Häufig gestellte Fragen

Ist der Farbpaletten-Generator kostenlos?

Ja. Das Tool ist für private und kommerzielle Projekte vollständig kostenlos und erfordert keine Anmeldung.

Welche Farbformate werden unterstützt?

Du kannst Farben als Hex-Codes eingeben und kopieren, und jede erzeugte Farbe wird aus ihren zugrunde liegenden HSL- und RGB-Werten berechnet.

Welche Harmonieregel sollte ich verwenden?

Nutze komplementär oder geteilt-komplementär für auffällige Akzente, analog oder monochromatisch für ruhige und stimmige Oberflächen sowie triadisch oder quadratisch, wenn du ein reichhaltigeres, mehrfarbiges Schema brauchst.