Bedienungsanleitung
- Klicken Sie auf „Bild auswählen“, ziehen Sie ein Bild hinein oder fügen Sie einen Screenshot per Strg+V / Cmd+V ein.
- Bewegen Sie Ihren Mauszeiger oder Finger über das Bild, um Live-Werte für HEX, RGB und HSL sowie das Lupen-Fadenkreuz anzuzeigen.
- Klicken Sie auf einen Punkt, den Sie behalten möchten; die Farbe wird im Verlauf gespeichert.
- Klicken Sie auf „Hauptfarben extrahieren“, um eine designfreundliche Farbpalette zu generieren, und kopieren Sie die gewünschten Farbwerte.
Beispiel: Fügen Sie einen Produkt-Screenshot ein, wählen Sie die Hauptfarbe der Schaltfläche aus und kopieren Sie den HEX-Wert direkt in Ihr CSS oder Ihre Designdatei.
Kernfunktionen
- Lokale Farbauswahl aus Bildern: Bilder werden im Canvas-Element des Browsers gerendert und analysiert; es erfolgt kein Upload auf einen Server.
- Präzise HEX/RGB/HSL-Werte: Bewegen Sie Ihren Mauszeiger oder Finger über das Bild, um Live-Werte für HEX, RGB und HSL abzulesen.
- Lupen-Fadenkreuz: Ein vergrößertes Vorschaubild hilft Ihnen, Symbolränder, UI-Screenshot-Details und kleine Farbfelder exakt anzuvisieren.
- Farbpaletten-Generator: Clientseitiges Pixel-Sampling extrahiert bis zu 5 dominante Farben für schnelle Design-Referenzen.
- Schnelles Speichern und Kopieren: Klicken Sie auf das Bild, um Farben im Verlauf zu speichern. Klicken Sie auf ein beliebiges Farbfeld, um den Farbcode zu kopieren.
Verwandte Tools
Konvertieren Sie HEX, RGB, HSL und CMYK mit einem integrierten WCAG-Kontrastprüfer. Lokaler Datenschutz – keine Uploads. Erhalten Sie druckfertige CMYK-Werte und kopieren Sie Ergebnisse jetzt.
Generieren Sie Lorem Ipsum als Text, HTML <p> oder JSON-Arrays. Lokal, keine Uploads. Enthält chinesischen Platzhaltertext und variable Längeneinstellungen. Jetzt generieren.
Berechnen Sie Seitenverhältnisse und fehlende Abmessungen schnell. Läuft lokal – keine Uploads. Enthält TikTok/Reels 9:16 Voreinstellungen und CSS aspect-ratio Code-Snippets. Berechnen Sie jetzt.
Berechnungslogik
Dieses Tool decodiert das Bild lokal über HTML5 Canvas und liest die RGBA-Pixel an der aktuellen Auswahlkoordinate per getImageData aus. Die HEX-, RGB- und HSL-Werte werden direkt aus diesen Pixeldaten berechnet.
Die Paletten-Generierung tastet die Canvas-Pixel ab, gruppiert ähnliche Farben in einfache Farbklassen und ordnet sie nach Häufigkeit, um bis zu 5 dominante Farben zurückzugeben. Dies eignet sich hervorragend für schnelle Web- und Designpaletten, ersetzt jedoch kein professionelles absolutes Farbmanagement nach ICC / P3.
Häufig gestellte Fragen
Werden meine Bilder hochgeladen?
Nein. Das Laden von Bildern, die Farbauswahl, die Lupen-Vorschau und die Paletten-Generierung laufen vollständig lokal in Ihrem Browser.
Wie erhalte ich einen HEX-Farbcode aus einem Bild?
Wählen Sie ein Bild aus oder fügen Sie es ein, und bewegen Sie den Mauszeiger oder Finger auf den gewünschten Pixel. Die Live-Farbe wird sofort angezeigt. Klicken Sie auf das Bild, um die Farbe im Verlauf zu speichern, und klicken Sie dann auf das Farbfeld, um den HEX-Wert zu kopieren.
Welche Farbformate werden unterstützt?
Das Tool zeigt und kopiert HEX, RGB und HSL – die im Webdesign und in der Frontend-Entwicklung am häufigsten verwendeten Farbformate.
Warum unterscheidet sich die Farbe eventuell minimal von Photoshop?
Das Canvas-Element liest die Pixel so aus, wie sie von Ihrem Browser tatsächlich gerendert werden. Browsereigenschaften, der Farbraum des Monitors sowie eingebettete Farbprofile können zu minimalen Abweichungen führen.
Kann ich die Farbauswahl auch auf dem Smartphone nutzen?
Ja. Auf Touch-Geräten können Sie das Fadenkreuz mit dem Finger über das Bild ziehen. Tippen Sie oder lassen Sie den Finger los, um die Farbe zu sperren.