Bild-Farbpipette

Foto hochladen und irgendwo klicken, um die genaue Farbe zu bestimmen — Hex-, RGB- und HSL-Werte, mit einer laufenden Palette aller gepickten Farben.

1.190 Aufrufe

Klicken Sie auf das Bild, um eine Farbe auszuwählen

Wie die Farbauswahl Funktioniert

Wenn ein Foto hochgeladen wird, wird es innerhalb des Browsers auf ein HTML5-<canvas>-Element gezeichnet. Ein Klick an einer beliebigen Stelle des Bildes ruft die Canvas-API-Funktion getImageData() genau an dieser Pixelkoordinate auf, die die für dieses Pixel gespeicherten rohen Rot-, Grün-, Blau- und Alphakanalwerte zurückgibt — keine Annäherung oder ein aus einem Screenshot abgetasteter Farbwert, sondern dieselben numerischen Daten, die der Browser selbst verwendet, um das Bild darzustellen. Diese Rohwerte werden anschließend gleichzeitig als Hex (zum Beispiel #3a7bd5), RGB (zum Beispiel rgb(58, 123, 213)) und HSL (Farbton, Sättigung, Helligkeit) umgerechnet und angezeigt, sodass jedes Format, das ein Design-Tool benötigt, sofort zum Kopieren bereitsteht.

Jedes so verarbeitete Bild wird in sRGB dekodiert und gelesen, dem Standard-Farbraum, den die überwiegende Mehrheit digitaler Fotos, Bildschirme und Kameras verwendet. Er gilt als angenommener Standard, sofern ein Bild nicht ausdrücklich ein anderes Farbprofil einbettet — was praktisch die gesamte Verbraucherfotografie und alle Webbilder abdeckt.

Was Sie Wissen Sollten

  • Es wird nichts irgendwohin hochgeladen — der gesamte Vorgang, vom Zeichnen des Bildes bis zum Auslesen der Pixeldaten, läuft lokal im Browser-Speicher ab. Kein Server erhält jemals das Foto.
  • Die Ablesung ist exakt, nicht geschätzt — da getImageData() den tatsächlich gespeicherten Pixelwert zurückgibt, wird die Genauigkeit nur von der Qualität des Bildes selbst und der exakten Klickposition begrenzt, nicht von Bildschirmhelligkeit, Kontrast oder Kalibrierung.
  • Komprimierung kann die wahre Farbe leicht verschieben — JPEG-Komprimierung mittelt die Farbe über kleine Pixelblöcke, sodass ein stark komprimiertes Foto einen leicht anderen Wert zurückgeben kann als die ursprüngliche Szenenfarbe; PNG und andere verlustfreie Formate bewahren den exakt erfassten Wert.
  • Jede ausgewählte Farbe erweitert eine laufende Palette unterhalb des Bildes, sodass sich mehrere Punkte aus einem Foto abtasten lassen — ein Himmel, ein Hemd, eine Wand — und in einer Sitzung ein kleines abgestimmtes Farbset exportiert werden kann.

Häufig gestellte Fragen

Wie genau ist die ausgewählte Farbe?

Es liest den exakten Pixelwert aus dem Canvas an der geklickten Stelle — so genau wie das Bild selbst und Ihre Klickpräzision, unbeeinflusst von der Bildschirmkalibrierung, da rohe Pixeldaten gelesen werden, nicht das, was Ihre Augen wahrnehmen.

Wird mein Foto irgendwohin hochgeladen?

Nein — das Bild wird auf ein lokales Canvas-Element gezeichnet und vollständig clientseitig ausgewertet. Nichts verlässt Ihren Browser.

Was ist sRGB und warum ist es wichtig?

sRGB ist der Standard-Farbraum, den die meisten digitalen Kameras, Telefone, Monitore und Webbilder standardmäßig verwenden. Da fast jedes hier hochgeladene Foto bereits in sRGB kodiert ist, stimmen die von diesem Tool gelesenen Hex-, RGB- und HSL-Werte mit dem überein, was die meiste Designsoftware ohne jede Umwandlung anzeigen würde. Fotos, die in einem breiteren Farbraum wie Adobe RGB aufgenommen und nicht umgewandelt wurden, können im Vergleich zu sRGB-basierten Tools eine Abweichung zeigen.

Warum kann dieselbe Farbe in zwei Fotos leicht unterschiedlich aussehen?

Lichtverhältnisse, Weißabgleich und Kameraverarbeitung beeinflussen alle die genauen RGB-Werte, die eine Kamera für das aufzeichnet, was dem Auge wie dieselbe Farbe erscheint — eine weiße Wand, die bei Sonnenuntergang fotografiert wird, nimmt einen warmen Farbstich an, den eine Pipette ehrlich als leicht orange getöntes Weiß liest, nicht als reines Weiß. JPEG-Komprimierung kann zudem sehr kleine pixelgenaue Verschiebungen an scharfen Farbkanten verursachen.

Können Farben aus einem mit dem Handy aufgenommenen Foto ausgewählt werden?

Ja — jede Bilddatei, die der Browser anzeigen kann, einschließlich JPEG, PNG, WebP und den meisten anderen gängigen Formaten, funktioniert mit diesem Tool, unabhängig davon, mit welchem Gerät oder welcher Kamera sie aufgenommen wurde.

Kommentare

Noch keine Kommentare — schreiben Sie den ersten!

Ähnliche Tools