Farbpaletten-Generator
Harmonische Farbschemata oder die Palette aus Ihrem Bild
Leertaste für neue Palette · Farbe anklicken für Details · ⧉ kopiert · 🔒 hält eine Farbe fest
Abstufungen von #7C3AED
Farbpalette kostenlos erstellen
Farbharmonien, Paletten aus Fotos und fertige Farbcodes
Wählen Sie eine Grundfarbe, und der Generator erstellt eine fünffarbige Palette nach den klassischen Harmonien des Farbkreises: analog (benachbarte Farbtöne), monochrom (ein Farbton in mehreren Helligkeiten), komplementär (gegenüberliegende Farbtöne), Split-Komplementär, triadisch und tetradisch. Mit der Leertaste oder „Neue Palette“ entstehen neue Ideen; Farben, die Ihnen gefallen, lassen sich sperren. Im Modus „Aus Bild“ extrahieren Sie die dominanten Farben eines Fotos, Logos oder Screenshots. Jede Farbe zeigt HEX, RGB und HSL sowie einen WCAG-Kontrastwert für schwarze oder weiße Schrift; ein Klick kopiert sie. Für die gewählte Farbe entsteht eine 10-stufige Skala (50–900), und die ganze Palette lässt sich als CSS-Variablen oder HEX-Liste kopieren oder als PNG herunterladen. Bilder werden im Browser analysiert und nie hochgeladen.
Funktionen
6 Harmonieregeln
Analog, komplementär, triadisch und mehr
Palette aus Bild
Dominante Farben jedes Fotos
Sperren & mischen
Favoriten behalten, Rest neu erzeugen
Kontrastprüfung
WCAG-Verhältnis für Text auf jeder Farbe
Grundlagen der Farbharmonie
Harmonieregeln
- Analog: Farbtöne innerhalb ±30° – ruhig und stimmig
- Komplementär: 180° gegenüber – starker Kontrast
- Split-Komplementär: Grundfarbe + die beiden Nachbarn der Gegenfarbe (±150°)
- Triadisch: drei Farbtöne im Abstand von 120° – lebendig, aber ausgewogen
- Tetradisch: vier Farbtöne im Abstand von 90° – reich, eine Farbe dominieren lassen
Praxistipps
- 60-30-10-Regel: 60 % Hauptfarbe, 30 % Nebenfarbe, 10 % Akzent
- Fließtext braucht mindestens 4,5:1 Kontrast (WCAG AA)
- Großer Text (≥24 px oder 18,5 px fett) braucht 3:1
- Skalen 50–900 eignen sich als Design-Tokens (Tailwind-Stil)
Häufig gestellte Fragen
Wie erstelle ich eine Farbpalette?
Wählen Sie eine Grundfarbe (z. B. Ihre Markenfarbe) und eine Harmonieregel; der Generator berechnet die passenden Farben im Farbkreis. Sperren Sie Farben, die Ihnen gefallen, und mischen Sie den Rest mit der Leertaste neu.
Wie bekomme ich die Farbpalette eines Bildes?
Wechseln Sie zu „Aus Bild“ und ziehen, fügen Sie ein oder wählen Sie ein Bild. Das Tool gruppiert ähnliche Pixel (k-Means-Clustering) und zeigt die sechs dominanten Farben, häufigste zuerst.
Was bedeutet „Aa 7.2 · AAA“?
Das ist das Kontrastverhältnis zwischen der Farbe und der besser lesbaren Schrift (schwarz oder weiß). WCAG AA verlangt 4,5:1 für normalen Text, AAA 7:1.
Wie nutze ich die Palette in CSS?
Klicken Sie auf „CSS-Variablen kopieren“, um einen :root-Block mit --color-1 … --color-5 zu erhalten, fügen Sie ihn ins Stylesheet ein und verwenden Sie var(--color-1).
Was sind Komplementärfarben?
Farben, die sich im Farbkreis gegenüberliegen, etwa Blau und Orange oder Violett und Gelb. Sie erzeugen starken Kontrast und eignen sich gut für Call-to-Action-Buttons.
Wird mein Bild hochgeladen?
Nein. Das Bild wird verkleinert und im Browser per Canvas analysiert; nichts wird an einen Server gesendet.