Wie erstelle ich eine Farbpalette aus einem Bild?

Ziehen Sie das Bild auf diese Seite. Die dominanten Farben erscheinen sofort, sortiert nach ihrem Anteil am Bild. Sie können die Anzahl ändern, jede Farbe als HEX, RGB oder HSL kopieren und den Satz als CSS, Tailwind oder JSON exportieren.

Wie finde ich den HEX-Code einer Farbe in einem Bild?

Laden Sie das Bild und klicken Sie genau auf die gewünschte Stelle. Die Pipette zeigt die HEX-, RGB- und HSL-Werte dieses Pixels, und ein Klick auf einen Wert kopiert ihn.

Wie werden die dominanten Farben berechnet?

Das Bild wird verkleinert, und seine Pixel werden mit k-Means im Farbraum OKLab gruppiert, der Farbunterschiede so misst, wie Menschen sie wahrnehmen. Die Durchschnittsfarbe jedes Clusters wird zu einem Farbfeld, sortiert nach seinem Anteil an den Pixeln.

Warum bekomme ich leicht andere Farben als mit einem anderen Tool?

Jedes Tool gruppiert ähnliche Pixel anders, und die Farbfelder sind Durchschnittswerte dieser Gruppen statt einzelner Pixel. Die Startwerte dieses Tools sind deterministisch, dasselbe Bild liefert hier also immer dasselbe Ergebnis. Nutzen Sie die Pipette, wenn Sie einen exakten Pixelwert brauchen.

Kann ich die Palette nach Tailwind CSS exportieren?

Ja. Wählen Sie Tailwind-v3-Konfiguration für ein colors-Objekt zum Einfügen in tailwind.config.js oder Tailwind v4 @theme für die CSS-basierte Konfiguration, und kopieren oder laden Sie den Code herunter.

Funktioniert das mit transparenten PNGs und Logos?

Ja. Überwiegend transparente Pixel werden übersprungen, sodass die Palette das sichtbare Motiv widerspiegelt und nicht den leeren Hintergrund.

Wird mein Bild hochgeladen?

Nein. Das Bild wird in Ihrem Browser dekodiert und analysiert und verlässt Ihr Gerät nie.

Farbpalette aus Bild erstellen

Die dominanten Farben eines Fotos als HEX, RGB und HSL auslesen. Alles läuft lokal — nichts wird hochgeladen.

Eingang: PNG · JPEG · WebP · GIF · SVG
Ausgang: HEX · RGB · HSL · CSS · JSON

Bild hierher ziehen

Ein Foto, ein Screenshot oder ein Logo: PNG, JPEG, WebP, GIF oder SVG. Sie können ein Bild auch einfügen.

Eine Farbpalette aus jedem Bild gewinnen

Ziehen Sie ein Foto, einen Screenshot oder ein Logo auf die Seite, und dieser Farbpaletten-Generator liest die dominanten Farben aus, sortiert danach, wie viel des Bildes jede einzelne einnimmt. Wählen Sie zwischen 3 und 12 Farbfeldern, kopieren Sie jedes davon als HEX, RGB oder HSL, klicken Sie auf eine beliebige Stelle im Bild, um ein bestimmtes Pixel aufzunehmen, und exportieren Sie die Palette als CSS-Variablen, SCSS, Tailwind-Konfiguration, JSON oder PNG-Streifen. Das Bild wird auf Ihrem eigenen Gerät analysiert und nie hochgeladen.

So lesen Sie Farben aus einem Bild aus

Ziehen Sie ein Bild auf die Seite, wählen Sie eines aus Ihren Dateien oder fügen Sie es direkt aus der Zwischenablage ein. PNG, JPEG, WebP, GIF und SVG funktionieren.
Stellen Sie unter Farben die gewünschte Anzahl an Farbfeldern ein. Der Streifen über der Liste zeigt jede Farbe in ihrem Anteil am Bild.
Klicken Sie auf einen Wert, um ihn als HEX, RGB oder HSL zu kopieren.
Brauchen Sie eine bestimmte Stelle, etwa die Farbe eines Buttons in einem Screenshot? Klicken Sie auf diesen Punkt im Bild, um ihn aufzunehmen, und fügen Sie ihn mit dem Plus-Button zur Palette hinzu.
Wählen Sie ein Exportformat und kopieren Sie den Code, oder laden Sie die Palette als PNG-Streifen herunter.

Wie die dominanten Farben ermittelt werden

Ein Foto kann leicht hunderttausend verschiedene Farben enthalten, die meisten davon winzige Abwandlungen voneinander. Um die wenigen zu finden, die zählen, wird das Bild verkleinert und jedes Pixel mit denen gruppiert, die ihm am ähnlichsten sehen. Das Verfahren heißt k-Means-Clustering. Jede Gruppe wird zu einem Farbfeld: dem Durchschnitt ihrer Pixel, sortiert nach der Anzahl der Pixel, die sie enthält.

Zwei Details machen das Ergebnis besser als bei einer naiven Pipette. Erstens werden Farben in OKLab verglichen, einem Farbraum, in dem gleiche Abstände für das Auge auch wie gleiche Unterschiede aussehen. Clustering im einfachen RGB-Raum zerlegt Grüntöne gern in viele fast identische Nuancen und wirft deutlich verschiedene Blautöne zusammen. Zweitens werden die Startpunkte deterministisch gewählt und bevorzugen Farben, die häufig vorkommen und zugleich weit von den bereits gewählten entfernt sind. So liefert dasselbe Bild immer dieselbe Palette, und ein kleiner, aber kräftiger Akzent wie ein rotes Logo an einer grauen Wand geht nicht im Hintergrund unter.

