Warum ändert sich die Farbe, wenn ich den Cursor bewege?

JPG komprimiert benachbarte Pixel blockweise, daher können zwei fürs Auge identische Pixel leicht unterschiedliche Werte tragen. Fotos haben zudem natürliche Textur (Haut, Stoff, Laub) - einen einzelnen Pixel zu greifen ist nicht dasselbe wie «die Durchschnittsfarbe dieses Bereichs». Klicke und vergleiche mehrere nahe Pixel, wenn das Ergebnis komisch wirkt.

Kann ich aus einem Screenshot greifen?

Ja - darin ist dieses Tool am besten. Screenshots haben meist flächige Farbbereiche (UI-Füllungen, Markenfarben, Logo-Hintergründe), sodass ein einzelner Klick zuverlässig den kanonischen Hex liefert. PNG-Screenshots sind verlustfrei; JPG-Screenshots können Kompressionsrauschen auf Füllflächen haben.

Wie wird HSL berechnet?

Standard-sRGB-zu-HSL-Umrechnung - dieselbe, die CSS intern nutzt. Der Farbton steht in Grad (0-360), Sättigung und Helligkeit in Prozent. Der Hex-Wert ist kanonisch; HSL ist für Designer, die in «einer dunkleren Version davon» oder «dem Gegenton» denken.

Farbpipette für Bilder

Bild ablegen, beliebigen Pixel anklicken, Hex/RGB/HSL erhalten - und nebenbei eine Farbpalette aufbauen.

Bild hier ablegen oder klicken zum Auswählen

PNG, JPG, WebP, AVIF, GIF, SVG, BMP

Bild ablegen und mit dem Cursor schweben - die Vorschau zeigt Live-Farbe und Hex des Pixels unter dem Zeiger. Klick speichert diesen Pixel als Probe (Hex / RGB / HSL). Bis zu 20 Proben stapeln sich; einzeln kopieren, oder die ganze Palette als CSS-Variablen-Block. Nichts wird hochgeladen.

So funktioniert's

Bild ablegen
Per Drag-and-Drop oder Klick auf die Ablagefläche einen Screenshot, ein Logo oder Foto wählen.
Für Live-Vorschau schweben
Farbe und Hex des Pixels unter dem Cursor werden in Echtzeit angezeigt.
Klicken zum Erfassen
Jeder Klick fügt der Palette eine Probe hinzu (Hex / RGB / HSL alle sichtbar).
Palette kopieren
Auf eine Probe klicken, um ihren Hex zu kopieren, oder die ganze Palette als CSS-Variablen-Block kopieren.

Was ist das?

Eine Farbpipette für Bilder liest den RGB-Wert jedes Pixels eines hochgeladenen Bildes. Das Canvas des Browsers liefert die rohen Pixeldaten; wir wandeln sie in die drei Formate, die Designer wirklich nutzen (Hex für Code, RGB für Malsoftware, HSL fürs relative Denken). Zusammen mit dem Speichern als Proben wird daraus ein schneller Weg, die exakte Palette einer Marke aus einem Screenshot, Foto oder der Seite eines Mitbewerbers zu ziehen.

Wann verwenden

Die exakten Hex-Werte einer Marke aus einem Logo-Screenshot zurückholen, die dominanten Farben eines Fotos für ein Moodboard greifen, die exakte Farbe eines UI-Elements aus einem alten Screenshot abgleichen, wenn die Quelle weg ist, oder die perfekte Akzentfarbe aus einem Stockfoto für ein Landing-Hero finden.

Häufige Fehler

Aus einem JPG greifen und sich übers Rauschen wundern - die Blockkompression von JPG sorgt dafür, dass ein Pixel nicht seine visuelle Umgebung repräsentiert. Aus einem Foto greifen und das Ergebnis als «die Markenfarbe» behandeln - Fotos variieren natürlich; die Markenfarbe lebt in einer Füllflächen-Quelle. Und vergessen, dass zwei benachbarte Pixel am Rand eines Logos durch Anti-Aliasing stark abweichen können.

FAQ

Warum ändert sich die Farbe, wenn ich den Cursor bewege?: JPG komprimiert benachbarte Pixel blockweise, daher können zwei fürs Auge identische Pixel leicht unterschiedliche Werte tragen. Fotos haben zudem natürliche Textur (Haut, Stoff, Laub) - einen einzelnen Pixel zu greifen ist nicht dasselbe wie «die Durchschnittsfarbe dieses Bereichs». Klicke und vergleiche mehrere nahe Pixel, wenn das Ergebnis komisch wirkt.
Kann ich aus einem Screenshot greifen?: Ja - darin ist dieses Tool am besten. Screenshots haben meist flächige Farbbereiche (UI-Füllungen, Markenfarben, Logo-Hintergründe), sodass ein einzelner Klick zuverlässig den kanonischen Hex liefert. PNG-Screenshots sind verlustfrei; JPG-Screenshots können Kompressionsrauschen auf Füllflächen haben.
Wie wird HSL berechnet?: Standard-sRGB-zu-HSL-Umrechnung - dieselbe, die CSS intern nutzt. Der Farbton steht in Grad (0-360), Sättigung und Helligkeit in Prozent. Der Hex-Wert ist kanonisch; HSL ist für Designer, die in «einer dunkleren Version davon» oder «dem Gegenton» denken.