Farbe aus Bild bestimmen – aufs Pixel genau

Eine Farbpipette für Bilder liest die tatsächlichen Pixelwerte aus einem Bild und gibt dir die passenden Farbcodes. Du zeigst auf eine Stelle in einem Foto, einem Screenshot oder einem Logo, und sie sagt dir, dass dieses Pixel #F5A17D ist, rgb(245, 161, 125) oder was immer du brauchst. Mehr macht sie nicht: Sie ist kein Filter und kein Editor, an deinem Bild ändert sich nichts. Sie bringt eine Farbe aus einem Bild in ein Stylesheet, eine Designdatei oder eine Farbbestellung.

Dein Browser dekodiert das Bild in ein Raster aus Pixeln, und jedes Pixel hat einen Rot-, Grün- und Blauwert zwischen 0 und 255. Die Farbpipette zeichnet das dekodierte Bild in voller Originalgröße auf ein HTML-Canvas und liest das Pixel unter deinem Mauszeiger zurück. Aus diesen drei Zahlen entsteht jedes andere Format: HEX ist dieselbe Information im Sechzehnersystem, HSL und OKLCH beschreiben dieselbe Farbe über Farbton und Helligkeit. Zoomen ändert nur die Ansicht. Das ausgelesene Canvas wird nie skaliert, eine Messung bei 10-facher Vergrößerung ist also dieselbe wie in der eingepassten Ansicht.

Für alle Fälle, in denen die Farbe, die du brauchst, schon in einem Bild steckt. Messen geht schneller als Raten, und man merkt, wenn eine Farbe nur fast stimmt. Ob du ein Layout aus einem Screenshot nachbaust, eine Markenfarbe aus einem zugeschickten PDF triffst oder eine Palette aus einem Foto ziehst: Die Farbe ist schon da, du brauchst sie nur in einer Form, die du einfügen kannst. Die Farbpipette liefert außerdem alles, was von Hand mühsam wäre: Abstufungen, das Kontrastverhältnis zu Weiß und Schwarz und ob sich die Farbe für Menschen mit Farbsehschwäche noch von ihren Nachbarn abhebt.

Zieh dein Bild auf die Farbpipette, fahr mit der Maus über die gewünschte Stelle und klick. Die Lupe zeigt den 13 × 13 Pixel großen Ausschnitt unter dem Mauszeiger mit eingeblendetem Raster, du siehst also vorher, welches Pixel du aufnimmst. Ein Klick setzt einen nummerierten Marker, und daneben erscheinen neun Farbformate für dieses Pixel. Klick eines an, um es zu kopieren. Muss es ganz genau sein, zoome hinein und nimm die Pfeiltasten: Sie bewegen die Messstelle um genau ein Pixel, dann musst du nicht mehr zielen.

Alles, was dein Browser dekodieren kann, in der Praxis also JPEG, PNG, WebP, AVIF, GIF und BMP sowie SVG-Dateien mit festgelegter Breite und Höhe. Pro Datei sind bis zu 40 MB möglich, die Abmessungen sind unbegrenzt. Du kannst eine Datei hineinziehen, auswählen, einen Screenshot mit Strg + V einfügen oder die URL eines Bildes aus dem Netz angeben. Handyfotos stehen richtig herum, weil die EXIF-Ausrichtung beim Dekodieren berücksichtigt wird.

Ja, auf zwei Arten. Jeder Klick setzt einen Marker, und eine Obergrenze gibt es nicht. Du kannst dich also durch ein Bild arbeiten, Farben sammeln, umbenennen, umsortieren und alle zusammen exportieren. Unabhängig davon beschreibt der Tab „Bildpalette“ das ganze Bild auf einmal: Es wird auf 160 Pixel an der längeren Seite verkleinert, per Median-Cut aufgeteilt und dann mit gewichtetem k-Means-Clustering in CIE LAB verfeinert, damit die Gruppen dem entsprechen, wie Menschen Farben sehen. Jedes der acht Farbfelder nennt seinen Anteil am Bild.

