HandyTools Hub

Bild-Farbextraktor

Extrahieren Sie die dominanten Farben aus einem beliebigen Bild

Ziehen Sie ein Bild hierher

oder klicken Sie zum Durchsuchen

Unterstützt JPEG, PNG, WebP, GIF

Extraktionseinstellungen

So funktioniert’s

  1. Bild hochladen — Ziehen Sie eine JPEG-, PNG-, WebP- oder GIF-Datei auf den Upload-Bereich oder klicken Sie, um Ihr Gerät zu durchsuchen. Alles wird lokal in Ihrem Browser verarbeitet — nichts wird auf einen Server hochgeladen.
  2. Anzahl der Farben wählen — Wählen Sie 5, 6 oder 8 dominante Farben. Die Palette wird bei jeder Änderung sofort aktualisiert.
  3. Einzelne Farben kopieren — Klicken Sie auf ein beliebiges Farbfeld, um seinen Hex-Wert in die Zwischenablage zu kopieren. Jedes Farbfeld zeigt zusätzlich die exakten RGB-Werte.
  4. Gesamte Palette exportieren — Nutzen Sie „Alle Hex-Werte kopieren” für eine einfache Liste oder kopieren Sie die fertigen CSS Custom Properties (--color-1 bis --color-8) und fügen Sie sie direkt in Ihr Stylesheet ein.

Funktionen

  • Deterministische Median-Cut-Quantisierung — Dasselbe Bild erzeugt immer dieselbe Palette, sodass Ihre Ergebnisse reproduzierbar sind und sich leicht mit Teamkollegen teilen lassen.
  • Intelligente Verkleinerung — Bilder werden vor der Analyse auf eine maximale Kantenlänge von 100 Pixeln reduziert. So bleibt die Extraktion selbst bei 4K-Fotos blitzschnell, ohne die dominanten Farben zu beeinflussen.
  • Hex + RGB für jedes Farbfeld — Jede Farbe zeigt beide Formate auf einen Blick, sortiert von dunkel nach hell nach wahrgenommener Helligkeit.
  • Kopieren mit einem Klick — Klicken Sie auf ein Farbfeld, um seinen Hex-Wert zu kopieren, oder übernehmen Sie die gesamte Palette in einer Aktion.
  • CSS-Variablen-Export — Erzeugen Sie einen :root-Block mit CSS Custom Properties, bereit zum Einfügen in jedes Projekt.
  • 100 % clientseitiger Datenschutz — Die gesamte Analyse läuft in Ihrem Browser über die Canvas-API. Ihre Bilder verlassen niemals Ihr Gerät.

Anwendungsfälle

  • Web- und UI-Design — Ziehen Sie ein passendes Farbschema aus einem Markenfoto, Hero-Bild oder Mockup für Buttons, Hintergründe und Akzente.
  • Design-Systeme — Extrahieren Sie Palettenkandidaten aus Marketingbildern und übernehmen Sie sie in Sekunden als CSS Custom Properties.
  • Kunst- und Illustrationsreferenz — Untersuchen Sie, wie Fotografen und Maler Töne kombinieren, indem Sie ein Bild auf seine dominanten Farben reduzieren.
  • Social Media und Präsentationen — Stimmen Sie Text- und Grafikfarben auf die Fotos in Ihren Folien oder Beiträgen ab, für einen stimmigen Look.

Verwandte Tools

  • Bildkomprimierer — Reduzieren Sie die Dateigröße von Bildern bei gleichbleibender Qualität, direkt in Ihrem Browser.
  • Bildzuschnitt — Schneiden, drehen und spiegeln Sie Bilder im Browser, bevor Sie ihre Palette extrahieren.
  • Farbpaletten-Generator — Generieren Sie harmonische Farbschemata aus einer einzigen Ausgangsfarbe auf Basis der Farbtheorie.
  • Farbwähler — Wählen und konvertieren Sie Farben zwischen den Formaten HEX, RGB und HSL.

Häufig gestellte Fragen

Wie funktioniert die Farbextraktion?

Das Tool skaliert Ihr Bild zunächst auf eine maximale Kantenlänge von 100 Pixeln und wendet dann die Median-Cut-Quantisierung an — einen deterministischen Algorithmus, der den Farbraum wiederholt entlang des breitesten Kanals teilt und jede Gruppe mittelt. Anders als zufallsbasierte Verfahren wie k-means findet er zuverlässig die Farben, die das Bild tatsächlich dominieren.

Werden meine Bilder auf einen Server hochgeladen?

Nein. Die gesamte Verarbeitung erfolgt vollständig in Ihrem Browser über die Canvas-API. Ihre Bilder verlassen niemals Ihr Gerät — das macht das Tool privat und schnell, und nach dem Laden der Seite funktioniert es sogar offline.

Warum kann ich nur 5, 6 oder 8 Farben wählen?

Eine Palette aus 5–8 Farben deckt die dominanten Töne praktisch jedes Fotos oder Screenshots ab, ohne Sie mit nahezu identischen Farbtönen zu überfordern. Enthält das Bild weniger einzigartige Farben als angefordert, gibt das Tool einfach weniger Farbfelder zurück.