Farbpipette für Bilder – den HEX-Code jedes Pixels auslesen

Was diese Farbpipette macht

Das hier ist eine Pipette und kein Palettengenerator: Sie entscheiden, welches Pixel gemessen wird, und das Tool meldet exakt, was dort gespeichert ist. Erklärenswert ist, wie so eine Messung zustande kommt, denn der naheliegende Weg ist auf subtile Weise falsch. Das ganze Bild auf ein Canvas zu zeichnen und die Pixel von dort zurückzulesen, scheitert bei großen Fotos – Browser begrenzen die Canvas-Gesamtfläche auf rund 16,7 Millionen Pixel, etwa 4096 mal 4096, und eine 24-Megapixel-Kameradatei überschreitet das mühelos. Das Bild passend zu verkleinern würde jede Messung zum Mittelwert mehrerer Originalpixel machen – ausgerechnet das, was eine Pipette richtig machen muss, wäre als Erstes verloren. Stattdessen wird bei jeder Messung nur ein kleiner Ausschnitt rund um den Zeiger neu gezeichnet, direkt aus der dekodierten Datei und exakt im Verhältnis 1 zu 1. Quell- und Zielrechteck sind gleich groß, der Browser kopiert die Pixel also, statt sie neu abzutasten, und die Werte, die Sie erhalten, sind die eigenen Bytes der Datei – ganz gleich, wie groß das Bild ist. Die Vorschau, die Sie sehen, ist eventuell auf die Canvas-Grenze oder Ihren Bildschirm herunterskaliert, gemessen wird aber nie aus ihr. Derselbe Ausschnitt speist die Lupe, die jedes Quellpixel als 13 Pixel großes Quadrat mit Gitterlinien dazwischen zeichnet und die mittlere Zelle schwarz-weiß umrandet, damit sie über jeder Farbe sichtbar bleibt. Sie brauchen sie: Ein 4000 Pixel breites Foto in einer 720 Pixel breiten Spalte legt rund 5,6 Bildpixel unter jedes Bildschirmpixel. Die Pfeiltasten verschieben die Messstelle um genau ein Quellpixel und Umschalt plus Pfeil um zehn – der einzige verlässliche Weg, eine ein Pixel breite Linie oder eine dünne, kantengeglättete Kante zu treffen. Jede Farbe wird als HEX, RGB und HSL aus demselben 8-Bit-Tripel gemeldet, dazu achtstelliges HEXA und RGBA, wenn das Pixel nicht vollständig deckend ist. Die wirkliche Grenze heißt Farbmanagement: Canvas verwirft in den meisten Browsern das eingebettete ICC-Profil, die Werte entsprechen also dem, was der Browser zeichnet, und nicht dem, was ein farbverwalteter Editor anzeigt.