Farbpaletten-Extraktor

Ein Bild hochladen, um seine dominanten Farben zu extrahieren. HEX-Codes für jedes Farbfeld erhalten, mit einem Klick kopieren. Alles läuft in Ihrem Browser.

So funktioniert Farbpaletten-Extraktor

Color Palette Extractor analysiert Ihr Bild und identifiziert die visuell dominantesten Farben mithilfe eines k-Means-Clustering-Algorithmus, der gegen die Pixeldaten in einem Canvas ausgeführt wird. Das Ergebnis ist eine Reihe von Farbfeldern mit ihren HEX-Werten, die Sie einzeln kopieren können. Keine Bildbytes verlassen Ihren Browser; das Pixel-Sampling läuft lokal in einem Web Worker, sodass der Haupt-Thread reaktionsfähig bleibt.

Die Extraktion gruppiert die Hunderttausende einzelner Pixelfarben in eine kleinere Anzahl repräsentativer Cluster. Die Anzahl der Ausgabefarben ist konfigurierbar, sodass Sie eine knappe Palette von fünf Farben oder einen breiteren Satz von zwölf extrahieren können. Das ist nützlich, um schnell Markenfarben aus einem Logo zu ziehen, die dominanten Töne eines Fotos für ein Stimmungsbild zu identifizieren oder zu prüfen, welche Farben in einem von Nutzern hochgeladenen Bild vorkommen.

Verfasst von Bastien Sulyan

So wird Farbpaletten-Extraktor verwendet, Schritt für Schritt

Ziehen Sie Ihr Bild auf den Upload-Bereich oder klicken Sie, um zu suchen.
Legen Sie die Anzahl der zu extrahierenden Farben fest (typischerweise 5 bis 12).
Klicken Sie auf Extrahieren. Das Pixel-Clustering läuft lokal in einem Web Worker.
Betrachte die resultierenden Farbfelder und ihre HEX-Werte.
Klicken Sie auf ein Farbfeld, um seinen HEX-Code in die Zwischenablage zu kopieren.

Häufige Anwendungsfälle

Eine Designerin extrahiert die dominante Palette aus einem Markenfoto, um sicherzustellen, dass neue Marketingmaterialien zur bestehenden Farbgeschichte passen.
Ein Entwickler identifiziert die Hauptfarben in einem von Nutzern hochgeladenen Avatar, um dynamisch eine passende UI-Akzentfarbe zu generieren.
Eine Künstlerin erstellt ein Referenz-Stimmungsbild, indem sie Paletten aus mehreren Referenzbildern extrahiert und die extrahierten HEX-Codes vergleicht.
Ein Blogger zieht die fünf dominanten Töne aus einem Header-Foto, um passende Text- und Button-Farben für ein Beitragslayout zu wählen.

Häufig gestellte Fragen

Wie funktioniert der Farbextraktionsalgorithmus?

Das Tool liest alle Pixelwerte aus dem Bild über Canvas.getImageData(), reduziert sie für die Geschwindigkeit und führt dann k-Means-Clustering aus. Jeder Cluster-Schwerpunkt wird zu einer der Ausgabefarben. K-Means gruppiert Pixel nach Farbnähe, sodass die dominanten visuellen Töne als Schwerpunktfarben entstehen.

Ist es für die Farbextraktion notwendig, das Bild hochzuladen?

Nein. Das Pixel-Sampling findet innerhalb eines Web Workers in Ihrem Browser statt. Das Bild wird von Ihrer lokalen Festplatte gelesen, auf ein OffscreenCanvas gezeichnet, und das Pixel-Array wird im Arbeitsspeicher verarbeitet. Die Daten verlassen Ihr Gerät nicht.

Warum sehen die extrahierten Farben etwas anders aus als das, was ich im Bild sehe?

K-Means-Schwerpunkte stellen den mathematischen Durchschnitt eines Clusters von Pixelfarben dar. Eine Farbe, die sehr häufig, aber leicht variiert ist (ein blauer Himmel mit leichten Farbverlaufsvariationen), erzeugt einen Schwerpunkt, der der Durchschnittsfarbton ist, nicht ein exakter Pixelwert, auf den Sie zeigen könnten. Das Ergebnis ist ein repräsentativer Durchschnitt, keine Stichprobe eines bestimmten Pixels.

Kann ich Paletten aus Fotos mit Transparenz extrahieren?

Vollständig transparente Pixel (Alpha = 0) werden vom Clustering ausgeschlossen, um zu verhindern, dass die transparente Region die extrahierten Farben in Richtung Schwarz oder Weiß verzerrt, abhängig von der Canvas-Hintergrundfüllung. Halbtransparente Pixel sind in der Stichprobe enthalten, gewichtet nach ihrem Alphawert.

In welchem Format sind die Farbcodes?

Das Tool gibt HEX-Codes aus (z. B. #3A7BD5). Wenn Sie RGB, HSL oder andere Formate benötigen, kopieren Sie den HEX-Wert in das Color Converter Tool, das HEX akzeptiert und in alle gängigen Farbmodelle umwandelt.