WebyTooly

Farbwähler für Bilder

Lade ein Bild hoch und klicke darauf, um die exakte Farbe dieses Pixels als HEX, RGB und HSL zu lesen.

Espacio publicitario

Zieh dein Bild hierher oder klicke, um es auszuwählen

Unterstützt JPG, PNG, WebP und GIF

Espacio publicitario

So wird die Farbe eines Pixels gelesen

Beim Hochladen wird das Bild einmal in Originalgröße auf eine verborgene Canvas gezeichnet. Beim Klick rechnen wir die Zeigerposition im angezeigten Element in Canvas-Koordinaten um und holen genau diesen einen Pixel mit getImageData.

HEX = #RRGGBB mit jedem Kanal zur Basis 16

Der Browser liefert vier Werte von 0 bis 255 (Rot, Grün, Blau und Alpha). HEX ist einfach diese drei Kanäle in Hexadezimal, HSL wird aus dem größten und kleinsten Kanal berechnet.

L = (max + min) ÷ 2

Angezeigt wird die Farbe genau dieses Pixels, ohne Mittelung mit den Nachbarn: Bei rauschigen JPG können zwei benachbarte Pixel leicht unterschiedliche Werte liefern.

S = (max − min) ÷ (1 − |2L − 1|)

Praktisches Beispiel

Ein Klick auf ein Corporate-Blau liefert #3366FF, also rgb(51, 102, 255) und hsl(225, 100%, 60%): dieselbe Farbe in drei Schreibweisen.

Häufig gestellte Fragen

Kann ich das mit Screenshots nutzen?
Ja. Es ist der schnellste Weg, die exakte Markenfarbe aus einem Screenshot oder dem Foto eines Plakats zu holen.
Warum passt die Farbe nicht zu dem, was ich sehe?
Das kann am Farbprofil deines Monitors oder an einem im Bild eingebetteten Profil liegen. Wir zeigen den Pixelwert so, wie der Browser ihn decodiert.
Welches Farbformat nehme ich in CSS?
HEX ist am gebräuchlichsten, RGB erlaubt Transparenz über rgba(), und HSL ist am bequemsten, um hellere oder dunklere Varianten desselben Farbtons zu bauen.
Funktioniert das mit transparenten Bildern?
Ja, und wir zeigen zusätzlich den Alphawert des gewählten Pixels an.

Verwandte Rechner