Transparente Pixel werden ignoriert, sodass ein Logo auf einem transparenten PNG die Farben des Logos liefert und kein schwarzes Farbfeld.

HEX, RGB und HSL: welches Format kopieren?

Brauchen Sie OKLCH, CMYK oder HSV oder eine hellere Abstufung eines Farbfelds? Fügen Sie den HEX-Wert in den Farbkonverter ein, der jede Notation samt Aufhellungen, Abdunklungen und Farbharmonien anzeigt.

HEX: #2a9d8f. Sechs Hexadezimalziffern für Rot, Grün und Blau. Die kompakteste Form, die jedes Designtool und CSS akzeptiert.
RGB: rgb(42, 157, 143). Dieselben drei Kanäle als Zahlen von 0 bis 255. Praktisch in Code, der mit Farben rechnet, oder in Tools, die getrennte Werte verlangen.
HSL: hsl(173 58% 39%). Farbton, Sättigung und Helligkeit. Die Notation, die sich am leichtesten von Hand anpassen lässt: Helligkeit erhöhen für einen Hover-Zustand, Sättigung senken für eine gedämpfte Variante.

Exportformate

CSS-Variablen: ein :root-Block mit --palette-1, --palette-2 und so weiter, bereit für jedes Stylesheet.
SCSS: Variablen im Stil von $palette-1 für Sass-Projekte.
Tailwind-v3-Konfiguration: ein theme.extend.colors-Objekt für tailwind.config.js, das Klassen wie bg-palette-1 ergibt.
Tailwind v4 @theme: Custom Properties wie --color-palette-1 für die CSS-basierte Konfiguration von Tailwind 4.
JSON: ein Array mit HEX, RGB und HSL jeder Farbe, für Skripte und Design-Tokens.
PNG-Streifen: die Farbfelder nebeneinander als Bild, für ein Moodboard, ein Briefing oder eine Chatnachricht.

Tipps für eine brauchbare Palette

Weniger Farben für Markenarbeit, mehr für Illustration. Fünf oder sechs Farbfelder treffen die Stimmung eines Fotos meist; erhöhen Sie auf 10 oder 12, wenn Sie auch die Nebentöne brauchen.
Zuerst zuschneiden. Ein großer Himmel oder ein weißer Seitenrand dominiert das Ergebnis. Schneiden Sie das Bild auf den Teil zu, der Sie interessiert, damit die Palette ihn widerspiegelt.
Textfarben vor der Verwendung prüfen. Aus einem Foto gewonnene Farben bieten selten genug Kontrast für Text. Prüfen Sie jedes Farbpaar, auf das Text kommen soll, mit dem Kontrastprüfer.
Für exakte Werte die Pipette nutzen. Dominante Farben sind Durchschnittswerte. Wenn Sie die genaue Farbe eines Pixels brauchen, etwa eines Logos oder eines UI-Elements in einem Screenshot, klicken Sie darauf.

Häufige Fragen

Wie erstelle ich eine Farbpalette aus einem Bild?: Ziehen Sie das Bild auf diese Seite. Die dominanten Farben erscheinen sofort, sortiert nach ihrem Anteil am Bild. Sie können die Anzahl ändern, jede Farbe als HEX, RGB oder HSL kopieren und den Satz als CSS, Tailwind oder JSON exportieren.
Wie finde ich den HEX-Code einer Farbe in einem Bild?: Laden Sie das Bild und klicken Sie genau auf die gewünschte Stelle. Die Pipette zeigt die HEX-, RGB- und HSL-Werte dieses Pixels, und ein Klick auf einen Wert kopiert ihn.
Wie werden die dominanten Farben berechnet?: Das Bild wird verkleinert, und seine Pixel werden mit k-Means im Farbraum OKLab gruppiert, der Farbunterschiede so misst, wie Menschen sie wahrnehmen. Die Durchschnittsfarbe jedes Clusters wird zu einem Farbfeld, sortiert nach seinem Anteil an den Pixeln.
Warum bekomme ich leicht andere Farben als mit einem anderen Tool?: Jedes Tool gruppiert ähnliche Pixel anders, und die Farbfelder sind Durchschnittswerte dieser Gruppen statt einzelner Pixel. Die Startwerte dieses Tools sind deterministisch, dasselbe Bild liefert hier also immer dasselbe Ergebnis. Nutzen Sie die Pipette, wenn Sie einen exakten Pixelwert brauchen.
Kann ich die Palette nach Tailwind CSS exportieren?: Ja. Wählen Sie Tailwind-v3-Konfiguration für ein colors-Objekt zum Einfügen in tailwind.config.js oder Tailwind v4 @theme für die CSS-basierte Konfiguration, und kopieren oder laden Sie den Code herunter.
Funktioniert das mit transparenten PNGs und Logos?: Ja. Überwiegend transparente Pixel werden übersprungen, sodass die Palette das sichtbare Motiv widerspiegelt und nicht den leeren Hintergrund.
Wird mein Bild hochgeladen?: Nein. Das Bild wird in Ihrem Browser dekodiert und analysiert und verlässt Ihr Gerät nie.