🔬

Bild Farben extrahieren

Klicken Sie auf eine beliebige Stelle in einem Bild, um die exakte Farbe zu extrahieren — erhalten Sie HEX-, RGB- und HSL-Werte sofort. Fahren Sie mit der Maus darüber für eine Vorschau, klicken Sie, um sie in der Historie zu speichern.

Bild-Tools Läuft lokal Keine Daten gesendet
FarbwählerHEXRGBHSLDesign
Bildvorschau
🔬
Bild hier ablegen
oder zum Durchsuchen klicken
JPG | PNG | WebP | GIF
#000000
Maus bewegen, um Farbe als Vorschau anzuzeigen · Klicken, um sie auszuwählen und in der Historie zu speichern
Aktuelle Farbe
HEX —
RGB —
HSL —
Farbhistorie (bis zu 12)
Noch keine Farben ausgewählt

Was ist Bild Farben extrahieren?

Mit „Bild Farben extrahieren“ können Sie mit der Maus über beliebige Bereiche eines Bildes fahren und sofort die exakte Farbe an diesem Pixel sehen. Klicken Sie, um die Farbe zu fixieren und als HEX, RGB oder HSL zu kopieren. Ein Bereich für die Farbhistorie speichert bis zu 12 ausgewählte Farben für einfaches Nachschlagen — nützlich für Designer, Entwickler und alle, die Farben aus Fotos oder Screenshots abgleichen müssen.

So verwenden Sie Bild Farben extrahieren

  1. Laden Sie ein beliebiges Bild hoch, indem Sie auf die Ablagefläche klicken oder eine Datei darauf ziehen.
  2. Bewegen Sie die Maus über das Bild, um eine Live-Farbvorschau im schwebenden Badge und im Seitenbereich zu sehen.
  3. Klicken Sie auf eine beliebige Stelle im Bild, um diese Farbe auszuwählen und in der Historie zu speichern.
  4. Verwende die Kopier-Schaltflächen, um HEX-, RGB- oder HSL-Werte in die Zwischenablage zu kopieren.
  5. Klicke auf ein beliebiges Farbmuster im Verlaufsbereich, um diese Farbe wieder in der Hauptanzeige anzuzeigen.

Verwandte Tools

🎨
Farbe wählen
Farbe auswählen und HEX-, RGB- und HSL-Werte erhalten
 ☀️
Bild Helligkeit Kontrast
Helligkeit und Kontrast von Fotos mit Sofortvorschau feinjustieren
 ⬛
Bild in Graustufen
Fotos im Browser in Graustufen oder Schwarzweiß umwandeln
Farbextraktion verstehen ▾
Beispiel
Eingabe Lade einen Marken-Screenshot hoch und bewege den Mauszeiger über die Logofarbe
Ausgabe #1A73E8 · rgb(26, 115, 232) · hsl(217, 80%, 51%) – bereit zum Kopieren
Häufige Anwendungsfälle
  • Exakte Markenfarben aus einem Logo oder Screenshot ermitteln
  • Eine passende Hintergrundfarbe aus einem Foto für ein UI-Design finden
  • Einen CSS-Farbwert aus einem Design-Mockup extrahieren
  • Erstelle eine Mini-Palette, indem du mehrere Farben anklickst und den Verlaufsbereich nutzt
Warum dieses Tool verwenden
  • Pixelgenaue Farbextraktion mit Canvas getImageData – ohne Rundung.
  • Drei Ausgabeformate (HEX, RGB, HSL) mit Ein-Klick-Kopieren für jedes.
  • Läuft vollständig in deinem Browser – Bilder verlassen niemals dein Gerät.
Häufig gestellte Fragen
Wird mein Bild auf einen Server hochgeladen?

Nein. Die gesamte Verarbeitung erfolgt vollständig in deinem Browser über die HTML5 Canvas API. Dein Bild verlässt niemals dein Gerät.

Wie genau sind die extrahierten Farbwerte?

Die Werte sind pixelgenau – das Tool liest die exakten RGBA-Werte des Pixels unter Ihrem Cursor mit der Canvas getImageData API und rechnet sie anschließend mathematisch in HEX, RGB und HSL um.

Wie unterscheidet sich dieses Tool von einem Paletten-Extraktor?

Ein Paletten-Extraktor entnimmt automatisch dominante Farben aus einem Bild. Mit diesem Tool können Sie jeden einzelnen Pixel manuell anklicken, um seine exakte Farbe zu erhalten – so haben Sie die genaue Kontrolle darüber, welche Farbe Sie extrahieren.

Welches Format nutzt die Kopieren-Schaltfläche?

Jedes Format wird als direkt nutzbarer String kopiert: HEX wird als #RRGGBB kopiert, RGB als rgb(R, G, B) und HSL als hsl(H, S%, L%).