Farbe aus einem Bild aufnehmen
Lade ein Bild, fahr mit dem Zeiger darüber und klick auf die Stelle, deren Farbe du brauchst. Die Lupe zeigt die Bildpunkte vergrößert, damit du auch an einer Kante genau triffst. Der Wert steht sofort als HEX, RGB und HSL zum Kopieren bereit, dazu eine Palette der häufigsten Farben des Bildes. Alles rechnet dein Browser, das Bild wird nirgendwohin geschickt.
Wie treffe ich den richtigen Bildpunkt?
Ein Bild wird auf dem Bildschirm fast nie in seiner echten Größe gezeigt. Ein Foto mit 4000 Punkten Breite passt in eine Spalte von 600 Punkten, jeder angezeigte Punkt steht also für rund sieben echte. Genau dort greift eine Pipette daneben: Sie liest den angezeigten Punkt statt des Bildpunkts darunter.
Dieses Werkzeug rechnet die Zeigerposition erst in einen Anteil der Anzeigefläche um und daraus in Bildspalte und Bildzeile. Die Lupe zeigt neun mal neun echte Bildpunkte um das Fadenkreuz herum, mit dem aufgenommenen Punkt in der Mitte. Am Bildrand bleiben die Felder leer, statt auf der Gegenseite weiterzulaufen.
Drei Wege führen zum Bild:
- Auswählen oder Ablegen. Die Fläche nimmt jedes Format an, das dein Browser anzeigen kann, also JPG, PNG, WebP, GIF und meist auch AVIF.
- Einfügen. Ein Screenshot in der Zwischenablage landet mit Strg + V (Mac: Cmd + V) direkt im Werkzeug, ganz ohne Datei.
- Tastatur. Wähl das Bild mit der Tabulatortaste an, bewege das Fadenkreuz mit den Pfeiltasten, mit gedrückter Umschalttaste in Zehnerschritten, und nimm die Farbe mit Enter auf.
Kann ich Farben außerhalb dieser Seite aufnehmen?
In manchen Browsern ja. Die EyeDropper-API übergibt die Pipette an das Betriebssystem: Der Zeiger wird zur Lupe und liest jeden Bildpunkt deines Bildschirms, auch aus einem anderen Fenster, einem Video oder einem PDF. Das ist der eigentliche Mehrwert gegenüber einer reinen Bild-Pipette.
Sie ist aber nicht überall vorhanden. Stand 2026 gilt:
| Browser | Bildschirm-Pipette |
|---|---|
| Chrome, Edge, Opera (Chromium) | vorhanden, nur über HTTPS |
| Firefox | nicht vorhanden |
| Safari (macOS und iOS) | nicht vorhanden |
Deshalb erscheint der Knopf hier nur, wenn dein Browser die Funktion wirklich anbietet. Fehlt sie, steht an derselben Stelle ein klarer Hinweis. Ein stiller Ersatz, der stattdessen etwas anderes tut, wäre schlimmer als die ehrliche Auskunft. Technische Beschreibung: MDN, EyeDropper API.
Ohne die API kommst du trotzdem ans Ziel: Screenshot machen, mit Strg + V einfügen, Farbe aufnehmen.
Wie entsteht die Palette?
Nicht durch fünf zufällig gezogene Bildpunkte. Das klingt banal, ist aber genau die Stelle, an der viele Paletten-Werkzeuge falsch liegen, und zwar aus zwei Gründen.
Erstens das Rauschen. In einem Foto ist keine Fläche exakt einfarbig. Eine rote Wand besteht aus hunderten leicht verschiedenen Rottönen. Wer exakte Farbwerte zählt, findet dort nirgends eine Häufung und nennt stattdessen die kleinere, aber technisch einfarbige Fläche daneben zuerst. Deshalb kommt jeder ausgewertete Punkt zuerst in ein grobes Raster mit 32 statt 256 Stufen je Kanal, und benachbarte Raster werden anschließend zusammengefasst.
Der Abstand dafür wird nicht in RGB gemessen, sondern in OKLab. In RGB liegen zwei Grüntöne, die das Auge kaum unterscheidet, zahlenmäßig weit auseinander, während zwei deutlich verschiedene Blautöne dicht beieinanderliegen. OKLab ist so gebaut, dass gleiche Zahlenabstände ungefähr gleichen wahrgenommenen Abständen entsprechen (Björn Ottosson, 2020); derselbe Farbraum steht seit CSS Color Level 4 auch im Browser zur Verfügung.
Zweitens der Hintergrund. In fast jedem Produktfoto, Screenshot und Logo belegen Weiß und Schwarz die größte Fläche. Sortiert man stur nach Fläche, besteht jede Palette aus fünf Grautönen, und die Farbe, wegen der du das Bild geladen hast, steht nicht drin. Hier werden Fast-Weiß und Fast-Schwarz von Anfang an getrennt gezählt und getrennt ausgewiesen. Die Farbliste bleibt damit eine Farbliste, und du siehst trotzdem, wie viel Fläche Hintergrund und Schatten belegen.
Ein knalliges Hellgelb rutscht dabei nicht in den Weiß-Topf: Fast-Weiß greift nur, wenn die Farbe zugleich sehr hell und sehr flau ist.
Welches Farbformat brauche ich wofür?
| Format | Beispiel | Wofür es sich lohnt |
|---|---|---|
| HEX | #4f46e5 | Kürzeste Schreibweise, funktioniert überall, Standard in Design-Werkzeugen |
| RGB | rgb(79, 70, 229) | Gut lesbar, wenn Werte aus Code entstehen oder einzeln gerechnet werden |
| HSL | hsl(244, 76%, 59%) | Farbton, Sättigung und Helligkeit getrennt, ideal zum gezielten Abwandeln |
Alle drei beschreiben dieselbe sRGB-Farbe. Es geht also nicht um Qualität, sondern um deinen nächsten Schritt. Brauchst du zusätzlich HSV, OKLCH, CMYK oder den passenden CSS-Farbnamen, rechnet der Farb-Konverter alles auf einmal um und liefert Aufhellungen, Abdunklungen und Harmonien dazu.
Ist die Farbe als Textfarbe lesbar?
Direkt unter dem aufgenommenen Wert steht das Kontrastverhältnis nach WCAG gegen Weiß und gegen Schwarz. WCAG 2.1, Erfolgskriterium 1.4.3, verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text (W3C).
Dass diese Prüfung nicht nebensächlich ist, zeigt die Auswertung WebAIM Million 2024: Auf 81,0 Prozent der eine Million untersuchten Startseiten stand Text mit zu geringem Kontrast, der mit Abstand häufigste automatisch erkennbare Verstoß (webaim.org/projects/million).
Schafft weder Weiß noch Schwarz den nötigen Wert, taugt die Farbe allein nicht als Textfarbe. Der Kontrast-Checker prüft dann das konkrete Paar und schlägt die nächste Helligkeit vor, die das Kriterium erfüllt, ohne den Farbton zu verändern.
Wo liegen die Grenzen?
- JPEG verändert Bildpunkte. Die Kompression arbeitet in Blöcken; an Kanten und in ruhigen Flächen weicht der gespeicherte Wert vom ursprünglichen ab. Für eine exakte Markenfarbe ist die Design-Datei die Quelle, nicht das Foto.
- Farbprofile werden umgerechnet. Trägt das Bild ein Profil, das nicht sRGB ist, wandelt der Browser es um, bevor die Punkte auf der Zeichenfläche liegen. Du bekommst also den Wert, den Besucher sehen, nicht zwingend den, der in der Datei steht.
- Ein Screenshot ist keine Datei. Er hält fest, was dein Bildschirm zeigt, inklusive Helligkeit, Nachtmodus und Bildschirmprofil.
- Sehr große Bilder werden verkleinert. Die Zeichenfläche des Browsers ist unter iOS auf rund 16,7 Megapixel begrenzt. Darüber verkleinert das Werkzeug proportional und sagt es dir; die Farben verschieben sich dadurch minimal.
- Halbtransparente Bildpunkte kommen mit ihrem Alphawert zurück und werden für die Palette übergangen. Was du auf einem farbigen Untergrund tatsächlich siehst, ist die gemischte Farbe, nicht dieser Wert.
- CMYK ist keine Umrechnung ohne Profil. Für den Druck ist der Wert hier ein Anhaltspunkt, keine Vorlage.