So verwenden Sie einen Farbwähler, um Farben aus jedem Pixel zu finden
Schnelle Antwort
So wählen Sie eine Farbe aus: Öffnen Sie den Farbwähler, laden Sie ein Bild hoch (oder verwenden Sie die Bildschirmpipette), klicken Sie auf das Pixel, dessen Farbe Sie möchten, und die Werte HEX, RGB und HSL werden angezeigt. Die gesamte Verarbeitung erfolgt lokal – Ihr Bild wird nie hochgeladen.
Einführung
Mit einem Farbwähler (auch Pipette genannt) können Sie die genaue Farbe eines Pixels ermitteln. Dies ist wichtig, um Markenfarben abzugleichen, Farben aus Bildern abzutasten oder eine Farbpalette aus einem Foto zu erstellen. Browserbasierte Farbwähler können mit Canvas API Farben aus hochgeladenen Bildern lesen, und der integrierte EyeDropper API des Browsers kann Farben von überall auf dem Bildschirm auswählen. Diese Anleitung zeigt Ihnen, wie Sie einen Farbwähler in Ihrem Browser verwenden.
Schritt für Schritt
-
Öffnen Sie das Farbauswahl-Tool
Gehen Sie zur Werkzeugseite „Farbauswahl“. Das Tool unterstützt die Auswahl von Farben aus hochgeladenen Bildern und, in unterstützten Browsern, von überall auf dem Bildschirm über den EyeDropper API.
-
Wählen Sie Ihre Quelle
So wählen Sie ein Bild aus: Laden Sie ein Bild hoch oder ziehen Sie es per Drag-and-Drop. So wählen Sie auf dem Bildschirm aus (nur Chrome/Edge): Klicken Sie auf die Schaltfläche „Vom Bildschirm auswählen“ und dann auf eine beliebige Stelle auf Ihrem Bildschirm.
-
Klicken Sie auf das Pixel, um es abzutasten
Um ein Bild auszuwählen, bewegen Sie den Mauszeiger über das Bild und klicken Sie auf das Pixel, dessen Farbe Sie möchten. Das Tool liest die Pixelfarbe mithilfe von getImageData() aus der Leinwand. Eine Lupe kann Ihnen bei der Auswahl des genauen Pixels helfen.
-
Lesen Sie die Farbwerte ab
Das Tool zeigt die ausgewählte Farbe in den Formaten HEX, RGB und HSL zusammen mit einem Farbfeld an. Die Werte werden sofort aktualisiert, wenn Sie den Cursor bewegen.
-
Kopieren Sie die Farbe
Klicken Sie neben einem beliebigen Format auf Kopieren, um den Farbwert in Ihre Zwischenablage zu kopieren. Verwenden Sie es in Ihrem CSS, Design-Tool oder Ihrer Anwendung.
Beispiele
Wählen Sie eine Markenfarbe aus einem Logo
Eingang: logo.png, klicken Sie auf das Markenfarbpixel
Ausgabe: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89 %, 51 %)
Probieren Sie eine Farbe von einem Foto aus
Eingang: photo.jpg, klicken Sie auf ein Himmelspixel
Ausgabe: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71 %, 73 %)
Vom Bildschirm auswählen (Chrome/Edge)
Eingang: Klicken Sie auf „Vom Bildschirm auswählen“ und dann auf ein beliebiges Pixel auf Ihrem Display
Ausgabe: HEX Wert dieses Pixels, z. B. #ff5733
Häufige Probleme
- Durch Anti-Aliasing werden Farben an Kanten gemischt – Pixel an der Kante zwischen zwei Farben sind eine Mischung. Zur Gewährleistung der Genauigkeit nehmen Sie die Probe aus der Mitte eines einfarbigen Bereichs.
- EyeDropper API wird nicht unterstützt – die Bildschirmauswahl erfordert Chrome 95+ oder Edge 95+. Firefox und Safari unterstützen es nicht; Verwenden Sie stattdessen die Methode zum Hochladen von Bildern.
- JPEG-Komprimierung verändert die Farben – JPEG verlustbehaftete Komprimierung verändert die Pixelfarben geringfügig. Für exakte Markenfarben verwenden Sie PNG oder die ursprüngliche Vektorquelle.
- Farbprofilunterschiede – Bilder mit eingebetteten Farbprofilen (ICC) werden möglicherweise anders angezeigt, als ihre Rohpixelwerte vermuten lassen.
Tipps
- Verwenden Sie die Lupe, um das genaue Pixel auszuwählen. Bei hohem Zoom können Sie ein einzelnes präzises Pixel anstelle einer gemischten Kante auswählen.
- Abtasten Sie mehrere Pixel aus einem Vollbereich und mitteln Sie sie, wenn durch die Komprimierung Rauschen entstanden ist – dies ergibt eine repräsentativere Farbe.
- Verwenden Sie den EyeDropper API (Chrome/Edge), um Farben aus jeder Anwendung auszuwählen, nicht nur aus Bildern im Browser.
- Verwenden Sie unseren Farbwähler für sofortige, private Farbproben – Ihre Bilder verlassen nie Ihren Browser.