Farbpaletten-Generator

Erstelle aus einer Farbe eine harmonische Palette: komplementär, analog, triadisch, monochrom, plus Abstufungen von 50 bis 950. Export als CSS, SCSS, Tailwind.

Kostenlos
Ohne Anmeldung
Kein Datei-Upload
Windows, Mac, Android, iPhone

Werkzeug wird geladen…

Über dieses Werkzeug

Finde aus einer einzigen Farbe passende Farben: sechs Harmonien (komplementär, analog, triadisch, geteilt komplementär, tetradisch, monochrom) und eine vollständige Abstufung von 50 bis 950 wie bei Tailwind. Ein Klick kopiert einen Farbcode; die Palette lässt sich als CSS-Variablen, SCSS, Tailwind oder JSON sowie als Bild exportieren.

Wann es hilft

Markenfarben eines Projekts

Aus der Farbe eines Logos liefert die komplementäre Harmonie eine Akzentfarbe für Buttons und Links.

Designsystem

Die Abstufung von 50 bis 950 liefert alle nötigen Töne für Hintergründe, Ränder, Hover-Zustände und Text, mit einheitlichen Namen.

Präsentationen und Dokumente

Eine analoge oder monochrome Palette macht Diagramme und Folien mühelos harmonisch.

So funktioniert's

Wähle deine Grundfarbe (oder eine zufällige).
Wähle eine Harmonie und tippe eine Farbe an, um ihren Code zu kopieren.
Kopiere die Palette als CSS-Variablen, SCSS, Tailwind oder JSON.

So funktioniert es

Die Farben werden in HSL (Farbton, Sättigung, Helligkeit) berechnet: Das Werkzeug dreht den Farbton der Grundfarbe gemäß der gewählten Harmonie und passt die Helligkeit für helle und dunkle Varianten an.

Die Abstufung behält Farbton und Sättigung der Grundfarbe und legt die Helligkeit jeder Stufe fest (97 % für 50, 14 % für 950), mit leicht reduzierter Sättigung an den Enden – wie bei handgemachten Paletten.

Tipps für beste Ergebnisse

Wende die 60-30-10-Regel an: eine dominante Farbe, eine Sekundärfarbe, eine Akzentfarbe.
Behalte eine kräftige Farbe für Aktionen (Buttons) und ruhige Farben für den Rest vor.
Prüfe den Textkontrast auf jeder Hintergrundfarbe, bevor du sie übernimmst.
Benenne Farben nach ihrer Rolle (primär, Akzent) statt nach ihrem Farbton.

Häufige Probleme und Lösungen

Die Farben wirken stumpf

Deine Grundfarbe ist wenig gesättigt: Wähle eine kräftigere Basis, die Harmonien übernehmen sie.

Dunkles Gelb wird braun

Das ist normal: Abgedunkeltes Gelb wird braun. Verschiebe den Farbton für dunkle Gelbtöne leicht Richtung Orange.

Kopieren funktioniert nicht

Manche Browser sperren die Zwischenablage außerhalb von HTTPS oder ohne direkten Klick; nutze die Codeblöcke.

Häufige Fragen

Was ist eine Farbharmonie?

Eine Regel zur Farbwahl auf dem Farbkreis: gegenüberliegend (komplementär), benachbart (analog), im 120°-Abstand (triadisch)… Diese Kombinationen gefallen dem Auge und werden seit Jahrhunderten in der Malerei genutzt.

Wofür sind die Abstufungen 50 bis 950?

Sie staffeln deine Farbe vom hellsten zum dunkelsten Ton, wie die Paletten von Tailwind CSS: 50 für Hintergründe, 500 für die Hauptfarbe, 900 für Text.

Wie nutze ich die Palette auf meiner Website?

Kopiere die CSS-Variablen (--primary-500…) in dein Stylesheet oder die Tailwind-Konfiguration in tailwind.config.js.

Sind die Farben barrierefrei?

Der Text auf den Farbfeldern wechselt automatisch zu Schwarz oder Weiß für den besten Kontrast. Prüfe deine Text-Hintergrund-Paare mit dem Kontrastprüfer.

Immer noch ein Problem?

Frag im Forum: Kategorie, Werkzeug, Datenblatt deines Geräts und Testergebnis werden automatisch ausgefüllt.