Ja. Tippen nimmt eine Farbe auf, Ziehen mit einem Finger verschiebt das Bild, und mit zwei Fingern zoomst du. Die Dateiauswahl bietet meist auch die Kamera an, du kannst also etwas fotografieren und sofort Farben daraus aufnehmen. Auf dem Touchscreen fehlt der Hover-Effekt: Es gibt keinen Mauszeiger, der vorausläuft, ein Tippen setzt also sofort einen Marker. Bei kleinen Details zoomst du deshalb erst hinein und tippst dann, genau wie du am Rechner zu den Pfeiltasten greifen würdest.

Ja, in Chrome, Edge und anderen Chromium-Browsern. Der Button „Vom Bildschirm aufnehmen“ nutzt die browsereigene EyeDropper-Schnittstelle, die jedes Pixel auf deinem Bildschirm messen kann, auch in einem anderen Fenster, einem Videobild oder einem PDF. Firefox und Safari haben diese Schnittstelle nicht eingebaut, deshalb erscheint der Button dort nicht. In diesen Browsern machst du einen Screenshot und fügst ihn mit Strg + V ein. Aus einem PNG-Screenshot gemessen kommt meist derselbe Wert heraus wie vom Bildschirm.

Neun, live für jede Farbe, die du aufnimmst: HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH und den ähnlichsten CSS-Farbnamen. Der Name wird mit CIEDE2000 ermittelt statt mit reinem RGB-Abstand und trifft deshalb den Namen, der wirklich am ähnlichsten aussieht. HEX und RGB fügst du am häufigsten ein. HSL und HSV sind praktisch, wenn du dieselbe Farbe etwas heller willst. OKLCH ist wahrnehmungsgleichmäßig, deshalb werden Farbskalen und Harmonien hier darin berechnet statt in HSL. Der Farbwähler zerlegt eine einzelne Farbe sogar in 34 Codes, darunter HWB, CIELUV, OKLab, CIE XYZ und lineares sRGB.

Das Auslesen selbst ist exakt: Das Werkzeug liefert die Byte-Werte des dekodierten Bildes, ohne Interpolation und ohne Rundung. Die Genauigkeit geht im Bild verloren. In einem JPEG, gespeichert mit Qualität 95, liegt ein Pixel in einer ruhigen Fläche 0,37 Delta-E vom Original entfernt (Delta-E misst den sichtbaren Farbunterschied; unter 1 ist er unsichtbar). Ein Pixel auf einer Kante liegt bereits 6,91 daneben, und erst etwa 3 Pixel von einer harten Kante entfernt stimmt die Farbe wieder. Kantenglättung richtet ohne Kompression einen ähnlichen Schaden an: Der Rand eines Testkreises erzeugte 77 Farben, die weder in der Form noch im Hintergrund vorkommen. Gemessen am 25. August 2026 in Chromium 151.0.7922.34.

Ja. Jeden einzelnen Wert kopierst du mit einem Klick, und der Tab „Export“ exportiert eine ganze Auswahl auf einmal: deine Marker, die Bildpalette, die Harmonien oder eine vollständige Farbskala von 50 bis 950. Sechs Formate stehen bereit: CSS-Variablen (Custom Properties), ein @theme-Block für Tailwind v4, SCSS-Variablen samt Map, JSON, eine einfache Liste von HEX-Codes und eine SVG-Farbtafel mit Beschriftungen. Jedes Format lässt sich in die Zwischenablage kopieren oder als Datei herunterladen. Einen PNG- oder ASE-Export (Adobe-Farbfelder) gibt es nicht; die SVG-Farbtafel kommt einem teilbaren Bild der Palette am nächsten.

