Farbpaletten-Extraktor

Wenn ein Referenzfoto, das Logo eines Kunden oder ein Moodboard eintrifft und Sie die Farben als exakte HEX-Werte brauchen, ist das Abgreifen mit der Pipette mühsam und subjektiv. Dieser Farbpaletten-Extraktor analysiert das gesamte Bild und liefert die dominanten Farben, jeweils mit HEX-Code, RGB-Wert und Flächenanteil, sortiert von der häufigsten zur seltensten. Ein schneller erster Schritt für Designerinnen und Designer, die Markenfarben übernehmen, für Entwickler, die ein Theme aus einem Entwurf bauen, und für alle, die wissen wollen, aus welchen Farben ein Bild tatsächlich besteht.

So wird die Palette berechnet

Das Tool nutzt Median Cut, ein klassisches Verfahren der Farbquantisierung. Es sammelt eine Stichprobe von Pixeln in einer Gruppe und teilt dann wiederholt die Gruppe mit dem größten Farbumfang entlang ihres dominanten Kanals (Rot, Grün oder Blau) am Median, bis die gewünschte Anzahl an Gruppen erreicht ist. Die Farbe jeder Gruppe ist der Mittelwert ihrer Pixel, und der Prozentwert gibt an, welcher Anteil der Stichprobe in diese Gruppe gefallen ist.

Daraus folgen zwei Dinge. Erstens ist eine Palettenfarbe ein Mittelwert und muss keinem einzelnen Pixel exakt entsprechen. Bei Fotos steht sie für einen Bereich, nicht für einen Punkt. Zweitens messen die Prozentwerte Fläche, nicht visuelle Bedeutung: Ein kleines rotes Logo auf einer großen weißen Seite ergibt Weiß ganz oben und Rot weit unten, bei wenigen Farben eventuell gar nicht.

So extrahieren Sie Farben aus einem Bild

1. Legen Sie ein PNG-, JPG-, WebP-, BMP-, TIFF- oder AVIF-Bild ab, oder mehrere Bilder für die Stapelverarbeitung.
2. Wählen Sie die Anzahl der Farben: 4, 6 (Standard), 8 oder 12.
3. Passen Sie bei Bedarf Max samples und Ignore alpha below an (siehe unten).
4. Klicken Sie auf Extract Palette. Bei einem Bild erhalten Sie ein Raster mit Farbfeldern samt HEX, RGB und Prozentwert sowie die komplette Palette als formatiertes JSON zum Markieren und Kopieren.
5. Bei mehreren Bildern erscheint stattdessen eine Übersichtstabelle, exportierbar als CSV oder JSON.

Die Optionen im Detail

• Farbanzahl: 4 ergibt eine kompakte Palette im Stil einer Markenfarbwelt, 6 ist ein ausgewogener Standard, 8 und 12 holen Nebentöne und Akzente heraus. Enthält ein Bild weniger unterschiedliche Farben als gewünscht (etwa ein zweifarbiges Logo), erhalten Sie weniger Farbfelder statt Duplikate.
• Max samples: die maximale Zahl analysierter Pixel, von 100 bis 1.000.000, Standard 50.000. Bei großen Bildern liest das Tool jeden n-ten Pixel gleichmäßig über das ganze Bild. Der Standard reicht für Fotos. Erhöhen Sie den Wert bei sehr großen Bildern mit kleinen, wichtigen Farbflächen, senken Sie ihn, wenn viele große Dateien schnell durchlaufen sollen.
• Ignore alpha below: Pixel, deren Deckkraft (Alpha, 0 bis 255) unter diesem Wert liegt, werden übersprungen, Standard 16. So taucht der transparente Hintergrund eines PNG-Logos nicht als schwarzes Farbfeld auf. Mit 0 zählen alle Pixel, mit einem höheren Wert fallen auch halbtransparente Kanten weg.

Was Sie mit dem Ergebnis anfangen

