Farbpalette aus Bild
Extrahiere Farbpaletten aus jedem Bild — erhalte HEX-, RGB-, HSL-Codes und exportiere als CSS-Variablen, Tailwind, JSON oder PNG. 100% clientseitig, kein...
Aktualisiert Mai 2026
Geprüft von Rafael Duarte
So extrahierst du eine Farbpalette aus einem Bild
Vom Foto zum fertigen HEX-Code in Sekunden
1. Bild hochladen
Ziehe eine JPG-, PNG-, WebP-, GIF- oder SVG-Datei ins Feld oder füge die URL eines öffentlich erreichbaren Bildes ein.
2. Anzahl der Farben festlegen
Wähle zwischen 3 und 12 Farbtönen — für die meisten Paletten reichen 6 völlig aus.
3. Kopieren oder exportieren
Klicke auf ein Farbfeld, um den HEX-Wert zu kopieren, oder exportiere als CSS, Tailwind, JSON oder DESIGN.md.
Was dieser Farbpaletten-Generator kann
K-Means-Clustering statt grauem Mischton
Clustering statt Mittelwertbildung
K-Means gruppiert Pixel nach tatsächlicher visueller Ähnlichkeit — kein verwaschener Durchschnitt aus allen Bildpunkten.
K-Means++ als Startpunkt
Durch klügere Ausgangswerte liefert die Analyse bei wiederholten Läufen mit demselben Bild stabile, reproduzierbare Ergebnisse.
Fünf Exportformate
CSS-Variablen, Tailwind-Konfiguration, JSON, DESIGN.md und eine PNG-Karte mit allen Farbfeldern zum Teilen.
Läuft komplett im Browser
Die Analyse passiert lokal über die Canvas API — private Fotos und Markenmaterial verlassen dein Gerät nie, es gibt keinen Upload zu einem Server.
Tastaturkürzel für den Export
Shift+Enter kopiert überall auf der Seite den Inhalt des aktiven Export-Tabs, ganz ohne die Hände von der Tastatur zu nehmen.
Fertige Rollennamen im DESIGN.md-Export
Jede exportierte Farbe bekommt in DESIGN.md automatisch eine semantische Rolle (primary, secondary, accent, neutral …) zugewiesen — direkt als Design-Token nutzbar, ohne manuelles Umbenennen.
Anwendungsbeispiele
Wofür du dieses Tool brauchst
Die häufigsten Einsatzszenarien
Markenidentität aus dem Logo
Extrahiere 4–6 Farben und dokumentiere den exakten HEX-Wert für dein Brand-Manual oder deine Figma-Bibliothek.
Webdesign und Frontend-Entwicklung
Exportiere direkt als extend.colors-Block für Tailwind, ohne Farbtöne manuell im Color-Picker auszuwählen.
Fotografie und Moodboards
Ermittle die exakte Farbstimmung eines Referenzfotos für Bearbeitung, Shooting-Planung oder Präsentation.
Innenarchitektur und Materialauswahl
Lies präzise Farbwerte aus einem Raumfoto aus, um Wandfarben oder Stoffe passend zum RAL-System auszuwählen.
Einheitlicher Look in Social Media
Extrahiere die Palette deiner erfolgreichsten Beiträge, damit dein Instagram- oder TikTok-Feed visuell konsistent bleibt.
Häufige Fehler
Dominante Farbe mit Durchschnittsfarbe verwechseln
Die dominante Farbe entsteht durch Clustering der optisch auffälligsten Bereiche; der Durchschnitt ist eine rein mathematische Mischung aller Pixel und ergibt oft einen unbrauchbaren Grauton.
Zu kleines Bild verwenden
Für zuverlässige Ergebnisse mindestens 200×200 Pixel verwenden — bei geringerer Auflösung hat das Clustering zu wenig Datenbasis.
Zu viele Farben für ein einfaches Logo anfordern
4–6 Farben decken fast jede Markenidentität ab — bei 12 Farben schleichen sich oft Antialiasing-Artefakte oder Schattierungen als irrelevantes Rauschen ein.
Bild-URL wird durch CORS blockiert
Nicht jeder Server erlaubt das Auslesen von Pixeln aus dem Browser über Domaingrenzen hinweg. Schlägt die Extraktion per URL fehl, Bild herunterladen und direkt als Datei hochladen.
Transparenten Hintergrund als Farbe erwarten
Transparente Pixel werden beim Clustering ignoriert — ein PNG mit großem transparentem Bereich liefert dadurch weniger Farbvarianten als erwartet.
Warum diesen Farbpaletten-Generator nutzen
K-Means schlägt einfachere Verfahren wie Median-Cut, weil es Farbcluster findet, die perceptuell tatsächlich zusammengehören — statt das Farbspektrum willkürlich in gleich große Blöcke zu zerlegen.
Die Analyse läuft in Millisekunden direkt im Browser über die Canvas API. Es gibt keinen Upload zu einem Server, keine Registrierung und kein Nutzungslimit — ein Vorteil gerade bei Markenmaterial oder Kundenfotos, bei denen Datenschutz nach DSGVO eine Rolle spielt.
Der Export nach DESIGN.md ist im deutschsprachigen Raum kaum irgendwo zu finden: Jede Farbe bekommt sofort eine semantische Rollenbezeichnung (primary, secondary, accent …), sodass sie ohne Umwege als Design-Token in Code-Assistenten wie Claude Code oder Cursor landet.
Dominante Farbe vs. Durchschnittsfarbe
Warum die Extraktionsmethode den Unterschied macht
Häufige Fragen
Bild hochladen — die Extraktion läuft zu 100 % im Browser per K-Means-Clustering und liefert die dominanten Farben in Millisekunden als HEX, RGB und HSL, ganz ohne Registrierung.
Weiterführende Links
Dokumentation der Canvas API, die für die Pixelverarbeitung im Browser genutzt wird.
Erklärung des K-Means-Clustering-Verfahrens und seiner Anwendung in der Farbquantisierung.
Der in Deutschland, Österreich und der Schweiz gebräuchliche Farbstandard für Lacke, Wandfarben und Materialien — relevant für Innenarchitektur und Produktdesign.
Verwandte Tools
- Farbpaletten-Generator Design Harmonische Farbpaletten aus jeder Basisfarbe generieren. Analogie, Komplementär, Triadisch oder Tetriadisch — als CSS-Variablen oder JSON exportieren.
- Farbkontrast-Prüfer Design Kostenloser Farbkontrast-Prüfer — WCAG 2.2 AA- und AAA-Konformität sofort prüfen. Live-Textvorschau, Farbenblindheit-Simulation und barrierefreie...
- Farbkonverter & Generator Design Farben zwischen HEX, RGB, HSL und CMYK sofort konvertieren. Kostenloser Online-Farbwähler mit WCAG-Kontrastprüfer und Palettengenerator.
- CSS Box Shadow Generator — Neumorphismus, Glasmorphismus & Tailwind Design Kostenloser CSS Box Shadow Generator mit Live-Vorschau. Erstelle Schatten, Neumorphismus- und Glasmorphismus-Effekte. Exportiere zu CSS, Tailwind oder CSS-Variablen.
- CSS Flexbox Generator Design Kostenloser CSS Flexbox Generator: Live-Vorschau, Tailwind & CSS gleichzeitig, 10 Layout-Vorlagen, kontextuelle Warnungen und React/JSX-Export. Keine Anmeldung.
