Farben aus einem Bild extrahieren (Dominant-Farben-Extraktor)

Laden Sie ein Bild hoch, um automatisch die dominanten Farben zu extrahieren – die charakteristischen Farben, die in einem Foto oder einer Illustration verwendet werden. Die gesamte Verarbeitung erfolgt direkt im Browser; das Bild wird niemals an einen Server gesendet.

So extrahieren Sie Farben aus einem Bild

Wenn Sie wissen möchten, welche Farben in einem Foto, einer Illustration oder einem Logo besonders häufig vorkommen, ist es mühsam, jede Farbe einzeln mit einer Pipette aufzunehmen. Dieses Tool nimmt Ihnen diese Arbeit ab: Sie laden einfach ein Bild hoch, und das Tool listet automatisch die charakteristischen Farben (die sogenannten dominanten Farben) auf, die im Bild die größte Fläche einnehmen. HEX-Codes und RGB-Werte stehen sofort zum Kopieren bereit, sodass Sie sie direkt in CSS, Figma, Photoshop oder ein anderes Design-Werkzeug übertragen können.

Intern zeichnet das Tool das Bild auf ein Canvas-Element und liest daraus die Pixeldaten aus. Ähnliche Farbtöne werden zu groben Gruppen zusammengefasst (quantisiert), anschließend wird gezählt, wie oft jede Gruppe vorkommt, und die häufigsten Gruppen werden als repräsentative Farben ausgewählt. Transparente Bereiche eines PNG-Bilds werden bei dieser Zählung automatisch ausgeschlossen, sodass auch bei einem freigestellten Motiv mit durchsichtigem Hintergrund vor allem die Farben des Motivs selbst erfasst werden. Große Bilder werden vor der Analyse intern verkleinert, damit auch mehrere Megapixel große Fotos ohne spürbare Wartezeit verarbeitet werden können. Da die gesamte Berechnung im Browser stattfindet, verlassen Ihre Bilddaten zu keinem Zeitpunkt Ihr Gerät, was das Tool auch für vertrauliche Aufnahmen geeignet macht.

Schritt für Schritt: Farben aus einem Bild extrahieren

Bild hochladen Ziehen Sie eine Bilddatei per Drag & Drop in den markierten Bereich, oder klicken Sie darauf, um sie über den Dateiauswahldialog auszuwählen.
Anzahl der Farben festlegen Wählen Sie unter „Anzahl der zu extrahierenden Farben“ zwischen 4, 8 oder 12. Das Ergebnis wird sofort neu berechnet, ohne dass Sie das Bild erneut hochladen müssen.
Farbproben prüfen Die Farbproben werden nach Häufigkeit sortiert angezeigt. Zu jeder Probe erscheinen der zugehörige HEX-Code und die RGB-Werte.
HEX-Code kopieren Klicken Sie auf die Kopieren-Schaltfläche unter einer Farbprobe, um den HEX-Code in die Zwischenablage zu übernehmen und direkt in CSS oder einem Design-Werkzeug einzufügen.

Tipps für die Nutzung

Klicken Sie auf die Kopieren-Schaltfläche unter jeder Farbprobe, um den HEX-Code in die Zwischenablage zu kopieren – bereit zum Einfügen in CSS oder Ihr Design-Tool.
Wählen Sie 4, 8 oder 12 zu extrahierende Farben. 4 eignet sich für eine einfache Logo-Palette, 12 erfasst feine Farbnuancen in einem detailreichen Foto.
Transparente Bereiche in PNG-Bildern werden automatisch ausgeschlossen, sodass sich die extrahierten Farben auf das eigentliche Motiv statt auf den Hintergrund konzentrieren.
Die gesamte Verarbeitung läuft lokal im Browser über die Canvas-API – das Bild selbst wird niemals an einen Server gesendet, daher ist die Nutzung auch bei sensiblen Bildern sicher.
Die Farben werden von der häufigsten zur seltensten sortiert. Die zuerst angezeigten Farben nehmen die größte Fläche im Bild ein.

Anwendungsbeispiele

Farbkonzept aus einem Logo ableiten

Laden Sie ein vorhandenes Logo hoch, um die darin verwendeten Farben als HEX-Codes zu erhalten. Das hilft dabei, das Farbschema einer Website oder Präsentation konsequent an das Logo anzupassen.

Markenfarben aus Produktfotos ableiten

Indem Sie die charakteristischen Farben einer Verpackung oder eines Produktfotos ermitteln, gewinnen Sie eine fundierte Grundlage für die Wahl einer Unternehmens- oder Akzentfarbe für eine Kampagnenseite.

Farbverteilung von Illustrationen und Fotos einschätzen

Wechseln Sie zwischen 4 und 12 extrahierten Farben, um sowohl den groben Farbeindruck des gesamten Bilds als auch die feineren Farbnuancen im Detail zu erfassen.

Farben an CSS oder Design-Software übergeben

Kopieren Sie die extrahierten HEX-Codes und fügen Sie sie direkt als CSS-Variablen oder in die Farbwähler von Figma und Photoshop ein, ohne Farben manuell abtippen zu müssen.

