Image Color Picker: Farbcode aus Bild auslesen

Lade das Bild in den Image Color Picker und klicke auf die Stelle, deren Farbe du brauchst. Das Tool zeigt sofort den HEX-Code, den RGB-Wert und den HSL-Wert dieses Pixels, mit „Kopieren“ übernimmst du den Wert. Ein Klick in die Sonne des Beispielbilds liefert #ffd166. Beim HEX-Code stehen je zwei Ziffern für Rot, Grün und Blau (ff = 255, d1 = 209, 66 = 102), deshalb gilt: #ffd166 ist rgb(255, 209, 102) und hsl(42, 100 %, 70 %).

Eine Farbpipette, auch Farbpicker oder Eyedropper genannt, liest die Farbe an einer Stelle aus und gibt sie als Farbcode aus. Dieser Image Color Picker ist eine Farbpipette online für Bilder und läuft im Browser, auch auf dem Handy, eine App brauchst du nicht. Auf dem Handy tippst du auf eine Stelle und ziehst den Finger, die Lupe zeigt die Pixel darunter. Per Tastatur verschiebst du die Auswahl mit den Pfeiltasten um 1 Pixel (mit Umschalt um 10) und speicherst die Farbe mit Enter im Verlauf.

Nein. Das Bild wird in deinem Browser auf eine Zeichenfläche gelegt und dort ausgewertet. Es gibt keinen Upload und keine Speicherung, auch der Verlauf der gewählten Farben bleibt nur in diesem Tab. Im Netzwerk-Tab der Entwicklertools kannst du nachsehen: Beim Laden und beim Klicken entstehen keine Anfragen.

Mache einen Screenshot (Windows: Windows+Umschalt+S, Mac: Cmd+Umschalt+4 mit Strg für die Zwischenablage) und füge ihn mit Strg+V (Mac: Cmd+V) in das Tool ein. Dann klickst du auf die Stelle und kopierst den Farbcode. So liest du Farben aus einer Website, einer App oder einem Spiel aus, ohne Browser-Erweiterung.

Es gibt vier häufige Gründe. Erstens speichern JPG-Bilder Farben verlustbehaftet, benachbarte Pixel unterscheiden sich leicht. Zweitens können eingebettete Farbprofile (zum Beispiel Display P3) vom Browser in sRGB umgerechnet werden, andere Programme zeigen den Rohwert. Drittens zeigt ein Screenshot die Farbe nach der Farbverwaltung deines Bildschirms. Viertens wertet das Tool Bilder über 36 Megapixel verkleinert aus. Für Fotos stellst du deshalb die Mittelung auf 3 × 3, 5 × 5 oder 11 × 11 Pixel: Das Tool bildet dann den Durchschnitt aus 9, 25 oder 121 Pixeln rund um den Zeiger statt einen Ausreißer zu lesen. Für flache Farben wie in einem Logo ist „1 Pixel“ richtig.

Lade das Bild, die Palette erscheint direkt darunter. Du stellst 2 bis 12 Farben ein und siehst jede mit HEX-Code und Anteil an der Bildfläche. Das Tool liest dafür gleichmäßig verteilt mindestens 90.000 Pixel (kleinere Bilder komplett), überspringt transparente Pixel und gruppiert die Farben nach dem Median-Cut-Verfahren. Bei Fotos ist die Palette eine Näherung. Mit „HEX-Liste kopieren“ bekommst du eine Liste, mit „CSS-Variablen kopieren“ Zeilen wie --color-1: #08203a; für einen :root-Block, die du mit var(--color-1) verwendest.

Neben den Farbwerten zeigt das Tool den passenden CSS-Farbnamen oder, wenn es keinen genauen Treffer gibt, den nächsten CSS-Farbnamen mit dessen HEX-Wert. Für #ffd166 ist das khaki (#f0e68c), also nur eine Näherung. RAL-, Pantone-, NCS- oder CMYK-Werte gibt das Tool nicht aus. Eine Bildschirmfarbe hängt außerdem von Licht und Kamera ab, Wandfarbe oder Lack prüfst du deshalb immer an einem echten Farbmuster. HSV und CMYK zu einer bekannten Farbe zeigt dir der Color Picker.

Das Tool berechnet das WCAG-Kontrastverhältnis der Farbe zu Weiß und zu Schwarz. Normaler Text braucht mindestens 4,5:1 (Stufe AA), sehr gut sind 7:1 (AAA), große Schrift kommt mit 3:1 aus. Auf #ffd166 erreicht schwarzer Text 14,56:1, weißer nur 1,44:1. Für zwei beliebige Farben prüfst du den Kontrast im Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP und SVG, je nachdem, was dein Browser lesen kann. Bei GIF wird das erste Bild ausgewertet. HEIC und HEIF, wie sie iPhones speichern, öffnet nur Safari, sonst exportierst du das Foto vorher als JPG. Dateien dürfen bis zu 40 MB groß sein. Bei halbtransparenten Pixeln zeigt das Tool zusätzlich den HEX-Wert mit Alpha-Kanal, zum Beispiel #ff000080. Vollständig transparente Pixel haben keine Farbe, das Tool weist darauf hin.