Zum Inhalt springen

Pixel → HEX · RGB · HSL

Farbpipette für Bilder

Klick auf einen Pixel eines Bildes, um seine Farbe abzulesen: Ein Pixel mit #0060fd ergibt rgb(0, 96, 253) und hsl(217, 100%, 50%). Füg ein Bild hinzu, um Farben aus deinem eigenen zu wählen.

Wähl per Klick, Tipp oder mit den Pfeiltasten. Dein Bild wird nur in diesem Tab gezeichnet und nie hochgeladen.

Scanned by NortonTM Safe Web

Auf einen Blick

Preis
Ohne Kosten
Konto
Nicht nötig
Upload
Keiner – das Bild wird in deinem Browser-Tab gezeichnet, nichts wird irgendwohin gesendet
Formate
PNG, JPEG, WebP, GIF, AVIF, BMP und SVG, soweit dein Browser sie dekodiert
Bildgröße
Gezeichnet mit bis zu 1600 Pixeln an der längsten Seite; Dateien bis 200 MB und 120 Millionen Pixel
Palette
Sechs dominante Farben per Median Cut auf etwa 20,000 abgetasteten Pixeln

Gewählte Farben und wie die Palette funktioniert

Diese Zeilen wurden vom selben Code erzeugt wie das Tool. Die Palettentabelle nutzt ein Bild mit 4 × 4 Pixeln aus zwölf blauen und vier weißen Pixeln.

Aus Pixeln gelesene Farben
PixelfarbeHEXRGBHSL
#0060fd#0060fdrgb(0, 96, 253)hsl(217, 100%, 50%)
#ff8000#ff8000rgb(255, 128, 0)hsl(30, 100%, 50%)
#00a86b#00a86brgb(0, 168, 107)hsl(158, 100%, 33%)
#767676#767676rgb(118, 118, 118)hsl(0, 0%, 46%)
#fdd835#fdd835rgb(253, 216, 53)hsl(49, 98%, 60%)
Palette des 4 × 4-Beispiels
PalettenfarbePixelanteil
#0060fd75%
#ffffff25%

So wählst du eine Farbe aus einem Bild

1

Bild hinzufügen

Zieh eine PNG-, JPEG-, WebP-, GIF-, AVIF-, BMP- oder SVG-Datei auf das Feld, wähl eine über Durchsuchen aus oder füg ein Bild aus der Zwischenablage ein. Bis du ein eigenes hinzufügst, wird ein Beispielbild gezeigt.

2

Klicken, tippen oder Pfeiltasten nutzen

Klick oder tipp auf einen Punkt oder zieh über das Bild. Ist das Bild fokussiert, bewegen die Pfeiltasten das Fadenkreuz um einen Pixel, und Umschalt mit einer Pfeiltaste bewegt es um zehn Pixel. Die Kacheln zeigen die Farbe als HEX, RGB und HSL.

3

Eine Farbe oder einen Paletteneintrag kopieren

Drück bei einer Kachel auf Kopieren oder auf ein Palettenfeld, um dessen HEX-Code zu kopieren. Die Palette listet die sechs dominanten Farben des ganzen Bildes mit dem Anteil auf, den jede am Bild hat.

Wie die Farben gelesen werden

Der Browser dekodiert deine Datei, und die Seite zeichnet sie in diesem Tab auf ein Canvas-Element. Ein Bild mit mehr als 1600 Pixeln an der längsten Seite wird verkleinert, sodass eine Farbe aus einem sehr großen Bild aus der verkleinerten Kopie stammt, in der benachbarte Pixel gemittelt wurden. Die Seite fragt dann das Canvas nach den Rot-, Grün-, Blau- und Alphawerten des einzelnen Pixels unter dem Fadenkreuz und gibt sie als HEX, RGB und HSL aus. Ein Pixel mit Transparenz wird mit seinem Alphawert ausgegeben. Ein Canvas speichert Farben mit ihrem Alpha multipliziert, daher kann ein Kanal eines teiltransparenten Pixels um eine Einheit abweichen: 200 wird bei 50% Deckkraft als 199 gelesen.

Die Palette nutzt Median Cut. Die Seite betrachtet jeden n-ten Pixel, höchstens etwa 20,000, und lässt Pixel aus, die mehr als halb transparent sind. Sie legt diese Farben in eine Box und teilt die Box mit der größten Streuung in einem Kanal wiederholt am Median dieses Kanals, bis es sechs Boxen gibt oder keine Box zwei verschiedene Farben mehr enthält. Jede Box wird als Durchschnitt ihrer Pixel gezeigt, mit dem Anteil der abgetasteten Pixel, den sie enthält, die größte zuerst. Das Ergebnis ist für dasselbe Bild jedes Mal gleich. Ein Bild mit weniger als sechs verschiedenen Farben ergibt eine kürzere Palette, und animierte Bilder werden als einzelnes Standbild gelesen.

Fragen zur Farbpipette

Wie bekomme ich den HEX-Code einer Farbe in einem Bild?

Füg das Bild hinzu und klick dann auf die gewünschte Stelle. Die HEX-Kachel zeigt den Code dieses Pixels, zum Beispiel #0060fd, und Kopieren legt ihn in die Zwischenablage. Für die Hauptfarben ohne Auswahl einer Stelle drück stattdessen auf ein Palettenfeld.

Welche Bildformate funktionieren?

PNG, JPEG, WebP, GIF, AVIF, BMP und SVG, soweit dein Browser sie dekodieren kann. AVIF hängt von der Browserversion ab. Andere Dateien, etwa PDF oder TIFF, werden mit einer Meldung abgelehnt. Dateien über 200 MB oder über 120 Millionen Pixel werden ebenfalls abgelehnt.

Wie wird die Palette aus sechs Farben gewählt?

Per Median Cut auf einer Stichprobe von etwa 20,000 Pixeln: Die Farben werden am Median ihres breitesten Kanals in Boxen geteilt, bis es sechs gibt, und jede Box wird zum Durchschnitt ihrer Pixel. Der Prozentwert unter jedem Feld ist der Anteil der abgetasteten Pixel in dieser Box. Überwiegend transparente Pixel werden übersprungen.

Warum ergeben zwei benachbarte Pixel leicht unterschiedliche Farben?

Fotos und komprimierte Bilder wie JPEG schwanken von Pixel zu Pixel ein wenig, sodass zwei gleich aussehende Punkte um ein paar Einheiten pro Kanal abweichen können. Klick mehrere Punkte an oder nutz die Palette, die viele Pixel mittelt, wenn du eine repräsentative Farbe willst.

Wird mein Bild irgendwohin hochgeladen?

Nein. Die Datei wird von deinem Browser in diesem Tab dekodiert und gezeichnet, die Farben werden aus dieser Zeichnung gelesen, und nichts wird an einen Server gesendet. Schließen oder Neuladen der Seite verwirft das Bild.

Was macht die Schaltfläche für die Bildschirmauswahl?

In Browsern mit der EyeDropper-Funktion kannst du mit der Schaltfläche auf einen beliebigen Punkt deines Bildschirms klicken, auch in anderen Fenstern, und seine Farbe wird angezeigt. Browser ohne diese Funktion zeigen die Schaltfläche nicht; die Bildauswahl funktioniert überall.