Skip to main content

Image Color Picker

Upload an image and pick colors in HEX, RGB, and HSL with a visual color history.

Geprüft von · Zuletzt geprüft

🎨

Drop an image here or click to upload

Click anywhere on the image to pick a color

Den Bild-Farbpicker verwenden

  1. Lade ein Bild hoch - ziehe eine Datei auf die Dropzone oder klicke zum Wählen. JPEG, PNG, WebP, GIF, AVIF und BMP funktionieren alle; jedes Format, das dein Browser anzeigen kann, wird akzeptiert.
  2. Bewege den Cursor über das Bild, um die Live-Farbleseanzeige Pixel für Pixel zu aktualisieren.
  3. Klicke auf eine Stelle, um diese Farbe einzusperren und dem Verlaufs-Panel hinzuzufügen. Das Detail-Panel zeigt HEX, RGB und HSL.
  4. Klicke auf eine Zeile im Detail-Panel (HEX, RGB oder HSL), um sie in deine Zwischenablage zu kopieren. Klicke auf einen Verlaufs-Farbton, um seinen HEX-Wert direkt zu kopieren.
  5. Klicke weiter, um eine Palette mit bis zu 20 abgetasteten Punkten zu erstellen; älteste Einträge fallen weg, wenn der Verlauf voll ist.

Wie die Pipette Pixel liest

Wenn du ein Bild hochladst, zeichnet das Werkzeug es in ein Offscreen-HTML-<canvas>-Element in den natürlichen Abmessungen des Bildes. Das Bewegen des Cursors über das angezeigte Bild berechnet die entsprechende Canvas-Koordinate (unter Verwendung des aktuellen DOM-Größe vs. natürliche Größe-Verhältnisses) und ruft CanvasRenderingContext2D.getImageData(x, y, 1, 1) auf, das ein vier-Byte-Uint8ClampedArray zurückgibt, das die Rot-, Grün-, Blau- und Alpha-Werte dieses einen Pixels enthält. Diese vier Bytes werden in die drei Anzeigeformate konvertiert: HEX über Hex-String-Formatierung, RGB über Template-Literal, HSL über die CSS Color Module Level 4-Konvertierung. Weil getImageData direkt aus dem dekodierten Pixel-Puffer liest, sind die Werte byte-genau zur Quelldatei - keine Rendering-Schicht-Interpolation, keine Farbprofil-Transformation, kein verlustbehaftetes Sampling. Der einzige Vorbehalt ist, dass das Canvas "tainted"-frei sein muss, was der Fall ist, solange das Bild von einer gleich-ursprünglichen oder CORS-fähigen Quelle geladen wird; der Datei-Upload-Pfad erfüllt dies immer.

Wann die Pipette das richtige Werkzeug ist

  • Markenfarben aus einem Screenshot einer Konkurrenz-Website extrahieren, wenn du das CSS nicht sehen kannst.
  • UI-Farben an ein Foto anpassen - das genaue Petrol eines Ozean-Shots oder das warme Ocker eines Sonnenuntergangs für einen Hero-Abschnitt erfassen.
  • Eine Palette aus einem Mood-Board erstellen: Das Board hochladen, die dominanten Tone anklicken und den Verlauf als Palette exportieren.
  • Eine Designdatei zurückentwickeln, wenn der Kunde einen PNG-Export statt der bearbeitbaren Quelle übergeben hat.
  • Den Farbton eines Druckassets identifizieren - ein gedrucktes Stück fotografieren, hochladen, die Markenfarbe abtasten und für den nächsten Druckauftrag in CMYK konvertieren.

Fallstricke und Abtast-Vorbehalte

Erstens: JPEG-Kompression: 8x8-Block-Quantisierung kann ein einzelnes Pixel mehrere Einheiten nach oben oder unten verschieben, sodass das Abtasten eines Punktes den komprimierten Wert statt der Originalfarbe gibt. Taste benachbarte Pixel ab und durchschnittliche, oder reaquiriere in PNG wenn Genauigkeit wichtig ist. Zweitens: sRGB-Annahme: Pixel-Bytes werden als sRGB interpretiert. Fotografien, die mit Display P3 oder Adobe RGB gekennzeichnet sind, haben Profile, die der Browser beim Rendern ehrt, die getImageData jedoch nicht anwendet - die rohen Bytes sind gespeicherte Bytes, nicht angezeigte Farbe. Drittens: animierte GIFs und Video: das Canvas erfasst den ersten Frame eines GIFs, und Video-Quellen werden nicht unterstützt. Viertens: Retina-Skalierung: Das angezeigte Bild wird auf den Viewport skaliert, sodass ein Cursor-Pixel mehreren Quell-Pixeln entspricht; das Werkzeug konvertiert Koordinaten korrekt, aber vergrößere das Bild für hochpräzises Sampling.

