Farbwähler & Paletten-Extraktor – Farben aus Bild auswählen

Lade ein beliebiges JPG, PNG, WebP oder GIF hoch und klicke an eine beliebige Stelle des angezeigten Bildes – der exakte Pixel unter deinem Cursor wird abgetastet und als HEX, RGB und HSL angezeigt, jeweils mit Ein-Klick-Kopierfunktion. Perfekt, um eine Markenfarbe zu treffen, einen Farbton aus einem Foto zu entnehmen oder Akzentfarben aus einem Design-Mockup zu greifen.

Das Bild wird auf 320 Pixel an seiner längsten Seite herunterskaliert, dann wird jeder Pixel anhand seiner obersten 4 Bit pro Kanal in Behälter einsortiert. Die am stärksten gefüllten Behälter werden auf volle 8-Bit-Farbe gemittelt, nach Häufigkeit sortiert und als deine Palette zurückgegeben. Das Ergebnis sind typischerweise 5 bis 24 dominante Farben, die das Bild optisch zusammenfassen.

Ja. Die Download-Schaltflächen erzeugen zwei Formate: einen CSS-Variablenblock, der direkt in einen :root-Selektor eingefügt werden kann (--color-1, --color-2…), und eine JSON-Datei mit Hex-, RGB-Komponenten und Gewichtungsprozentsatz für jede Farbe. Beide Formate lassen sich sauber in Design-Tokens, Tailwind-Konfigurationen und Palettenbibliotheken integrieren.

Nein – die Farbauswahl und die Paletten-Extraktion erfolgen vollständig in deinem Browser über die HTML-Canvas-API. Das Bild bleibt auf deinem Gerät, wodurch das Tool sicher für unveröffentlichte Produktfotos, Mockup-Entwürfe und Markenassets unter NDA ist.

Für die Markenidentität sind 5–8 Farben der ideale Bereich – sie erfassen das dominierende Thema, ohne die Akzentwahl zu verwässern. Für Datenvisualisierungen empfehlen wir 10–16 Farben, damit du genügend kategorische Farbtöne hast. Mit dem Schieberegler wählst du zwischen 5 und 24.

Pixel mit einem Alphawert unter 128 werden ignoriert, sodass transparente Hintergründe die Palette nicht mit „Hintergrund“-Farben verunreinigen. Das macht die Bild-Farbpipette besonders gut geeignet für Produktfreisteller, Sticker-Artwork und freigestellte Motive.

HEX (#RRGGBB) ist die kompakteste Form und das, was CSS, Figma und Sketch standardmäßig verwenden. RGB zeigt die drei Komponentenwerte von 0–255 – nützlich beim programmatischen Arbeiten mit Bilddaten. HSL (Farbton, Sättigung, Helligkeit) ist intuitiv zum Anpassen von Farben: Verschiebe den Farbton, um die Farbfamilie zu ändern, passe die Helligkeit für hellere und dunklere Nuancen an.

Ja. Kostenlos, kein Konto erforderlich, keine Beschränkung der Bildgröße oder der Anzahl extrahierter Paletten. Es muss nichts installiert werden – das gesamte Tool ist eine einzige Webseite.