Glossar

Dominante Farbe: Die Farbe, die in einem Bild die größte Fläche einnimmt oder am häufigsten vorkommt. Die Farbproben, die dieses Tool anzeigt, entsprechen genau diesen dominanten Farben.
HEX-Code: Eine Schreibweise, bei der die RGB-Anteile einer Farbe jeweils als zweistellige Hexadezimalzahl dargestellt werden, etwa „#3366cc“. Nach dem Rautezeichen folgen der Reihe nach Rot-, Grün- und Blauanteil. HEX-Codes werden in CSS und Design-Werkzeugen breit verwendet.
RGB-Wert: Eine Methode, Farben über die drei Grundfarben des Lichts – Rot, Grün und Blau – anzugeben, jeweils als Zahl zwischen 0 und 255. Aus der Kombination dieser drei Werte lässt sich nahezu jede Farbe darstellen.
Farbquantisierung: Ein Verfahren, das ähnliche Farbtöne zu einer kleineren Zahl von Gruppen zusammenfasst. Dieses Tool teilt jeden RGB-Kanal in Gruppen von 32 Einheiten ein, sodass geringfügige Farbabweichungen etwa durch JPEG-Kompression als dieselbe Farbe gezählt werden.
Alphawert (Transparenz): Ein Wert, der die Deckkraft eines einzelnen Bildpixels beschreibt. Bei durchsichtigen Bereichen eines transparenten PNG ist der Alphawert niedrig, weshalb solche Pixel bei der Farbzählung in diesem Tool ausgeschlossen werden.
Canvas-API: Eine JavaScript-Schnittstelle des Browsers zum Zeichnen und Auswerten von Bildern und Grafiken. Dieses Tool nutzt sie, um Bilder pixelweise auszulesen und Farben zu extrahieren, ohne die Daten an einen Server zu senden.

Häufig gestellte Fragen

Dieses Tool verwendet einen einfachen Algorithmus, der das Bild in grobe Farbgruppen quantisiert und die Durchschnittsfarbe der häufigsten Gruppe als repräsentative Farbe zurückgibt. Das reicht aus, um einen schnellen Eindruck vom Gesamtfarbton eines Bildes zu bekommen, ist aber nicht so präzise wie strengere Clustering-Verfahren (etwa k-means), die in professionellen Farbpaletten-Tools verwendet werden.

Nein. Dieses Tool verwendet die Canvas-API, um das Bild zu laden und die Farben vollständig im Browser (clientseitig) zu extrahieren. Die Bilddaten werden niemals an einen Server gesendet, daher ist die Nutzung auch bei sensiblen Bildern sicher.

Jedes gängige Bildformat, das ein -Tag im Browser anzeigen kann – darunter JPEG, PNG, WebP und GIF – sollte funktionieren, entsprechend den Formaten, die die Dateiauswahl Ihres Browsers akzeptiert.

Ja. Jede Farbe wird als HEX-Code angezeigt (z. B. #3366cc), den Sie mit einem Klick in die Zwischenablage kopieren können, um ihn direkt in Figma, Photoshop, CSS oder jedem anderen Tool einzufügen, das HEX-Farbwerte akzeptiert.

Übrigens – Die Arbeit, Markenfarben aus Fotos zu finden

Das Extrahieren der in einem Foto oder einer Produktverpackung verwendeten Farben ist eine alltägliche Aufgabe im Web- und Grafikdesign. Beim Erstellen der visuellen Richtlinien einer Marke beginnen Designer oft damit, repräsentative Farben aus vorhandenen Fotos oder Logos herauszuziehen, um sie dann als Kandidaten für eine Unternehmens- oder Akzentfarbe zu verwenden. Was früher mühsam mit einer Pipette Farbe für Farbe von Hand erledigt wurde, lässt sich heute mit Algorithmen wie der hier verwendeten Dominant-Farben-Extraktion automatisieren.

Es gibt viele Algorithmen zur Farbextraktion. Die von diesem Tool verwendete Methode aus Bucket-Quantisierung und Häufigkeitszählung rundet den RGB-Wert jedes Pixels auf eine grobe Gruppe und zählt, wie oft jede Gruppe vorkommt – eine einfache Technik, die rechnerisch günstig ist und schnell läuft. Fortgeschrittenere Ansätze wie k-means-Clustering gruppieren Farben anhand des Abstands im Farbraum und können natürlicher wirkende Gruppierungen erzeugen, allerdings auf Kosten eines höheren Rechenaufwands.

Interessant ist, wie unterschiedlich dasselbe Bild wirken kann, je nachdem, wie viele Farben extrahiert werden. Werden nur 4 Farben extrahiert, zeigt sich der grobe Farbton eines Bildes – ob es eher warm oder kühl wirkt –, während bei 12 Farben auch feine Unterschiede durch Schatten und Reflexionen erfasst werden. Durch Anpassen der Anzahl lassen sich aus demselben Bild unterschiedliche Detailgrade gewinnen.

Alle Wissenstexte ansehen