Funktionsweise und Kernunterschied zu verwandten Tools
Dieses Werkzeug extrahiert aus einem hochgeladenen Bild den Farbwert eines einzelnen Pixels und gibt ihn als hexadezimale Farbangabe (HEX) aus – sechs Zeichen, erweiterbar auf drei Zeichen bei entsprechender Farbtiefe, z. B. #1E90FF. Die HEX-Notation ist der Standard in CSS und den meisten Designprogrammen, da sie kompakt und ohne zusätzliche Klammern direkt in Eigenschaften wie color oder background-color eingesetzt werden kann. Anders als die Schwester-Seiten, die RGB-Funktionsnotation (rgb(…) oder HSL (hsl(…) priorisieren, liegt hier der Fokus auf der hexadezimalen Darstellung.
Die Besonderheit: Der HEX-Wert selbst enthält keinen Alpha-Kanal. Transparenz wird daher separat als Prozentwert gemeldet: „Alpha ‹n›% – this pixel is partly transparent.“ Das unterscheidet diese Seite grundlegend von einer rgba‑ oder hsla‑Ausgabe. Wer einen reinen HEX‑Wert für ein teiltransparentes Pixel benötigt, bekommt nur die Farbe ohne Deckkraft – der Alpha‑Anteil muss dann im Zielsystem selbst berücksichtigt werden, etwa als Opazität in CSS oder in einem Designprogramm.
HEX, RGB und HSL im Vergleich
Die drei ausgegebenen Farbmodelle laufen parallel:
| Modell | Ausgabe-Beispiel | Einsatzgebiet |
|---|---|---|
| HEX | #1E90FF |
CSS, Web, Farbauswahl in Grafiksoftware |
| RGB | rgb(30,144,255) |
Allgemeine Farbangabe, CSS, Bildverarbeitung |
| HSL | hsl(210,100%,56%) |
Farbton-Basiertes Arbeiten, Korrektur von Sättigung/Helligkeit |
Alle drei Werte beziehen sich auf denselben Pixel. Ein Klick auf einen der angezeigten Werte kopiert ihn in die Zwischenablage. Scheitert der Zugriff, erscheint die Meldung: „Could not copy – your browser blocked clipboard access.“ Die Umrechnung zwischen den Modellen erfolgt nach den CSS‑Standards der W3C. HSL wird aus RGB mittels der Formel für HSI berechnet, wobei die Helligkeit (Lightness) als Mittelwert der größten und kleinsten Komponente definiert ist – ein Unterschied zu HSB/HSV, das oft in Bildbearbeitungsprogrammen verwendet wird.
Transparenz und Alpha-Kanal
Bildformate wie PNG, GIF oder WebP unterstützen einen Alpha-Kanal. Das Werkzeug liest den Alpha-Wert jedes Pixels direkt aus der Bildebene aus – nicht die darunterliegende Hintergrundfarbe. Ein Pixel mit 50 % Deckkraft wird also als „Alpha 50 %“ gemeldet, unabhängig davon, ob das Bild auf einem weißen, schwarzen oder gemusterten Hintergrund betrachtet wird.
Die HEX-Ausgabe bleibt in diesem Fall gleich, als wäre der Pixel voll deckend. Das ist ein häufiger Stolperstein: Ein Designer, der eine halbtransparente Farbe aus einem PNG in eine Webseite übernehmen will, kann den HEX-Wert nicht direkt mit einer Opazität kombinieren – er muss entweder das RGB in rgba umwandeln oder die HSL‑Angabe mit Alpha ergänzen. Die Seite bietet dafür keine automatische Umrechnung, zeigt aber den Alpha-Prozentsatz an, damit der Anwender selbst entscheiden kann, wie er die Transparenz nachbildet.
Präzise Pixelauswahl: Maus und Tastatur
Nach dem Laden eines Bildes wird die Farbe des Mittelpunktspixels sofort berechnet und ausgegeben – zusammen mit den Koordinaten (x, y) und den Maßen des Bildes (Breite × Höhe). Bewegen Sie die Maus über das Bild, folgt die Farbe pixelgenau. Eine vergrößerte Ansicht (Lupe) hilft, den exakten Punkt zu treffen, besonders in anti‑aliasten oder stark komprimierten Bereichen.
Für Benutzer, die keine Maus verwenden können oder wollen, steht eine komplette Tastatursteuerung bereit:
- Pfeiltasten: Bewegen ein Fadenkreuz um je einen Pixel.
- Umschalt + Pfeiltaste: Bewegung in Zehner-Schritten.
- Eingabetaste (Enter) oder Leertaste (Space): Aktuelle Farbe speichern.
Ein Klick mit der Maus speichert die Farbe ebenfalls. Gespeicherte Farben werden in einer Historie (bis zu 12 Einträge) als Farbfeld angezeigt. Ein Klick auf ein Feld lädt die zugehörige Farbe wieder zurück in die Anzeige – nützlich, um mehrere Farben aus demselben Bild zu vergleichen oder später zu notieren. Farben mit identischem RGB-Wert aber unterschiedlichem Alpha werden als separate Einträge geführt, da sie in der Praxis unterschiedliche visuelle Ergebnisse liefern.
Grenzen und Fallstricke: Kompression, Anti-Aliasing und Dateiformate
Das Werkzeug liest den exakten Pixelwert, den das Bild liefert – und das ist nicht immer der Wert, der dem menschlichen Auge in einer flächigen Farbe entspricht.
JPEG-Bilder sind verlustbehaftet komprimiert. Ein Bereich, der im Quellmaterial reines #E0E0E0 war, zeigt nach der Kompression benachbarte Pixel mit #DEDEDE, #E1E1E1 oder #E2E2E2. Screenshots von Bildschirmen unterliegen oft zusätzlicher Skalierung und Anti‑Aliasing, sodass selbst scheinbar einheitliche Farben aus mehreren leicht unterschiedlichen Werten bestehen. Die Lupe wird hier unverzichtbar, um den gewünschten Pixel zu treffen.
Die maximal zulässige Bildgröße beträgt 4096 Pixel auf der längsten Seite. Überschreitet ein Bild diese Grenze, wird es herunterskaliert – der Farbwert eines Pixels im herunterskalierten Bild ist dann eine Mischung mehrerer Originalpixel. Für Farbprüfungen auf Pixelebene sollte das Quellbild daher diese Abmessung nicht überschreiten.
Nicht unterstützte Formate (z. B. BMP, TIFF, SVG) oder fehlerhafte Dateien werden mit folgenden Meldungen quittiert:
- „That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.“
- „That image could not be opened. It may be corrupted or in an unsupported format.“
Akzeptierte MIME-Typen sind genau die gelisteten: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif.
Farbverlauf und Integration in den Workflow
Die gespeicherte Historie (maximal 12 Einträge) dient als temporäre Palette. Ein Klick auf eines der Farbfelder setzt die HEX-, RGB- und HSL-Werte zurück in die Hauptanzeige, sodass der Anwender sie erneut kopieren oder notieren kann. Ein „Start over“‑Button löscht das Bild, leert die Historie und setzt das Werkzeug in den Ausgangszustand zurück – alle gesammelten Farben sind dann weg.
Praktische Anwendungsszenarien:
- Webentwicklung: Eine Farbmarke aus einem Kunden-Logo wird per HEX extrahiert und direkt in die CSS‑Variable
–brand-blue: #1E90FF;übernommen. - Grafikdesign: Ein Farbton aus einem Referenzfoto wird in Figma oder Photoshop importiert, indem der HEX‑Wert in den Farbwähler eingegeben wird.
- Content‑Erstellung: Aus einer Screenshot‑Collage werden die dominierenden Farben gesampelt und als Thumbnail-Hintergrund verwendet.
Da keine Bilddaten an einen Server gesendet werden (alles läuft clientseitig), eignet sich das Tool auch für vertrauliche Bildmaterialien.
Häufig gestellte Fragen (FAQ)
Warum zeigt das Tool bei einem PNG mit Alphakanal keinen HEX‑Wert mit Alpha an?
HEX kennt in der 6‑stelligen Form keinen Alpha-Kanal. Die 8‑stellige HEX-Schreibweise (#RRGGBBAA) ist kein CSS‑Standard für Eigenschaften wie color – sie wird nur von manchen Browsern für background-color unterstützt. Die Seite entscheidet sich bewusst für die kompakte 6‑stellige Angabe und meldet Transparenz separat als Prozent.
Kann ich die gespeicherten Farben exportieren?
Nein, es gibt keine Exportfunktion. Sie können jeden Wert einzeln durch Klick kopieren. Die Historie bleibt nur während der aktuellen Sitzung bestehen. Ein Reload der Seite setzt sie zurück.
Warum unterscheiden sich die Farben eines gesampelten Pixels von dem, was ich in Photoshop sehe?
Das Werkzeug liest die Rohdaten der decodierten Bilddatei. Photoshop wendet hingegen häufig ein Farbprofil (ICC) oder eine Bildschirmkalibrierung an, sodass der angezeigte Farbton vom digitalen Farbwert abweicht. Die HEX‑Ausgabe hier ist der geräteunabhängige sRGB‑Wert, wie er in der Datei codiert ist – ohne Profiltransformation.
Gibt es eine Begrenzung der Bildgröße?
Ja, Bilder mit einer längeren Seite über 4096 Pixel werden automatisch herunterskaliert. Das betrifft die Pixelfarben – für grobe Farbmessungen ist das oft ausreichend, für pixelgenaue Analysen sollten Sie das Bild vorher selbst verkleinern.
Warum wird bei einem Klick auf einen HEX‑Wert manchmal „Could not copy“ angezeigt?
Der Browser blockiert den Zugriff auf die Zwischenablage, wenn die Seite nicht über HTTPS geladen wurde oder der Benutzer keine explizite Berechtigung gegeben hat. In diesem Fall müssen Sie die Werte manuell markieren und kopieren.
Kann ich auch mehrere Bilder gleichzeitig laden?
Nein, es wird immer nur ein einzelnes Bild verarbeitet. Möchten Sie ein anderes Bild untersuchen, laden Sie es einfach neu – die vorherige Historie wird dabei gelöscht.