tigtools

Bild-Farbwähler

Bild laden und an eine beliebige Stelle klicken, um die genaue Farbe dieses Pixels zu erhalten – oder die Hauptfarben des gesamten Bildes ermitteln lassen.

Läuft in Ihrem Browser Keine Anmeldung erforderlich

JPEG, PNG, WebP, GIF, AVIF oder BMP, bis zu 25 MB. Das Bild bleibt auf Ihrem Gerät.

Anleitung

  1. Bild auswählen oder in das Feld ziehen.
  2. Mauszeiger über das Bild bewegen; die Lupe zeigt die Pixel darum herum.
  3. Klicken oder tippen, um die Farbe auszuwählen und als HEX, RGB oder HSL zu kopieren.
  4. Nach unten scrollen, um die dominanten Farben zu sehen, die gewünschte Anzahl wählen und sie kopieren oder als CSS-Variablen herunterladen.

So funktioniert es

Das Bild wird in Ihrem Browser auf ein Canvas gezeichnet, und die Farbe des exakten Pixels unter dem Mauszeiger wird daraus ausgelesen. Die Lupe zeigt einen auf 11 × 11 Pixel vergrößerten Bereich, wobei der gewählte Pixel umrandet ist. Bilder mit mehr als 4096 Pixeln pro Seite werden zuerst verkleinert; bei sehr großen Fotos ist ein ausgewählter Pixel daher der Durchschnitt einiger Originalpixel.

Die dominierenden Farben werden mit k-Means-Clustering ermittelt: Pixel werden zunächst in 32.768 kleine Farbgruppen eingeteilt; anschließend werden die Gruppen zu der von Ihnen gewählten Anzahl Farben zusammengeführt, gewichtet nach der Anzahl der jeweils enthaltenen Pixel. Die Startpunkte werden deterministisch gewählt, sodass dasselbe Bild immer dieselbe Farbpalette ergibt.

Farben werden im sRGB-Farbraum ausgelesen, den der Browser für die Anzeige verwendet. Wenn ein Bild ein eingebettetes Farbprofil mit erweitertem Farbraum enthält, können die Werte geringfügig von denen eines Bildbearbeitungsprogramms abweichen. In Browsern, die dies unterstützen (Chrome und Edge am Desktop), verwendet die Schaltfläche „Vom Bildschirm aufnehmen“ die integrierte EyeDropper-API, um eine Farbe an einer beliebigen Stelle Ihres Bildschirms aufzunehmen.

Beispiele

Markenfarbe bestimmen

Laden Sie einen Screenshot eines Logos hoch, klicken Sie auf dessen Hauptfarbe und kopieren Sie #1a73e8 oder rgb(26, 115, 232) in Ihr CSS.

Farbpalette aus einem Foto

Ein Strandfoto, aufgeteilt in 6 Farben, ergibt Sand-, Meer- und Himmelstöne – jeweils mit ihrem Anteil an der Bildfläche, sortiert vom größten zum kleinsten.

Einen Farbton prüfen

Zoomen Sie mit der Lupe heran, um den exakten Pixel einer dünnen Linie statt der danebenliegenden, geglätteten Kante zu treffen.

Häufig gestellte Fragen

Warum weicht die Farbe leicht von meinem Fotoeditor ab?

Browser konvertieren Bilder für die Anzeige in sRGB. Fotos mit einem erweiterten Farbprofil (Display P3, Adobe RGB) können in einem Editor, der das ursprüngliche Profil beibehält, leicht abweichende Werte anzeigen.

Warum fehlt die Schaltfläche „Vom Bildschirm auswählen“?

Dafür ist die EyeDropper API erforderlich, die derzeit nur von einigen Browsern unterstützt wird – aktuell Chrome und Edge auf dem Desktop. Das Auswählen aus dem hochgeladenen Bild funktioniert überall.

Wie werden die dominanten Farben ermittelt?

Durch k-Means-Clustering aller Pixel, gewichtet nach der Häufigkeit der einzelnen Farben. Kleine, aber kräftige Details können mit einer größeren, nahegelegenen Farbe zusammengefasst werden; erhöhen Sie die Anzahl der Farben, um sie zu trennen.

Wird das Bild hochgeladen?

Nein. Es wird von dieser Seite in Ihrem Browser dekodiert und analysiert und verlässt niemals Ihr Gerät.

Datenschutz

Das Bild wird vollständig in Ihrem Browser verarbeitet. Es wird nicht hochgeladen, und ausgewählte Farben werden nicht gesendet oder gespeichert.