Die Canvas- und Datei-API hinter dem Werkzeug

Die Datei-API des Browsers (W3C File API Empfehlung 2022) bietet die FileReader- und URL.createObjectURL-Einstiegspunkte für das Lesen von benutzerseitig gewählten Dateien ohne Server-Roundtrip; das hochgeladene Bild wird über eine Blob-URL in ein HTMLImageElement geladen. Die Canvas-2D-API (HTML Living Standard) behandelt das Raster-Zeichnen via drawImage und das Pixel-Lesen via getImageData. Diese beiden APIs zusammen ermöglichen die gesamte Pipeline lokal auszuführen: Datei dekodieren, auf Canvas zeichnen, Pixel-Puffer lesen, Farbe formatieren. Kein MIME-Typ-Upload zu einem Bildverarbeitungs-Dienst, kein serverseitiges Thumbnailing, keine Drittanbieter-Abhängigkeit. Die Clipboard-API (W3C Clipboard API Level 2) behandelt die Kopieren-in-Zwischenablage-Aktion via navigator.clipboard.writeText, dem modernen asynchronen berechtigungsgesteuerten Ersatz für das veraltete document.execCommand("copy").

Vergleich mit Desktop- und Browser-Pipetten

Apples Digital Color Meter und Windows PowerToys Color Picker tasten jeden Pixel auf dem Bildschirm ab (nicht nur innerhalb einer Webseite), was kräftiger ist, um Desktop-Apps zurückzuentwickeln oder Farben zwischen mehreren Fenstern zu vergleichen. Chrome hat seit Version 95 eine native EyeDropper-API ausgeliefert - Seiten können new EyeDropper().open() aufrufen, damit der Benutzer jeden Pixel auf der Seite auswählt, was schneller ist als dieses Werkzeug, wenn das Quellbild bereits im Browser sichtbar ist. Figma und Sketch haben eingebaute Pipetten, die innerhalb des Dokuments abtasten. Die Nische dieses Werkzeugs ist der Hochladen-eines-Bildes-Pfad: du hast eine PNG oder JPEG auf der Disk, möchtest Farben daraus extrahieren, ohne irgendwas zu installieren, und möchtest die HEX-, RGB- und HSL-Darstellungen in einer Ansicht. Chromes native EyeDropper wird letztendlich einiges davon ersetzen, aber für Nicht-Chromium-Browser und für den expliziten Hochladen-und-Abtasten-Workflow bleibt der canvas-basierte Ansatz der sauberste.

Häufig gestellte Fragen

Wie genau sind die abgetasteten Farben?

Byte-genau zum dekodierten Pixel. Das Werkzeug verwendet <code>getImageData</code>, das direkt aus dem Canvas-Pixel-Puffer in sRGB-Byte-Reihenfolge liest - was du siehst, ist was die Datei speichert (nachdem der Bild-Decoder des Browsers gelaufen ist). Die einzigen Genauigkeitsverluste kommen vom Dateiformat selbst: JPEG-Quantisierung kann einzelne Pixel um ein paar Einheiten verschieben, und Bilder mit Nicht-sRGB-Farbprofilen werden als rohe sRGB-Bytes ohne Profilkonvertierung gelesen.

Warum gibt mein JPEG bei benachbarten Pixeln leicht unterschiedliche Werte?

Weil JPEG-Kompression auf 8x8-Blöcken arbeitet und Farbinformationen im Cb/Cr-Chroma-Kanal aggressiv quantisiert. Benachbarte Pixel in einem JPEG teilen oft identische Luminanz, unterscheiden sich aber bei der Chroma um kleine Mengen, was als leichte RGB-Variation erscheint. Für kritische Farbarbeit verwende eine PNG- oder WebP-Quelle (beide sind verlustfrei oder nahezu verlustfrei), oder taste eine kleine Nachbarschaft ab und durchschnittliche die Ergebnisse.

Kann das Werkzeug Farben aus einem PDF oder SVG lesen?

SVG ja über Rasterisierung (Rechtsklick und "Bild speichern unter" als PNG zuerst), PDF nein. Für PDFs öffne in einem PDF-Leser, mach einen Screenshot und lade den Screenshot hoch. Direkte SVG-Unterstützung würde das Parsen des DOM und das Traversieren der Füllfarben erfordern - außerhalb der Canvas-Pipeline dieses Werkzeugs.

Worauf basiert die HSL-Ausgabe?

Auf derselben CSS Color Module Level 4 HSL-Formel, die jeder Browser für seinen <code>hsl()</code>-Parser verwendet: Helligkeit ist der Durchschnitt der maximalen und minimalen RGB-Kanäle, Sättigung ist Chroma dividiert durch eins minus den absoluten Helligkeits-Offset von 0,5, und Farbton ist der Winkel auf dem RGB-Zylinder. HSL ist praktisch für Anpassungen - du kannst den Farbton ändern ohne die Helligkeit zu beeinflussen - aber denke daran, dass es nicht wahrnehmungsgleichmäßig ist; zwei HSL-Farben mit derselben Helligkeit können in der tatsächlichen Helligkeit sehr unterschiedlich aussehen.

