Wie picke ich eine exakte Farbe aus einem Bild (Pipette)?
Bild-Pipette online - wirf ein Foto rein, bewege die Maus über einen Pixel, sieh die exakte Farbe (HEX, RGB, OKLCH). Klicke, um sie zu einer Palette hinzuzufügen.
Für Designer gebaut: Farben aus Markenassets, Wettbewerber-Screenshots, Produktfotos ziehen.
Alles läuft lokal - das Bild verlässt deinen Browser nie.
Wir liefern auch OKLCH (wahrnehmungsmäßig gleichmäßiger Farbraum) - der moderne CSS-Standard seit 2023, in Tailwind v4 verwendet.
So nutzt du das Tool
- Lade ein Foto hoch - PNG, JPG, WebP, AVIF, HEIC.
- Bewege die Maus übers Bild - der Pixel unter dem Cursor wird unten mit HEX / RGB und Koordinaten angezeigt.
- Klick irgendwo, um die Farbe der Palette rechts hinzuzufügen. Max. 12 Farben - neue verdrängen ältere.
- Klick auf einen beliebigen HEX-/RGB-/OKLCH-Wert in der Palette zum Kopieren.
Wann das hilfreich ist
Wo sich die Pipette lohnt - typische Szenarien:
- Markenassets - der Kunde hat dir ein PNG-Logo geschickt, du brauchst exakte Farben fürs CSS.
- Wettbewerbsanalyse - Screenshot einer Konkurrenz-Seite, du willst deren exaktes Akzent-Blau.
- Produktfotos - eine repräsentative Farbe aus dem Kleider-Foto ziehen, um den Shop-Seiten-Hintergrund zu komponieren.
- UI-Design - exportierter Screenshot aus Figma / Sketch, finale Farben nach dem Rendering verifizieren.
- OKLCH-Workflow - arbeitest du mit modernem CSS-Color (Tailwind v4, OKLCH-Design-Tokens), liefert das Tool fertige OKLCH-Koordinaten zum Einfügen.
Fragen und Antworten
Nein. Alles läuft lokal - Bild über die Canvas-API geladen, Pixel-Sampling über `getImageData`. DevTools → Netzwerk = keine Requests.