Jede Farbe kommt als Objekt mit hex (in Großbuchstaben, etwa #1E40AF), rgb als Array aus drei Zahlen und percentage auf zwei Nachkommastellen gerundet. Dieses JSON lässt sich leicht in CSS Custom Properties, ein Tailwind-Theme, Design Tokens oder eine Diagramm-Farbskala übertragen. Für HSL oder andere Schreibweisen eines HEX-Werts nutzen Sie den Farbkonverter.

• Markenfarben übernehmen: die exakten Farben aus dem bestehenden Logo oder Verpackungsfoto eines Kunden ziehen, bevor Sie seine Website neu bauen.
• Theme aus Bildmaterial: ein UI-Theme oder eine Folienvorlage passend zu einem Hero-Foto entwickeln.
• Moodboards: Inspirationsbilder in konkrete Farbfelder verwandeln, die Sie im Team teilen.
• Stapelprüfung: einen Ordner mit Produktfotos oder Thumbnails durchlaufen lassen und die dominanten Farben in einer CSV vergleichen, etwa um die Einheitlichkeit einer Serie zu prüfen.
• Barrierefreiheit: Hintergrund- und Textfarben eines Screenshots bestimmen, bevor Sie den Kontrast prüfen.

Stapelverarbeitung und Export

Bei mehr als einem Bild wird jede Datei mit denselben Einstellungen verarbeitet, und die Ergebnisse erscheinen in einer Tabelle: Dateiname, Status, dominante Farbe (der HEX-Wert der größten Gruppe) und Anzahl gefundener Farben. Export CSV schreibt diese Spalten plus eine eventuelle Fehlermeldung, praktisch für Tabellenkalkulationen. Export JSON schreibt dieselben Zeilen inklusive der vollständigen Palette jeder Datei, bereit für ein Skript. Scheitert ein Bild beim Dekodieren, laufen die übrigen trotzdem durch, und der Fehler steht in der jeweiligen Zeile.

Tipps für bessere Paletten

• Erst zuschneiden: Zählt nur ein Teil des Bildes (ein Logo auf einem Foto, ein Produkt auf einem Tisch), schneiden Sie mit dem Tool zum Zuschneiden und Drehen zu, damit der Hintergrund die Palette nicht dominiert.
• Mehr Farben bei Fotos: Natürliche Bilder haben Verläufe. 8 oder 12 Farben erfassen Akzente, die bei 4 Farben im Mittelwert verschwinden.
• Weniger Farben bei Logos und Flächen: 4 Farben liefern meist sauber die echten Markenfarben.

Im Vergleich zu Pipette und Designsoftware

Die Pipette in Photoshop, Figma oder den Entwicklertools des Browsers liefert die exakte Farbe eines Pixels, den Sie auswählen, ideal, wenn Sie wissen, wohin Sie klicken. Dieser Extraktor beantwortet eine andere Frage: Welche Farben dominieren das gesamte Bild, und in welchem Verhältnis? Beides ergänzt sich. Extrahieren Sie die Palette hier und greifen Sie zur Pipette, wenn Sie den Wert eines bestimmten Pixels brauchen.

Ihre Bilder bleiben privat

Die Extraktion läuft im Browser-Tab mit Rust-Code, der zu WebAssembly kompiliert ist. Das Bild wird lokal dekodiert und analysiert, keine Anfrage schickt es an einen Server. Das ist wichtig bei unveröffentlichten Produktfotos, Markenmaterial von Kunden unter Geheimhaltung oder privaten Fotos. Weil nichts an Dritte geht, braucht es auch keinen Auftragsverarbeitungsvertrag nach DSGVO. Prüfen können Sie das im Netzwerk-Tab der Entwicklertools oder indem Sie nach dem Laden der Seite offline gehen.

Häufige Fragen

Wie bekomme ich die HEX-Codes der Farben eines Bildes?

Bild ablegen, Farbanzahl wählen und auf Extract Palette klicken. Jedes Farbfeld zeigt seinen HEX-Code, und der JSON-Block listet alle Werte zum Kopieren.

Warum kommt eine Palettenfarbe in meinem Bild gar nicht vor?

Jede Palettenfarbe ist der Mittelwert einer Gruppe ähnlicher Pixel. Bei Fotos mit Verläufen kann dieser Mittelwert ein Ton sein, den kein einzelner Pixel exakt hat.

Warum erhalte ich weniger Farben als ausgewählt?

Das Bild enthält nicht genug unterschiedliche Farben für weitere Teilungen. Ein zweifarbiges Logo kann keine zwölf sinnvollen Farbfelder liefern.

Zählt der transparente Hintergrund meines PNG mit?

Nein, standardmäßig werden Pixel mit einem Alphawert unter 16 ignoriert. Setzen Sie Ignore alpha below auf 0, wenn sie mitzählen sollen.

Was bedeutet der Prozentwert?

Den Anteil der analysierten Pixel, die zu dieser Farbgruppe gehören. Alle Farben zusammen ergeben etwa 100.

Werden meine Bilder hochgeladen?

Nein. Alles läuft lokal im Browser. Nichts wird an einen Server gesendet oder dort gespeichert.