Wird mein Bild auf einen Server hochgeladen?

Nein. Die Datei wird über die Datei-API des Browsers in eine Blob-URL gelesen, die auf den aktuellen Tab beschränkt ist, in ein Offscreen-Canvas gezeichnet und lokal pixel-abgetastet. Keine Fetch-Anfrage trägt dein Bild, kein Analytik-Ereignis enthält die Datei, und die Blob-URL wird widerrufen, wenn du navigierst. Du kannst dein Netzwerk nach dem Laden der Seite trennen und das Werkzeug funktioniert noch.

Wie viele Farben kann ich im Verlauf speichern?

Der Verlaufs-Bereich fasst 20 Einträge. Klicken über 20 hinaus verwirft die ältesten Einträge zuerst, FIFO. Das ist eine vernünftige Obergrenze, weil das Panel weit darüber schwer zu durchsuchen wäre, und weil die meisten Paletten-Erstellungs-Workflows fünf bis zehn Farben brauchen, nicht fünfzig. Wenn du mehr persistieren möchtest, kopiere jeden HEX-Wert in ein externes Dokument, während du abtastest.

Funktioniert es auf Mobilgeräten?

Ja. Das Drop-zum-Hochladen wird auf Touch-Geräten zu einem Tippen-zum- Datei-Wählen-Ablauf, und Hovern wird durch Tippen-und-Ziehen ersetzt: Das Bild antippen, zum gewünschten Punkt gleiten und loslassen, um abzutasten. iOS Safari, Android Chrome und das mobile Firefox unterstützen alle die Datei-API und Canvas-2D-API, die hier verwendet werden. Der wichtigste mobile Vorbehalt ist Zoom - vergrößere das Bild per Fingerspreizen für präzises Abtasten kleiner Details.

Warum sieht eine Farbe mit Transparenz manchmal nach dem Abtasten anders aus?

Weil das Werkzeug die gespeicherten RGB-Bytes unabhängig vom Alphakanal meldet. Ein halb-transparentes rosafarbenes Pixel auf einem transparenten Hintergrund hat RGB (255, 192, 203) plus Alpha 0,5, und das Werkzeug meldet das RGB als ob es undurchsichtig wäre. Wenn du die zusammengesetzte Farbe so wie sie gegen einen bestimmten Hintergrund rendert möchtest, zeichne das Bild zuerst auf ein farbiges Canvas und taste dann ab.

Ist das dasselbe wie die native EyeDropper-API?

Ähnlich, aber mit unterschiedlichem Umfang. Die W3C-EyeDropper-API (in Chrome 95, 2021 ausgeliefert) ermöglicht es einer Seite, jeden aktuell sichtbaren Pixel im Browser-Fenster abzutasten, was gut für das Aufnehmen von Farben von einer gerenderten Seite ist, aber nutzlos wenn die Farbe, die du möchtest, in einer Datei auf deiner Disk ist, die nicht auf dem Bildschirm geöffnet ist. Dieses Werkzeug zielt auf den Hochladen-und- Aufnehmen-Workflow speziell ab und funktioniert in jedem Browser unabhängig von der EyeDropper-Unterstützung.

Kann ich das für den Druckfarbabgleich verwenden?

Teilweise. Das Werkzeug gibt dir genaue sRGB-Werte, die du im begleitenden Farbkonverter in CMYK umwandeln kannst. Für produktionsqualitativen Druckabgleich brauchst du immer noch ein ICC-Profil für deine Zieldruckmaschine und einen kalibrierten Monitor - die CMYK-Ausgabe des Farbkonverters ist eine Bildschirmnäherung, keine druckfertige Trennung. Verwende dieses Werkzeug, um die Zielfarbe zu identifizieren, und führe das Ergebnis dann in Photoshop oder InDesign mit deinem Druckprofil für die echte Konvertierung ein.

Mehr Image Tools

Base64 to Image Converter

Decode a Base64 string or data URL back into a viewable image and download it as PNG, JPG, WebP or GIF. Runs in your browser.

Open tool

Favicon Generator

Generate favicons in all standard sizes (16x16 to 512x512) for websites and PWAs.

Open tool

Image Blur & Pixelate

Apply blur or pixelation effects to images with adjustable intensity.

Open tool

Image Compressor

Compress images by adjusting quality to reduce file size without losing visual clarity.

Open tool

Image Cropper

Crop images with preset aspect ratios like 1:1, 16:9, and 4:3 using a visual editor.

Open tool

Image Flip & Rotate

Flip images horizontally or vertically and rotate by 90, 180, or 270 degrees.

Open tool