Tokenlabor

Farbe aus Bild auslesen

Farbe aus Bild auslesen mit der Pipette: Pixel anklicken, mit Lupe zielen und HEX, RGB und HSL kopieren, auch als Mittelwert über eine Fläche.

Bildschirm

Zeiger über das Bild bewegen

HEX–
RGB–
HSL–
Gemerkte Farben

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    Farben genau aus Bildern messen

    Mit dieser Pipette online können Sie eine Farbe aus Bild-Dateien auslesen: Bild laden, mit der Maus über das Bild fahren und klicken. Die Lupe zeigt die Pixel rund um den Zeiger stark vergrößert, damit Sie auch schmale Linien und kleine Flächen genau treffen. Der Farbwert aus Bild und Klickstelle erscheint sofort als HEX-Code, RGB und HSL.

    Der HEX-Code aus Bild-Dateien lässt sich direkt in CSS, Grafikprogramme oder Präsentationen übernehmen. Für Fotos ist der Mittelwert über 3 × 3 bis 11 × 11 Pixel oft sinnvoller als ein einzelner Pixel, weil Rauschen und JPG-Artefakte einzelne Pixel verfälschen. Jeder Klick landet in der Liste der gemerkten Farben, die Sie gesammelt kopieren können. Auf dem Handy tippen Sie einfach auf die Stelle. So arbeitet der Color Picker Bild für Bild ohne Installation.

    Um den RGB-Wert ermitteln zu können, der außerhalb des Browsers auf dem Bildschirm zu sehen ist, bietet der Knopf „Farbe vom Bildschirm“ in Chrome und Edge die EyeDropper-Schnittstelle an. Grenzen: Farbprofile werden vom Browser in sRGB umgerechnet, die Werte können daher leicht vom Original in einem Grafikprogramm abweichen. Eine ganze Palette ermittelt Farbpalette aus Bild, Umrechnungen in weitere Farbräume der Farbumwandler. Die Bilder werden nur in Ihrem Browser verarbeitet und als Download angeboten. Es wird nichts hochgeladen.

    Anleitung: Farbe aus Bild auslesen in 4 Schritten

    1. Wählen Sie unter „Bild wählen“ eine Datei, oder fügen Sie einen Screenshot mit Strg+V ein.
    2. Fahren Sie mit der Maus über das Bild; die Lupe zeigt die Pixel um den Zeiger stark vergrößert.
    3. Klicken oder tippen Sie auf die gewünschte Stelle; HEX, RGB und HSL erscheinen sofort und landen in der Liste „Gemerkte Farben“.
    4. Unter „Messfläche“ wählen Sie 1 Pixel oder den Mittelwert über 3 × 3 bis 11 × 11 Pixel; mit „Kopieren“ übernehmen Sie einen Wert.

    Typische Anwendungsfälle

    • Die genaue Markenfarbe aus einem Logo oder Screenshot für CSS übernehmen.
    • Farben einer Vorlage nachbauen, von der nur ein Bild vorliegt.
    • Hautton, Himmel oder Stoff aus einem Foto als Durchschnittswert messen, statt einen einzelnen verrauschten Pixel zu treffen.
    • Farbwerte aus Diagrammen ablesen, um eine Legende zuzuordnen.
    Fragen

    Häufige Fragen

    Wie finde ich den HEX-Code einer Farbe in einem Bild?

    Bild laden und auf die Stelle klicken. Der HEX-Code steht rechts neben der Lupe und lässt sich mit einem Klick kopieren.

    Kann ich einen Screenshot direkt einfügen?

    Ja. Kopieren Sie den Screenshot in die Zwischenablage und drücken Sie auf der Seite Strg+V (auf dem Mac Cmd+V).

    Warum zeigt jeder Pixel einen etwas anderen Wert?

    Fotos enthalten Rauschen und JPG-Kompression. Stellen Sie die Messfläche auf 5 × 5 oder 11 × 11, dann wird der Mittelwert gebildet.

    Funktioniert die Pipette auf dem Handy?

    Ja. Tippen Sie auf die gewünschte Stelle im Bild; beim Ziehen mit dem Finger folgt die Lupe.

    Warum weicht die gemessene Farbe vom Original-Logo ab?

    JPG-Kompression, Kantenglättung und Farbprofile verändern Pixel leicht. Messen Sie in einer großen einfarbigen Fläche mit 5 × 5 Mittelwert und nutzen Sie möglichst eine PNG- oder SVG-Vorlage.

    Kann ich auch Farben außerhalb des Browsers aufnehmen?

    In Chrome und Edge gibt es dafür den Knopf „Farbe vom Bildschirm“, der die EyeDropper-Schnittstelle des Browsers nutzt. Firefox und Safari bieten sie derzeit nicht an.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 558 Werkzeuge

    Farbumwandler

    HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

    Öffnen

    Farbpalette aus Bild

    Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

    Öffnen

    Kontrast prüfen (WCAG)

    Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

    Öffnen

    CSS-Gradient-Generator

    Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

    Öffnen

    Box-Shadow-Generator

    CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

    Öffnen

    Flexbox-Generator

    Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

    Öffnen