Funktionsweise des Bild-Farbpickers
Der Bild-Farbpicker ermöglicht es, ein Bild von einem lokalen Gerät zu laden und die exakten Farbwerte einzelner Pixel zu bestimmen. Nach dem Laden einer Bilddatei wird sofort der Farbwert sowie die Koordinate des exakt in der Mitte liegenden Pixels angezeigt.
Um andere Bereiche des Bildes zu analysieren, wird der Zeiger über das Bild bewegt, wodurch die Farben Pixel für Pixel abgetastet werden. Eine integrierte Lupe vergrößert den Bereich um den Zeiger, um eine präzise Auswahl zu unterstützen. Ein Klick auf das Bild speichert die aktuell ausgewählte Farbe in einer Verlaufsliste.
Tastaturnavigation für präzise Steuerung
Für eine barrierefreie oder besonders feine Positionierung lässt sich das Fadenkreuz auch über die Tastatur steuern:
- Pfeiltasten: Bewegen das Fadenkreuz pixelweise in die entsprechende Richtung, um Farben präzise abzutasten.
- Shift + Pfeiltasten: Bewegen das Fadenkreuz in Schritten von 10 Pixeln für eine schnellere Navigation.
- Eingabetaste (Enter) oder Leertaste (Space): Speichert die aktuell ausgewählte Farbe in der Verlaufsliste.
Unterstützte Bildformate und Einschränkungen
Das Werkzeug verarbeitet eine einzelne Bilddatei. Dabei werden folgende Dateiformate und MIME-Typen unterstützt:
| Format | MIME-Typ |
|---|---|
| PNG | image/png |
| JPG / JPEG | image/jpeg |
| WebP | image/webp |
| GIF | image/gif |
| AVIF | image/avif |
| HEIC / HEIF | image/heic, image/heif |
Wird versucht, eine nicht unterstützte Datei hochzuladen oder per Drag-and-Drop abzulegen, erscheint die Fehlermeldung: „Dieser Dateityp wird nicht unterstützt. Versuchen Sie es mit einem PNG-, JPG-, WebP-, GIF-, AVIF- oder HEIC-Bild.“ Sollte eine Datei beschädigt sein oder sich aus anderen Gründen nicht öffnen lassen, zeigt das Tool die Meldung: „Dieses Bild konnte nicht geöffnet werden. Es ist möglicherweise beschädigt oder liegt in einem nicht unterstützten Format vor.“
Bilder, deren längste Seite das Maß von 4096 Pixeln überschreitet, werden beim Laden automatisch herunterskaliert. Über die Schaltfläche „Neu beginnen“ lässt sich das geladene Bild entfernen, der gesamte Farbverlauf leeren und das Werkzeug in den Ausgangszustand zurückversetzen.
Ausgabeformate und Farbwertanalyse
Sobald ein Pixel ausgewählt ist, stellt das Tool dessen Farbdaten in drei gängigen Farbmodellen dar:
- HEX: Der hexadezimale Farbcode des Pixels.
- RGB: Die Farbwerte für Rot, Grün und Blau.
- HSL: Die Werte für Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness).
Ein Klick auf einen der angezeigten Werte (HEX, RGB oder HSL) kopiert diesen direkt in die Zwischenablage. Falls das Betriebssystem oder der Browser diesen Vorgang verhindert, wird die Fehlermeldung „Kopieren fehlgeschlagen – Ihr Browser hat den Zugriff auf die Zwischenablage blockiert.“ ausgegeben.
Umgang mit Transparenz (Alpha-Kanal)
Das Tool liest den exakten Pixelwert aus, der in der Bilddatei hinterlegt ist. Wenn ein Pixel semi-transparent ist, wird dessen Alpha-Wert isoliert betrachtet und direkt als Text ausgegeben: „Alpha {n}% – dieses Pixel ist teilweise transparent.“. Das Pixel wird dabei eigenständig analysiert, ohne eventuelle Hintergrundfarben der Benutzeroberfläche in die Berechnung einzubeziehen.
Einfluss von Komprimierung und Anti-Aliasing
Die ermittelten Farbwerte entsprechen exakt den im Datenstrom der Datei hinterlegten Werten. Bei der Arbeit mit JPEG-Dateien oder Screenshots ist zu beachten, dass Komprimierungsartefakte und Kantenglättung (Anti-Aliasing) die ursprünglichen Farbwerte benachbarter Pixel verändert haben können. Die gemessenen Werte können daher von den theoretisch reinen Farbwerten abweichen.
Verwaltung der gespeicherten Farben
Das Tool verfügt über einen integrierten Verlauf für gespeicherte Farben:
- Der Verlauf kann maximal 12 Einträge gleichzeitig speichern.
- Wird eine Farbe erfolgreich gespeichert, erscheint der Hinweis „
{hex}in Ihrer Auswahl gespeichert.“. - Farben, die identische RGB-Werte, aber unterschiedliche Alpha-Werte aufweisen, werden als separate Einträge im Verlauf behandelt.
- Solange noch keine Farben gesichert wurden, zeigt der Bereich den Platzhaltertext: „Gespeicherte Farben werden hier angezeigt – klicken Sie auf ein Farbfeld, um es wieder zu laden.“. Ein Klick auf ein bereits gespeichertes Farbfeld lädt dieses wieder in die aktive Ansicht.
Datenschutz und lokale Verarbeitung
Die Verarbeitung der Bilddaten erfolgt vollständig lokal. Das Bild wird direkt von Ihrem Gerät gelesen und verlässt Ihren Browser nie. Es wird nichts auf BroBroGo hochgeladen.
Häufig gestellte Fragen (FAQ)
Wie wähle ich eine Farbe aus dem Bild aus?
Bewegen Sie den Zeiger über das Bild. Das Panel zeigt die Farbe darunter an, wobei eine Lupe heranzoomt, damit Sie das genaue Pixel treffen. Klicken Sie, um diese Farbe in Ihrer Auswahl zu speichern. Sie können das Bild auch fokussieren und das Fadenkreuz mit den Pfeiltasten bewegen und dann die Eingabetaste drücken.
Welche Farbformate erhalte ich?
Jedes Pixel, das Sie auswählen, wird gleichzeitig als HEX, RGB und HSL angezeigt. Klicken Sie auf einen beliebigen Wert, um ihn zu kopieren, bereit zum Einfügen in CSS oder ein Design-Tool.
Warum entspricht eine ausgewählte Farbe nicht immer meinen Erwartungen?
Sie erhalten den genauen Pixelwert, der im Bild gespeichert ist. Wenn es sich um ein JPEG oder einen Screenshot handelt, haben Komprimierung und Kantenglättung (Anti-Aliasing) die benachbarten Pixel möglicherweise bereits leicht verändert, und ein halbtransparentes Pixel wird für sich allein gelesen, ohne das, was sich dahinter befindet.