BrowserTools
Startseite / Bilder / Bild-Farbwähler, Farben aus jedem Foto auslesen

Bild-Farbwähler, Farben aus jedem Foto auslesen

Lies Farben aus jedem Bild direkt im Browser aus. Fahre mit einer Lupe über das Bild, klicke für HEX-, RGB- und HSL-Werte und extrahiere eine dominante Palette.

Betreut von BrowserTools

Bild-Farbwähler, Farben aus jedem Foto auslesen wird geladen… Wenn nichts passiert, aktiviere JavaScript.

Ein Bild-Farbwähler (oft Pipette genannt) verrät dir die exakte Farbe jedes Pixels in einem Foto, Screenshot, Logo oder Design-Mockup. Lade ein Bild, fahre mit der Vergrößerungslupe darüber, um einzelne Pixel zu untersuchen, und klicke, um die Farbe als HEX-Code, RGB-Wert oder HSL-Wert festzuhalten, jeweils mit Kopieren per Klick. Das Werkzeug analysiert außerdem automatisch das ganze Bild und extrahiert eine dominante Farbpalette, sodass du in Sekunden ein zusammenpassendes Set von bis zu acht Farbfeldern bekommst, ganz ohne manuelles Aufnehmen.

Häufig gestellte Fragen

Wie lese ich eine Farbe aus einem Bild aus?
Lade ein Bild, indem du es auf das Werkzeug ziehst, es über die Dateiauswahl öffnest oder aus der Zwischenablage einfügst. Bewege den Mauszeiger über das Bild: Eine Vergrößerungslupe zeigt die Pixel rund um den Zeiger und eine Live-Vorschau der Farbe darunter. Klicke, um die Farbe festzuhalten, und kopiere sie dann mit den Kopierschaltflächen als HEX, RGB oder HSL.
Wird mein Bild auf einen Server hochgeladen?
Nein. Das Bild wird in deinem eigenen Browser dekodiert und auf ein Canvas-Element gezeichnet, und sämtliche Farbberechnungen laufen auf deinem Gerät. Nichts wird irgendwohin übertragen, was das Werkzeug sicher für vertrauliche Screenshots, Kundenmaterial und unveröffentlichte Designs macht. Es funktioniert nach dem Laden der Seite sogar offline.
Welche Farbformate liefert der Farbwähler?
Jede aufgenommene Farbe wird gleichzeitig in drei Formaten angezeigt: HEX (zum Beispiel #3A7BD5), RGB (zum Beispiel rgb(58, 123, 213)) und HSL (zum Beispiel hsl(215, 65%, 53%)). Alle drei beschreiben exakt dieselbe Farbe; es sind nur verschiedene Schreibweisen, die in CSS, Designwerkzeugen und Bildeditoren üblich sind. Jedes Format hat eine eigene Kopierschaltfläche.
Wie funktioniert die Extraktion der dominanten Palette?
Das Werkzeug verkleinert das Bild und sortiert jeden Pixel in grobe Farbgruppen, dann werden die Gruppen danach geordnet, wie viele Pixel in sie fallen. Die häufigsten Gruppen, die sich optisch voneinander unterscheiden, bilden die Palette, bis zu acht Farbfelder. Es ist eine schnelle, häufigkeitsbasierte Quantisierung, die komplett in deinem Browser in Sekundenbruchteilen läuft.
Kann ich einen Screenshot direkt aus der Zwischenablage einfügen?
Ja. Mach einen Screenshot und drücke dann irgendwo auf der Seite Strg+V (Cmd+V auf dem Mac). Das Bild aus deiner Zwischenablage landet direkt im Farbwähler, ohne dass du es zuerst als Datei speichern musst. Das ist der schnellste Weg, eine Farbe von etwas zu holen, das gerade auf deinem Bildschirm zu sehen ist.
Welche Bildformate werden unterstützt?
Jedes Format, das dein Browser dekodieren kann, funktioniert. Das deckt JPEG, PNG, WebP, GIF, BMP, SVG und in den meisten modernen Browsern auch AVIF ab. Animierte Formate werden auf ihrem ersten Einzelbild abgetastet. Wenn sich die Datei in einem Browser-Tab als Bild öffnen lässt, kann dieser Farbwähler ihre Farben lesen.
Wie genau ist die aufgenommene Farbe?
Der Farbwähler liest die dekodierten Pixelwerte direkt vom Canvas, innerhalb eines Bildes ist er also für den angeklickten Pixel exakt. Bedenke, dass verlustbehaftete Formate wie JPEG Kompressionsartefakte erzeugen, sodass eine einfarbige Fläche Pixel enthalten kann, die leicht vom ursprünglichen Designwert abweichen. Das Lupenraster macht diese Streuung sichtbar und hilft dir, einen repräsentativen Pixel zu wählen.
Was ist der Unterschied zwischen HEX, RGB und HSL?
HEX und RGB drücken eine Farbe über ihre Rot-, Grün- und Blauanteile aus; HEX packt sie in sechs Hexadezimalziffern, während RGB sie als Dezimalzahlen von 0 bis 255 auflistet. HSL beschreibt stattdessen Farbton (Position auf dem Farbkreis), Sättigung und Helligkeit, was oft intuitiver ist, wenn du eine Farbe anpassen willst, sie zum Beispiel dunkler machen möchtest, ohne den Farbton zu ändern.
Kann ich mehrere Farben behalten und vergleichen?
Ja. Jeder Klick fügt die Farbe einer Verlaufsleiste unter dem Bild hinzu. Klicke auf ein beliebiges Farbfeld im Verlauf, um es wieder zur aktiven Farbe zu machen und seine HEX-, RGB- und HSL-Werte zu sehen. Die Schaltfläche zum Leeren setzt den Verlauf zurück, wenn du neu anfangen willst. Der Verlauf existiert nur auf der Seite; nach einem Neuladen beginnt er leer.
Warum wirken Farben aus einem JPEG leicht daneben?
Die JPEG-Kompression arbeitet in kleinen Blöcken und verwirft feine Farbdetails, deshalb bekommen Kanten und einfarbige Flächen kleine Abweichungen, die im ursprünglichen Design nicht vorhanden waren. Wenn Präzision zählt, nimm die Farbe aus einem PNG oder einem anderen verlustfreien Export, oder nutze die Lupe, um einen Pixel aus der Mitte einer großen einfarbigen Fläche statt in Kantennähe abzutasten.

Über Bild-Farbwähler, Farben aus jedem Foto auslesen

Eine Farbe aus einem Bild zu holen ist eine Sache von drei Schritten: laden, zeigen, klicken. Du kannst eine Datei per Drag-and-drop irgendwo auf das Werkzeug ziehen, sie über die Dateiauswahl öffnen oder einfach einen Screenshot direkt aus der Zwischenablage mit Strg+V (Cmd+V auf dem Mac) einfügen. Die Lupe zeigt ein vergrößertes Raster der Pixel rund um den Mauszeiger zusammen mit einer Live-Vorschau der Farbe darunter. So triffst du auch in feinen Details wie geglättetem Text, dünnen Rahmen oder sanften Verläufen genau den richtigen Pixel. Jede angeklickte Farbe landet in einer Verlaufsleiste, damit du Kandidaten nebeneinander vergleichen und jede später mit einem Klick erneut auswählen kannst.

Alles passiert lokal in deinem Browser. Das Bild wird auf ein HTML-Canvas auf deinem eigenen Gerät dekodiert und verlässt es nie: kein Upload, keine serverseitige Verarbeitung, kein Konto und kein Tracking deiner Dateien. Damit ist der Farbwähler sicher für vertrauliches Material wie unveröffentlichte Produktfotos, Markenmaterial von Kunden oder interne Screenshots. Es bedeutet auch, dass das Werkzeug nach dem Laden der Seite offline weiterarbeitet und unabhängig von deiner Verbindungsgeschwindigkeit sofort reagiert, weil schlicht keine Netzwerkanfrage stattfindet.

Typische Einsatzfälle gibt es überall im Design- und Entwicklungsalltag. Frontend-Entwickler picken eine Markenfarbe aus einem Logo, um sie in CSS nachzubauen. Designer prüfen, ob eine exportierte Grafik wirklich die freigegebenen Markenwerte verwendet. Marketingteams kontrollieren die Farbkonsistenz über Kampagnenbilder hinweg, und Illustratoren nehmen Referenzfotos ab, um eine Malpalette aufzubauen. Die automatische Palettenextraktion ist besonders praktisch, um aus Fotografie ein Farbschema zu gewinnen, zum Beispiel das Thema einer Website aus einem Hero-Bild abzuleiten. Wenn du die aufgenommenen Werte verfeinern oder umrechnen willst, machen der Farbkonverter und der Palettengenerator dieser Seite genau dort weiter, wo dieses Werkzeug aufhört.

Von der Pipette zum Hex-Code: Wie wir lernten, Bildschirmfarben zu benennen

Die Pipetten-Metapher ist älter, als die meisten vermuten. Frühe Malprogramme der 1980er, darunter Deluxe Paint auf dem Amiga und MacPaint auf dem Macintosh, brauchten eine Möglichkeit, mit der Künstler eine bereits auf der Leinwand vorhandene Farbe wiederverwenden konnten, und eine Pipette, die einen Farbtropfen aufsaugt, war das Sinnbild, das sich durchsetzte. Als Photoshop 1.0 im Jahr 1990 erschien, trug es die Pipette in professionelle Arbeitsabläufe, und jeder Bildeditor seitdem hat sowohl das Werkzeug als auch das Symbol behalten, so sehr, dass das Abgreifen eines beliebigen Wertes irgendwo in einer Oberfläche heute ganz allgemein Pipettieren genannt wird.

Der sechsstellige Hex-Code ist ein glücklicher Zufall der Hardware. Bildschirme führten Ende der 1980er 24-Bit-Farbe ein, mit einem Byte pro Kanal, und ein Byte entspricht genau zwei Hexadezimalziffern. #RRGGBB war also die kompakteste lesbare Schreibweise dessen, was der Videospeicher tatsächlich enthielt. HTML 3.2 standardisierte die Notation 1997 für das Web, zusammen mit 16 benannten Farben, die aus der VGA-Palette von Windows übernommen wurden. Die viel längere Liste von Namen, die Browser heute verstehen, samt Kuriositäten wie PapayaWhip und DarkSlateGray, stammt aus dem Fenstersystem X11, in dem Forscher am MIT und bei DEC in den 1980ern Farben teils nach Augenmaß benannten und in einigen Fällen, so wird erzählt, durch den Vergleich mit Crayola-Wachsmalstiften.

Ein Relikt jener Zeit taucht in Designgesprächen noch immer auf: die websichere Palette. In den Tagen der 8-Bit-Bildschirme konnten Browser nur garantieren, dass 216 bestimmte Farben ohne Rasterung dargestellt wurden, also beschränkten sich Designer auf Hex-Werte aus 00, 33, 66, 99, CC und FF. Moderne Bildschirme zeigen Milliarden von Farben und die Einschränkung ist seit zwei Jahrzehnten bedeutungslos, doch diese klobigen websicheren Werte stehen noch in alten Styleguides, ein fossiler Beleg für die Zeit, in der Farbauswahl bedeutete, mit der Hardware zu verhandeln.

Verwandte Tools

Farbkonverter und Kontrastprüfer

Konvertiere Farben zwischen HEX, RGB, HSL und HSV und prüfe das WCAG-Kontrastverhältnis.

Farbpaletten-Generator

Erzeuge komplementäre, analoge, triadische, tetradische, monochromatische sowie Schatten-/Tönungspaletten aus jeder beliebigen Basisfarbe.

Bildgröße ändern, Fotos online skalieren

Ändere die Bildgröße nach Breite, Höhe oder Prozentsatz, sperre das Seitenverhältnis und wähle einen Anpassungsmodus. 100 % in deinem Browser, ohne Uploads.

Bildkompressor (JPG / WEBP / PNG)

Reduziere die Dateigröße von Bildern mit einstellbarer Qualität und vergleiche das Vorher und Nachher nebeneinander.
Unterstützen