Farbpipette für Bilder: HEX- und RGB-Wert auslesen
Ein Kunde schickt das Foto seines Ladens und schreibt: "Genau dieses Grün." Eine Markendatei gibt es nicht. Die Farbpipette für Bilder löst das in einem Klick. Du klickst auf die Fläche und liest HEX- und RGB-Wert ab. Zusätzlich sucht das Tool im ganzen Bild bis zu acht häufige Farben und legt sie als Farbfelder unter das Foto.
Vom Bild zum Wert in fünf Schritten
- Klicke auf die Ablagefläche oder ziehe ein Bild darauf. Die Dateiauswahl nimmt jeden Bildtyp an, den dein Browser öffnen kann; PNG, JPG und WebP sind die sichere Wahl.
- Klicke auf eine Stelle im Bild. Das große Farbfeld zeigt die Farbe, die Felder für HEX und RGB füllen sich.
- Mit dem Kopieren-Button neben HEX Code oder RGB Code landet der Wert in der Zwischenablage.
- Ein Klick auf ein Farbfeld der Palette macht es zur aktuellen Farbe und kopiert zugleich den HEX-Code.
- Mit Anderes Bild startest du mit einer neuen Datei.
Drei Aufgaben, bei denen ein Klick reicht
Ein Button soll zum Logo auf einem Screenshot passen. Das Blau eines Diagramms steckt in einem PDF, das du als Bild exportiert hast. Oder du suchst den Himmelston eines Fotos, damit ein Textbanner dazu passt. Die Farbfelder helfen außerdem bei der Frage, woraus ein Motiv besteht, bevor du ein Farbschema darum baust.
Warum zwei Klicks verschiedene Werte liefern
Ein Klick liest genau einen Pixel, und zwar in der Originalgröße der Datei. Die Vorschau ist auf 400 Pixel Höhe begrenzt, die Auswahl nutzt aber die volle Auflösung. In einem verrauschten Foto unterscheiden sich Nachbarpixel um mehrere Stufen. Klicke bei einem seltsamen Wert also ruhig noch einmal.
Was die Palette nicht ist
- Eine Schätzung: Das Tool prüft rund 10.000 Pixel.
- Gerundet auf Schritte von 16 pro Kanal. Ein Farbfeld kann deshalb bis zu 8 vom echten Pixel abweichen.
- Ohne Pixel, die weitgehend transparent sind. Die überspringt das Tool.
Bei sehr großen Bildern dauert die Analyse einen Moment, weil das ganze Bild für die Palette einmal gelesen wird. Angezeigt werden nur HEX und RGB, ohne HSL und ohne Alphawert. Eine Vorschau beim Überfahren gibt es nicht.
Was im Browser bleibt
Die Datei wird per FileReader gelesen und im Browser auf eine Canvas gezeichnet. Die Pixeldaten liest das Tool mit getImageData aus dieser Canvas. Beim Öffnen eines Bildes und beim Klicken auf eine Farbe wird keine Anfrage gesendet. Das kannst du im Netzwerk-Tab der Entwicklertools prüfen. Die Zwischenablage nutzt das Tool nur, wenn du einen Kopieren-Button drückst oder ein Farbfeld anklickst.