Nein. Auf dieser Seite gibt es keinen Upload-Endpunkt: Dein Browser öffnet die Datei, und das Werkzeug liest die Pixel von einem Canvas im selben Tab. Es gibt kein Konto und keine Analyse. Zum Prüfen öffnest du den Netzwerk-Tab deines Browsers und nimmst ein paar Farben auf: Es erscheint keine Anfrage. Der End-to-End-Test des Projekts macht dasselbe und schlägt fehl, sobald eine Anfrage die Seite verlässt. Die einzige Ausnahme ist das Einfügen einer Bild-URL, denn dann ruft dein Browser diese Adresse beim Anbieter ab.

Ja, du nutzt gerade eine. Diese Farbpipette ist kostenlos: keine Anmeldung, kein Wasserzeichen, kein Tageslimit und keine kostenpflichtige Pro-Version. Jedes Farbformat, die Palettenextraktion und alle sechs Exportformate stehen allen offen. Das geht nur, weil die Arbeit auf deinem Gerät passiert und pro Bild keine Serverkosten anfallen. Du kannst sie online am Rechner, Tablet oder Handy nutzen, in jedem modernen Browser und ohne Installation. Setz ein Lesezeichen, wenn du sie griffbereit haben willst; der Link in der Adressleiste enthält außerdem die zuletzt aufgenommene Farbe.

Die, die deine Frage beantwortet, und im Grunde lohnt es sich, nur vier Dinge zu prüfen. Schickt sie deine Datei an einen Server oder liest sie sie im Browser? Liefert sie mehr als einen HEX-Code, etwa eine Palette, eine Kontrastprüfung oder eine Farbskala? Kannst du den Aufnahmebereich vergrößern, damit ein verrauschtes Foto lesbar wird? Und bekommst du das Ergebnis in einem Format, das deine Tools verstehen? Diese Farbpipette erfüllt alle vier Punkte. Die Grenzen: Die Bildschirm-Pipette funktioniert nur in Chromium-Browsern, und einen ASE- oder PNG-Export gibt es nicht.

Mach den Screenshot, komm zurück auf diese Seite und drück Strg + V (auf dem Mac Cmd + V). Das Bild lädt sofort. Klick auf das Pixel, das du brauchst, und kopiere seinen HEX-Code. Screenshots werden meist als PNG ohne Kompression gespeichert, deshalb stimmt der Code in der Regel mit dem überein, was auf deinem Bildschirm zu sehen war.

Lade das Bild und öffne den Tab „Bildpalette“. Das Werkzeug fasst das Bild zu seinen acht Hauptfarben zusammen und zeigt, wie viel vom Bild jede davon einnimmt. Kopiere ein einzelnes Farbfeld oder exportiere die ganze Palette als CSS-Variablen, Tailwind-Theme, SCSS, JSON, HEX-Liste oder SVG-Farbtafel.

Ja. Jede aufgenommene Farbe zeigt den nächstgelegenen CSS-Farbnamen, etwa „slateblue“ oder „tomato“, ausgewählt danach, wie ähnlich die Farben aussehen, nicht nach dem Abstand der RGB-Zahlen, dazu eine kurze Beschreibung in Worten. Der Name ist die nächste Übereinstimmung, der HEX-Code ist der exakte Wert.

Nicht direkt. Googles eigener Farbwähler, der bei Suchen wie „Farbwähler“ erscheint, lässt dich eine Farbe aus einem Spektrum wählen, kann aber kein Pixel aus deinem Bild auslesen. Um den genauen Code aus einem Foto oder Screenshot zu bekommen, öffne es in einer Farbpipette und klick auf das Pixel.

Nein. Diese Farbpipette läuft in jedem aktuellen Browser auf Computer und Handy, ohne Installation. Um eine Farbe von einer beliebigen Stelle des Bildschirms aufzunehmen, nutze den Button „Vom Bildschirm aufnehmen“, der in Chrome und Edge funktioniert. In anderen Browsern machst du einen Screenshot und fügst ihn hier ein.