Laden...
Laden...
Ziehe ein Foto oder einen Screenshot hinein, halte für eine vergrößerte Lupe, klicke, um ein Pixel auszuwählen — kopiere HEX, RGB oder HSL und stelle eine Palette von bis zu 20 Farben als einfügebereite CSS-Variablen zusammen.
Ein Farbauswähler für Bilder liest den exakten RGB-Wert eines einzelnen Pixels aus einem Foto, Screenshot oder Design-Mockup, sodass du diese Farbe anderswo verwenden kannst — in einer Markenpalette, einer CSS-Variable, einem Themen-Token oder einem Farbmatch. Designer verwenden es, um Farben aus Inspirationsboards zu extrahieren. Front-End-Entwickler verwenden es, um einen Screenshot mit einem CSS-Thema abzugleichen. Vermarkter verwenden es, um Markenfarben aus einem Logo zu extrahieren. Maler und Bastler verwenden es, um ein reales Foto mit einem Farbmuster oder Faden abzugleichen. Im Gegensatz zu einem 'dominanten Farb'-Detektor gibt dir dieses Tool die Kontrolle pro Pixel: halte zum Vorschau, klicke zum Erfassen. Die vergrößerte Lupe zeigt dir das exakte Pixel unter deinem Cursor bei 8× Zoom, sodass das Auswählen eines einzelnen Highlights oder eines 1-Pixel-Randes einfach ist. Alles läuft in deinem Browser — dein Bild verlässt niemals die Seite.
Ziehe eine JPG-, PNG-, WebP-, GIF- oder BMP-Datei in den Upload-Bereich oder klicke, um von deinem Gerät auszuwählen. Das Bild wird im Arbeitsbereich im Vorschauformat gerendert, aber die Pixelabstimmung erfolgt gegen die Kopie in Originalauflösung.
Bewege deinen Cursor über das Bild. Eine vergrößerte Lupe erscheint über dem Cursor und zeigt das exakte Pixel darunter bei 8× Zoom, mit einem 1-Pixel-Marker in der Mitte. Die Farbkarte des Cursors unter der Leinwand aktualisiert sich live mit HEX, RGB und HSL.
Klicke auf ein beliebiges Pixel, um seine Farbe zur Palette hinzuzufügen. Duplikate werden automatisch übersprungen, sodass es sicher ist, herumzuklicken, ohne die Liste aufzublähen. Bis zu 20 Farben passen in eine Palette.
Klicken Sie auf eine beliebige HEX-, RGB- oder HSL-Farbe in der Palette, um sie in die Zwischenablage zu kopieren. Klicken Sie auf das Farbmuster selbst, um seine HEX zu kopieren. Die gesamte Palette wird auch als Block von CSS-Custom-Properties (--color-1, --color-2, …) exportiert.
Klicken Sie auf Neues Bild, um den Arbeitsbereich zu leeren und eine andere Datei zu laden. Verwenden Sie Löschen innerhalb der Palette-Karte, um das Bild beizubehalten, aber die Palette neu zu starten.
1. Dekodieren Sie die Quelldatei mit new Image() — der Browser verarbeitet JPG/PNG/WebP/GIF/BMP nativ. 2. Zeichnen Sie das Bild in Originalauflösung auf eine Off-Screen-Leinwand. 3. Rendern Sie eine herunterskalierte Vorschau auf die sichtbare Leinwand (max. 900 px auf der längeren Seite). 4. Bei Hover, mappen Sie den Cursor (x,y) aus dem Vorschau-Raum zurück zu den Quellraum-Koordinaten. 5. Lesen Sie das Pixel über getImageData(sx, sy, 1, 1).data → [R, G, B, A]. 6. Konvertieren Sie in HEX (R/G/B als 2-stellige Hex) und HSL (rgbToHsl).
Das Sampling gegen die Leinwand in voller Auflösung (anstatt der Vorschau) ist wichtig, da das Herunterskalieren benachbarte Pixel mittelt — was auf einer 100px hohen Vorschau wie ein reines Rot aussieht, kann (240, 30, 30) anstelle des genauen (255, 0, 0) der Quelle sein. Das Zurückmappen der Cursor-Koordinaten zur Quellauflösung und das Sampling dort hält die gewählte Farbe treu zur Originaldatei. Die Lupe verfolgt denselben Ansatz: Sie erfasst ein kleines Quadrat der Leinwand in Originalauflösung um den Cursor und rendert es 8× in einen 120-Pixel-Kreis, wobei imageSmoothingEnabled = false gesetzt ist, damit einzelne Pixel scharf bleiben.
| Quelle | Bester Workflow |
|---|---|
Markenlogo PNG mit transparentem Hintergrund | Fahren Sie mit der Lupe über den einfarbigen Bereich, klicken Sie einmal. Kopieren Sie die HEX. In zwei Klicks erledigt. PNG-Transparenz wird gegen den Seitenhintergrund gerendert — sampeln Sie innerhalb des Logos, nicht am Rand. |
Inspiration Screenshot von einer Designseite | Wählen Sie den Hintergrund, die primäre Aktionsfarbe, die sekundäre Akzentfarbe und die Textfarbe des Körpers. Kopieren Sie CSS-Variablen. Vierfarbpaletten sind normalerweise ausreichend, um ein Designsystem nachzubilden. |
Foto zur Kunstreferenz (Himmelverlauf, Farbübereinstimmung) | Verwenden Sie die Lupe, um genaue Pixel entlang des Verlaufs auszuwählen. Erstellen Sie eine 5-7-Farben-Palette, um den Look nachzubilden. Fotoverläufe haben Rauschen — wählen Sie aus solid aussehenden Bereichen, nicht von den Rändern. |
Screenshot eines Bugberichts mit dem falschen Rotton | Fahren Sie mit der Lupe über das schlechte Rot, kopieren Sie die HEX, fügen Sie sie in das Problem mit der erwarteten HEX daneben ein. Die Lupe macht 1-Pixel-Ränder und Haarlinien auswählbar, ohne den Browser zu vergrößern. |
Schneiden Sie das Motiv aus jedem Foto mit KI auf dem Gerät aus – kein Upload erforderlich.
Verkleinern Sie JPG-, PNG- oder WebP-Dateien in Ihrem Browser mit einem interaktiven Qualitätsregler.
Passen Sie Fotos im Browser an, filtern, drehen und zuschneiden — keine Uploads, kein Wasserzeichen.
Erstelle Memes und Screenshot-Collagen mit echten Ebenen — einfügen, ziehen, zuschneiden, beschriften, exportieren.
Zuletzt aktualisiert