Farbpaletten-Generator
Farben aus einem Bild extrahieren oder Harmonien bauen.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Klicken Sie auf eine Farbe, um ihren Code zu kopieren
Eine professionelle Palette in Sekunden
Jede visuelle Identität beginnt mit einer Palette. Zwei Wege führen dorthin: von einem Bild ausgehen, das die gewünschte Stimmung trägt (Foto, Moodboard, Screenshot), und seine dominanten Farben extrahieren — oder von einer Markenfarbe ausgehen und ihre Harmonien nach der Farbtheorie aufbauen.
-
Bild → Palette
Bild ablegen: Der k-Means-Algorithmus gruppiert die Pixel und zeigt die 6 dominanten Farben mit ihrem Gewicht.
-
Farbe → Harmonien
Grundfarbe wählen: Komplementär, Analog, Triade und Abstufungen entstehen sofort.
-
Exportieren
Auf eine Farbe klicken, um ihren Code zu kopieren, oder den ganzen CSS-Variablen-/Tailwind-Block übernehmen.
Die Harmonien im Überblick
| Harmonie | Aufbau | Wirkung |
|---|---|---|
| Komplementär | 2 Farben im 180°-Abstand | Maximaler Kontrast, Energie |
| Analog | 3 Farben bei ±30° | Weichheit, natürliche Kohärenz |
| Triadisch | 3 Farben im 120°-Abstand | Lebendige, farbenfrohe Balance |
| Abstufungen | Gleicher Ton, 5 Helligkeiten | Monochrome Tiefe, Hierarchie |
Die 60-30-10-Regel: rund 60 % Dominante, 30 % Sekundärfarbe, 10 % Akzent. Prüfen Sie auch den Text-/Hintergrund-Kontrast mit unserem WCAG-Prüfer.
Häufige Fragen
Wie werden die Farben aus dem Bild extrahiert?
Mit einem k-Means-Clustering-Algorithmus, der in Ihrem Browser läuft: Die Pixel werden in 6 Familien ähnlicher Farben gruppiert, und das Zentrum jeder Familie wird zu einer Palettenfarbe, sortiert nach Bedeutung (Anteil am Bild).
Was ist eine Komplementärfarbe?
Die Farbe, die auf dem Farbkreis genau gegenüberliegt (180°). Das Duo erzeugt den stärksten Kontrast: ideal, um einen Call-to-Action-Button vom Hintergrund abzuheben.
Analog, triadisch: Wann einsetzen?
Analoge Farben (±30°) ergeben weiche, stimmige Stimmungen — perfekt für Hintergründe. Die Triade (3 Farben im 120°-Abstand) bietet lebendige Balance: eine Dominante, zwei Akzente.
Wie nutze ich den CSS-Export?
Der erzeugte Block enthält CSS-Variablen (--color-1, --color-2…) für Ihr :root sowie das Tailwind-Äquivalent. Benennen Sie die Variablen nach Rolle um (--primary, --accent…) für lesbareren Code.
Wird mein Bild irgendwohin gesendet?
Nein: Die k-Means-Analyse läuft vollständig im Browser auf einer Miniatur des Bildes. Nichts wird übertragen, auch bei großen Fotos nicht.