Farbpalette aus einem Bild: Hauptfarben mit Codes

So verwenden Sie es

Klicken Sie auf Foto wählen oder legen Sie ein Bild in das Feld. Das Foto wird auf Ihrem Gerät gelesen.
Wählen Sie die Anzahl der Farben von 5 bis 10. Ein unruhiges Foto braucht mehr Farben.
Lesen Sie jede Farbe: ihren Hex-Code, die RGB- und HSL-Werte und ihren Anteil am Bild. Klicken Sie neben einer Farbe auf die Schaltfläche zum Kopieren, um ihren Hex-Code zu kopieren.
Unter Palette exportieren nutzen Sie Als CSS-Variablen kopieren, Als Liste kopieren oder Farbfelder herunterladen (PNG).

So werden die Farben gefunden

Jedes Pixel wird in CIE L*a*b* umgerechnet, einen Farbraum, in dem der Abstand zweier Farben etwa dem Unterschied entspricht, den das Auge sieht. Die Pixel werden dann durch k-means-Clustering in die gewählte Zahl an Farben gruppiert. Dabei wird der Mittelpunkt jeder Gruppe so gesetzt, dass die Pixel möglichst nahe an ihrem Mittelpunkt liegen.

Die Startmittelpunkte werden mit dem Verfahren k-means++ und einem festen Startwert gewählt. Dasselbe Foto ergibt deshalb immer dieselbe Palette. Jede Farbe ist der Durchschnitt der Pixel ihrer Gruppe, ihr Anteil ist die Zahl dieser Pixel geteilt durch alle Pixel.

Pixel → (L*, a*, b*)
Gruppen: jedes Pixel gehört zum nächsten Mittelpunkt; die Mittelpunkte sind die Durchschnitte ihrer Pixel
Farbe = mittlere RGB der Gruppe; Anteil = Pixel der Gruppe ÷ alle Pixel

Das Foto wird als Kopie von bis zu etwa 2 Megapixeln analysiert. So bleiben auch große Fotos schnell.
Sehr ähnliche Töne können eine gemeinsame Farbe bilden. Eine Palette mit 10 Farben kann eine Farbe in zwei teilen, wenn ein Foto viele Töne davon hat.

Codes, Anteile und was sie bedeuten

Der Hex-Code ist die Farbe als drei Paare hexadezimaler Ziffern für Rot, Grün und Blau. Die RGB-Werte sind dieselben Zahlen im Dezimalsystem. HSL gibt den Farbton als Winkel auf dem Farbkreis an (0 ist Rot, 120 Grün, 240 Blau), die Sättigung als Stärke und die Helligkeit als Maß, wie hell die Farbe ist.

Der Anteil ist der Bruchteil der Pixel des Bildes, der zu einer Farbe gehört, also die Fläche, die sie einnimmt. Ein kleiner, heller Fleck kann eine Farbe mit kleinem Anteil sein. Ein großer weicher Hintergrund kann einen großen Anteil haben, der aus mehreren ähnlichen Tönen besteht.

Kopieren Sie die CSS-Variablen, um die Farben auf einer Webseite oder in einem Entwurf zu verwenden: Jede Farbe wird zu --color-1, --color-2 und so weiter.
Der PNG-Streifen dient für eine Stimmungstafel oder einen Ausdruck: ein Farbfeld pro Farbe, mit dem Hex-Code darunter.

Rechenbeispiel: Blöcke aus Rot, Blau und Grün

Ein Testbild mit 50 roten, 30 blauen und 20 grünen Pixeln ergibt genau drei Farben, weil jeder Block eine einheitliche Farbe hat. Verlangt man sechs Farben, liefert das Werkzeug trotzdem diese drei und keine erfundenen Farben.

Die Liste ist nach dem größten Anteil geordnet, und jeder Code ist die genaue Farbe seines Blocks.

Farbe	Hex	RGB	HSL	Anteil
Rot	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	50,0 %
Blau	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)	30,0 %
Grün	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)	20,0 %

Häufig gestellte Fragen

Sind die Farben genau wie im Foto?

Eine einheitliche Fläche ergibt ihre genaue Farbe. Ein Foto mit Verläufen ergibt den Durchschnitt jeder Gruppe, eine faire Zusammenfassung des Bildes, aber nicht jeden Ton darin.

Warum bleibt die Palette jedes Mal gleich?

Die Gruppierung beginnt mit einem festen Startwert. Dasselbe Foto und dieselbe Zahl an Farben ergeben deshalb immer dieselbe Palette. Ändern Sie das Foto oder die Zahl der Farben, ändert sich das Ergebnis.

Wie viele Farben soll ich wählen?

Fünf Farben erfassen die Hauptstimmung der meisten Fotos. Nehmen Sie 8 bis 10 für ein unruhiges Bild oder wenn Sie für ein Gemälde oder einen Entwurf mehr Töne brauchen.

Wird mein Foto irgendwohin hochgeladen?

Nein. Das Foto wird von Ihrem Browser gelesen, die Palette wird auf Ihrem Gerät berechnet, und nichts wird an uns gesendet.

Was ist der Unterschied zwischen Hex, RGB und HSL?

Sie beschreiben dieselbe Farbe auf drei Arten. Hex und RGB nennen die Anteile von Rot, Grün und Blau, Hex hexadezimal und RGB dezimal. HSL beschreibt Farbton, Sättigung und Helligkeit, das lässt sich mit dem Auge leichter anpassen.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.