Wenn ein Design eine Farbe enthält, die du wiederverwenden möchtest, ist das Schätzen per Auge langsam und ungenau. Ein Farbwähler aus einem Bild liest das ausgewählte Pixel aus und liefert HEX-, RGB- und HSL-Werte. Öffne den Bild-Farbwähler, lade ein Foto oder einen Screenshot, klicke auf die Farbe und kopiere den benötigten Wert.
Das Tool liest das Bild im Browser, unterstützt JPG, PNG und WebP und lässt dich die Leinwand vergrößern, wenn ein genauer Punkt schwer zu treffen ist. Du kannst klicken oder die Tastatur verwenden; jeweils eine Farbmusterung bleibt aktiv.
Was macht ein Farbwähler aus einem Bild?
Das Tool nimmt ein ausgewähltes Pixel und wandelt es in gängige Farbformate um:
- HEX ist praktisch für CSS, Webdesign und Design-Tokens.
- RGB eignet sich für Workflows mit Rot-, Grün- und Blaukanälen.
- HSL erleichtert Überlegungen zu Farbton, Sättigung und Helligkeit.
Klicke auf eine andere Stelle, um die aktive Auswahl zu ersetzen, und kopiere den neuen Wert. Das hilft beim Abgleichen eines Hintergrunds, beim Prüfen eines Produktfotos oder beim Überführen einer Screenshot-Farbe in einen Stilwert.
Online eine Farbe aus einem Bild auswählen
1. Ein klares Quellbild wählen
Nutze möglichst das Originalfoto oder einen hochauflösenden Screenshot. Ein komprimiertes Vorschaubild, eine unscharfe Ansicht oder ein Farbfilter kann den exakten Zielwert verändern.
2. Online-Farbwähler öffnen
Öffne den Farbwähler aus einem Bild und wähle eine JPG-, PNG- oder WebP-Datei. Das Bild wird im Browser verarbeitet und muss für die Pixelmessung nicht an einen Server geladen werden.
3. Zielpixel anklicken
Klicke auf den Bildbereich, dessen Farbe du bestimmen möchtest. Bei flachen Hintergründen solltest du Kanten und Schatten meiden. Bei Produkten oder Illustrationen wählst du eine repräsentative Fläche statt Highlight, Reflexion oder Anti-Aliasing-Rand. Nutze die Vergrößerung, wenn nötig.
4. Farbcode kopieren
Kopiere HEX für CSS, RGB oder HSL für ein Designsystem oder den nächsten Arbeitsschritt. Füge den Wert in Code, Design-Datei, Markennotizen oder eine Stilvariable ein und prüfe ihn am tatsächlichen Zielort.
So wird die Farbmessung zuverlässiger
Sichtbare Farben werden von Licht, Schatten, Reflexionen, Kompression und Bildschirm beeinflusst. Ein einzelnes Pixel liefert dessen Wert, stellt aber nicht automatisch die ursprüngliche Markenfarbe wieder her.
Wähle bei flachen Grafiken eine zentrale, gleichmäßig gefüllte Fläche. Nimm bei Fotos mehrere Proben aus demselben Material und vergleiche sie. Meide Kanten, geglätteten Text und glänzende Flächen mit hellen Reflexionen.
Wenn das Bild zu groß ist, erstelle mit dem Bild-Resizer eine Arbeitskopie und behalte das Original. Störende Ränder kannst du vorher mit dem Bild-Cropper entfernen.
HEX, RGB oder HSL: Welchen Wert solltest du nutzen?
HEX für Webstile
HEX ist kompakt und in CSS, Design-Tokens und Dokumentation verbreitet. Ein Wert wie #2F80ED kann direkt in ein Stylesheet kopiert werden.
RGB für Kanäle und Transparenz
RGB zeigt die roten, grünen und blauen Kanäle einzeln. Das ist nützlich für Grafik-Workflows oder wenn du den Wert zu rgba() mit separater Transparenz erweitern möchtest.
HSL für kontrollierte Varianten
HSL trennt Farbton, Sättigung und Helligkeit. Dadurch lassen sich hellere Hintergründe, gedämpfte Rahmen oder dunklere Hover-Zustände leichter ableiten.
Häufige Fehler beim Farbpicken
Einen Schatten statt der Grundfarbe messen
Schatten können eine neutrale Fläche grau oder eine Farbe deutlich dunkler erscheinen lassen. Wähle eine gut beleuchtete, repräsentative Stelle und vergleiche nahe Pixel.
Ein Randpixel auswählen
An Kanten können durch Anti-Aliasing oder Kompression gemischte Pixel entstehen. Bewege den Punkt in die Mitte des Objekts oder Hintergrunds.
Einen gefilterten Screenshot verwenden
Nachtmodus, HDR, Farbprofile und Browser-Erweiterungen können die Darstellung verändern. Wenn die Farbe wichtig ist, nutze die Originaldatei oder einen unveränderten Screenshot.
Eine Auswahl mit einer kompletten Palette verwechseln
Der Picker bestimmt die angeklickte Farbe und hält eine aktive Auswahl, erstellt aber nicht automatisch eine vollständige Palette. Messe wichtige Farben einzeln und notiere ihre Rolle.
Den Nutzungskontext vergessen
Eine Farbe kann neben einem anderen Hintergrund oder auf einem anderen Display anders wirken. Teste den kopierten Wert im tatsächlichen Design, in der Anzeige oder im Bauteil und prüfe Kontrast und Lesbarkeit.
Einfacher Design-Handoff
- Bewahre Foto oder Screenshot als Referenz.
- Messe Hintergrund, Hauptmotiv, Text und Akzent getrennt.
- Speichere jeden HEX-Wert mit einer sinnvollen Rolle.
- Nutze RGB oder HSL, wenn die Umsetzung es braucht.
- Prüfe Kontrast, Hover-Zustände und die tatsächliche Anzeigegröße.
Nutze den Bildkompressor erst nach dem Picken. Für eine finale Webkopie kannst du PNG zu WebP verwenden, aber bewahre die Quelle für spätere Farbprüfungen.
FAQ
Wie wähle ich eine Farbe aus einem Bild aus?
Öffne den Bild-Farbwähler, wähle JPG, PNG oder WebP, klicke auf das gewünschte Pixel und kopiere HEX, RGB oder HSL.
Wie finde ich einen HEX-Code aus einem Bild?
Lade das Bild im HEX-Farbwähler aus einem Bild, klicke auf ein repräsentatives Pixel und kopiere den angezeigten HEX-Wert.
Kann ich eine Farbe aus einem Screenshot auswählen?
Ja. Ein Screenshot wird wie jedes unterstützte Bild behandelt. Nutze für die genaueste Messung einen unkomprimierten Screenshot und vermeide Kanten, Schatten und Displayfilter.
Kann ich mehrere Farben auswählen?
Ja, aber jeweils eine Auswahl ist aktiv. Klicke die Zielpixel nacheinander an und kopiere oder notiere den Wert vor der nächsten Auswahl.
Ist der Farbwähler privat?
Die Pixelmessung läuft nach dem Laden der Seite im Browser. Das Bild muss für diesen Schritt nicht an einen Server hochgeladen werden.
Weitere Bild-Tools
Nutze den Bild-Farbwähler für Farbwerte aus Foto oder Screenshot. Der Bild-Cropper entfernt störende Ränder, der Bild-Resizer erstellt eine Arbeitskopie und der Bildkompressor bereitet die finale Datei vor.