Farbpaletten-Extraktor

Dominante Farben und HEX-Werte aus jedem Bild extrahieren

Klicken zum Auswählen oder Bild hier ablegen

So funktioniert es

Farbpaletten-Extraktor — Dominante Farben und HEX-Werte aus jedem Bild extrahieren. Alle Verarbeitung erfolgt in deinem Browser — kein Upload, keine Anmeldung, keine E-Mail. Für immer kostenlos.

Zuletzt aktualisiert: 2026-05-06

Editor's note

Wir nutzen das selbst auf Konkurrenz-Screenshots und Produktfotos, um Paletten für unsere eigene Markenarbeit herauszuziehen – das ist der eigentliche Grund, warum es existiert. Die meisten Paletten-Extraktoren werfen ein ungestaltetes Raster mit HEX-Codes in winziger grauer Schrift darunter aus, und du blinzelst, kopierst und verlierst die Übersicht. Bei uns erscheint der HEX beim Hover genau dort, wo dein Cursor schon ist – das Auge ist bereits auf der Farbe, und es zwingen, runter zu einer Caption zu wandern, ist eine kleine, aber reale Steuer, die sich über eine lange Arbeitssitzung summiert.

Die andere frühe Entscheidung: standardmäßig sieben Felder, nicht zehn. Tools, die standardmäßig zwölf oder sechzehn Farben zeigen, wirken auf Screenshots beeindruckender, produzieren aber Paletten, die niemand wirklich nutzen kann – der lange Schwanz ist meist Rauschen aus Kanten und Schatten. Sieben gibt dir die dominante Geschichte und ein paar Akzente, also die Form einer nutzbaren Palette. Du kannst hochschieben, wenn du Inspiration willst, aber der Default ist die Größe, die produktiv ist.

Über Farbpaletten-Extraktor

Der Farbpaletten-Extraktor zieht die dominanten Farben aus jedem Bild und liefert HEX-, RGB- und HSL-Werte, die du direkt in dein Designsystem, dein CSS oder Figma einfügen kannst. Es ist der schnellste Weg, ein Stimmungsfoto in eine Markenpalette zu übersetzen, UI-Akzente an ein Hero-Bild anzupassen oder die Farbwelt eines Wettbewerbers zu sampeln.

Designer, die eine neue Marke aufbauen, ziehen Paletten aus Inspirationsboards. Front-End-Entwickler nehmen Swatches aus einem Hero-Bild, um Akzente harmonisch zu halten. Marketer extrahieren Produktfarben, um Kampagnen-Kreatives zu seeden. Innenarchitekten und Stylisten machen dasselbe mit Fotos von Stoffen oder Räumen.

Das Sampling läuft komplett im Browser über Canvas und wird im Browser verarbeitet — das Inspirationsbild verlässt nie dein Gerät, was wichtig ist, wenn die Quelle ein privates Moodboard oder ein unveröffentlichtes Kampagnen-Asset ist.

So verwenden Sie Farbpaletten-Extraktor

Lege ein Bild (Foto, Illustration, Screenshot — alles Raster) in die Upload-Zone.
Ziehe den Farbanzahl-Schieber zwischen 3 und 16, um zu steuern, wie viele Swatches du willst.
Sieh dir die Swatch-Reihe an — jeder Chip zeigt seinen HEX-Wert darunter.
Klicke einen Swatch an, um den HEX zu kopieren. Wechsle den Format-Selektor für RGB- oder HSL-Ausgabe.
Lasse es mit anderer Anzahl erneut laufen, um breitere oder feinere Paletten zu sehen — manchmal erzählen 5 Swatches eine klarere Geschichte als 12.

Häufige Anwendungsfälle

Eine Markenpalette aus einem einzigen Stimmungsfoto für ein neues Kunden-Deck aufbauen.
Eine CTA-Buttonfarbe wählen, die zum Hero-Bild einer Website passt.
Garderobenfarben aus einem Modefoto für eine E-Commerce-Kategorieseite extrahieren.
Farben aus Wettbewerber-Screenshots sampeln bei einem Markenaudit.
Eine Tailwind-Farbskala aus einem einzigen Quellbild generieren (5 Farben extrahieren, daraus Tints/Shades bauen).

Tipps und häufige Fehler

Naturfotos liefern in der Regel reichere Paletten als UI-Screenshots — UI ist meist von weißen/grauen Hintergründen dominiert.
Schneide das Bild vor dem Extrahieren auf den relevanten Bereich zu. Eine ganze Landschaft hebt Himmel und Boden hervor; ein zugeschnittenes Detail die Farben des Motivs.
Fünf bis sieben Farben sind der Sweetspot für eine nutzbare Palette. Sechzehn sind toll für Inspiration, schaffen es aber selten direkt ins Designsystem.
Wirkt die extrahierte Palette schlammig, erhöhe vorher den Kontrast des Quellbildes — verwaschene Fotos liefern verwaschene Paletten.

Häufig gestellte Fragen

Wie wird die Palette berechnet?

Wir samplen Pixel in ein grobes 6×6×6 RGB-Raster, mitteln jeden Bin und behalten die häufigsten Buckets. Schnell und liefert visuell gruppierte Farben.

Wie viele Farben kann ich bekommen?

Zwischen 3 und 16. Höhere Anzahlen heben subtilere Akzente hervor, auf Kosten weniger eindeutiger Buckets.

Wird mein Bild hochgeladen?

Nein. Das Sampling läuft im Browser via Canvas — nichts wird gesendet.

Kann ich die Palette nach Figma oder Adobe exportieren?

Direkt noch nicht. Kopiere vorerst jeden HEX und füge ihn in dein Tool ein — Figmas Farbstile akzeptieren HEX direkt, und Adobe nimmt aus einer HEX-Liste gebaute ASE-Importe entgegen. Ein Ein-Klick-Export ist auf der Roadmap.

Warum liefert mein Foto eines Regenbogens nur sechs Farben?

Visuell ähnliche Töne fallen beim Sampling in denselben RGB-Bin. Erhöhe die Farbanzahl auf 12 oder 16, um mehr Nuancen zu sehen, oder schneide auf den Bereich mit der größten Vielfalt zu.

Sind die HEX-Werte exakte Pixelwerte?

Sie sind der Durchschnitt jedes Bins, kein einzelnes Pixel-Sample. Deshalb wirken sie wie 'die Farbe, die du per Auge wählen würdest', statt wie ein zufälliges Pixel von einer Kante oder einem Schatten.