Bild-Farbwähler: Farben aus jedem Bild extrahieren (2026)

Ein Bild-Farbwähler lässt dich auf jedes Pixel in einem Bild klicken und seinen exakten Farbcode erhalten. Du erhältst den Wert sofort im HEX-, RGB- oder HSL-Format. Designer nutzen sie, um Markenfarben abzugleichen. Entwickler nutzen sie, um UI-Elemente zu kopieren. Vermarkter nutzen sie, um visuelle Inhalte konsistent zu halten.

Egal ob du einen schnellen Hex-Farbwähler oder eine vollständige Farbpalette aus einem Foto brauchst, dieser Leitfaden deckt jede Methode ab. Du lernst, wie du einen Farbwähler aus Bild-Upload verwendest, Farben von deinem Bildschirm holst und das richtige Format für dein Projekt wählst.

Was ist ein Bild-Farbwähler (und warum du einen brauchst)

Ein Bild-Farbwähler liest den exakten Farbwert jedes Pixels, auf das du klickst. Du hörst ihn vielleicht auch als Farbidentifizierungs-Tool oder Farbcode-Wähler bezeichnet. Statt zu raten, dass ein Button „irgendeine Schattierung von Blau" ist, erhältst du einen präzisen Code wie #3B82F6. Füge ihn direkt in dein CSS, dein Designtool oder deine Markenrichtlinie ein.

Hier sind die Fälle, in denen du zu einem greifst:

• Markenfarben abgleichen vom Logo eines Kunden oder einem Website-Screenshot
• Ein UI nachbauen, das du in der App eines Konkurrenten gesehen hast
• Eine Farbpalette aufbauen aus einem Moodboard oder Foto
• Barrierefreiheit prüfen durch Vergleich von Vordergrund- und Hintergrundkontrast
• Farben identifizieren in Druckmaterialien für digitale Übernahme

Das Beste daran? Die meisten Farbwähler-Tools sind kostenlos und laufen in deinem Browser. Keine Software zu installieren.

Verwende unseren kostenlosen Online-Farbwähler

Der schnellste Weg, eine Farbe aus einem Bild zu extrahieren, ist mit einem browserbasierten Tool. Unser kostenloser Farbwähler lässt dich jedes Bild hochladen und klicken, um exakte Farbcodes zu erhalten.

So funktioniert es:

1. Öffne das Farbwähler-Tool
2. Lade dein Bild hoch (Drag-and-drop oder klicke zum Durchsuchen)
3. Klicke auf jedes Pixel, um seine HEX-, RGB- und HSL-Werte zu erhalten
4. Kopiere den Code, den du brauchst

Keine Anmeldung. Keine Wasserzeichen. Deine Bilder bleiben in deinem Browser und werden nie an einen Server gesendet.

Brauchst du mehr als eine Farbe? Verwende den Farbpaletten-Extraktor, um die Hauptfarben aus jedem Bild zu ziehen. Er ist großartig für Moodboards oder das Greifen des vollständigen Farbschemas einer Marke aus einem einzigen Screenshot.

Profi-Tipp: Mache einen Screenshot von einer beliebigen App oder Website mit ScreenSnap Pro, dann lege ihn in den Farbwähler. Du gehst von „Ich mag diese Schattierung" zu einem nutzbaren HEX-Code in unter 10 Sekunden.

So wählst du Farben aus Bildern auf dem Mac

Mac hat einen integrierten Farbwähler vom Bildschirm namens Digital Color Meter. Er ist überraschend gut für schnelle Farbgriffe.

Digital Color Meter verwenden

1. Öffne Digital Color Meter (suche in Spotlight mit ⌘ + Leertaste)
2. Bewege deinen Cursor über jedes Pixel auf dem Bildschirm
3. Die App zeigt RGB-Werte in Echtzeit, während du dich bewegst
4. Drücke ⌘ + Shift + C, um den Farbwert zu kopieren

Das Ausgabeformat anpassen

Digital Color Meter ist standardmäßig auf RGB eingestellt, aber du kannst es ändern:

• Klicke auf das Dropdown oben im Fenster
• Wechsle zwischen In sRGB anzeigen, Generic RGB oder Native Display-Werte anzeigen
• Für HEX-Codes wähle In sRGB als Hexadezimal anzeigen

Einschränkungen

Digital Color Meter funktioniert auf allem auf deinem Bildschirm, nicht nur auf Bildern. Das macht es großartig zum Wählen von Farben aus Apps, Websites und Menüleisten. Aber er kann nur lesen, was gerade auf dem Display ist. Wenn du Farben aus einer geschlossenen Datei brauchst, öffne sie zuerst oder verwende ein Online-Tool.

Für gespeicherte Screenshots öffne sie in der Vorschau und bewege den Cursor mit Digital Color Meter. Wenn du den Screenshot annotieren musst mit Farb-Info, spart ein dediziertes Tool Zeit.

Farben in Chrome DevTools wählen

Entwickler müssen oft Farben von Live-Websites greifen. Chromes integrierter Farbwähler Chrome in DevTools ist perfekt dafür.

Methode 1: Element inspizieren

Der Farbwähler Chrome in DevTools bietet einen der mächtigsten verfügbaren:

1. Rechtsklick auf jedes Element auf einer Webseite → Untersuchen
2. Im Styles-Panel klicke auf jeden Farb-Swatch (das kleine farbige Quadrat)
3. Chrome öffnet einen vollständigen RGB-Farbwähler mit HEX-, RGB-, HSL- und HWB-Formaten
4. Verwende das Pipetten-Icon, um jede sichtbare Farbe auf der Seite zu wählen

Die Pipette funktioniert auf jedem Pixel im Browserfenster. Das schließt Bilder, Verläufe und Videos ein. Es ist der schnellste Weg, Farbe aus Bild-Elementen auf einer Live-Seite zu extrahieren, ohne irgendetwas zu speichern.

Methode 2: CSS Overview

1. Öffne DevTools (⌘ + Option + I auf Mac)
2. Drücke ⌘ + Shift + P, um das Befehlsmenü zu öffnen
3. Tippe „CSS Overview" und wähle Show CSS Overview
4. Klicke auf Capture overview
5. Scrolle zum Abschnitt Colors für jede auf der Seite verwendete Farbe

Das fungiert als Bild-Farbanalysator für ganze Websites. Es zeigt jede einzigartige Farbe, die in Hintergründen, Text, Rahmen und Füllungen verwendet wird. Es ist nützlich, wenn du versuchst, ein Designsystem zu kartieren.

Für einen tieferen Einblick in das Extrahieren von Inhalten aus Bildschirmen, schau dir unseren Leitfaden So kopierst du Text aus Screenshots mit OCR an.

Browser-Erweiterungen für Farbwähler

Wenn du oft Farben von Websites greifst, spart eine Browser-Erweiterung dir das Öffnen der DevTools jedes Mal. Zwei Erweiterungen dominieren diesen Bereich.

ColorZilla

ColorZilla ist die beliebteste Farbwähler-Chrome-Erweiterung mit über 4 Millionen Nutzern. Klicke auf das Pipetten-Icon in deiner Symbolleiste, bewege den Cursor über jedes Element und klicke, um den Code zu kopieren. Es unterstützt HEX, RGB und HSL.

Hauptfunktionen:

• Page Color Analyzer listet jede Farbe auf einer Seite auf, sortiert nach Häufigkeit
• Farbverlauf speichert kürzliche Auswahlen für einfachen Vergleich
• Verlaufsgenerator baut CSS-Verläufe aus deinen Auswahlen
• Funktioniert in Chrome und Firefox

Eye Dropper

Eye Dropper ist eine leichtere Alternative, die eine Sache gut macht: Farben mit einem einzigen Klick wählen. Du erhältst HEX-, RGB- und HSL-Werte plus eine Historie der letzten Auswahlen.

Wähle Eye Dropper für schnelle Farbgriffe. Wähle ColorZilla, wenn du Seitenanalyse und Verlaufstools brauchst.

Hinweis: Browser-Erweiterungen funktionieren nur auf Webseiten. Sie können nicht von deinem Desktop oder anderen Apps sampeln. Für diese Aufgaben verwende Digital Color Meter oder ein Online-Upload-Tool.

Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 29 $, für immer deins.

Sieh, was es kann

Farbwähler in Designtools

Die meisten Design-Apps werden mit einer eingebauten Pipette geliefert. Wenn du bereits in Figma, Photoshop oder Sketch arbeitest, brauchst du kein separates Tool.

Figma

Wähle eine beliebige Ebene und klicke auf den Füllfarben-Swatch. Klicke dann auf das Pipetten-Icon (oder drücke I für die Verknüpfung). Figmas Wähler funktioniert auf allem, was im Canvas sichtbar ist, einschließlich Bildern, Verläufen und Komponenten. Er zeigt standardmäßig HEX, aber du kannst auf RGB, HSL oder CSS umschalten.

Füge einen Screenshot in einen beliebigen Frame ein, drücke I und klicke auf jedes Pixel, um seinen Wert direkt zu greifen.

Adobe Photoshop

Photoshops Pipettenwerkzeug (I) ist eines der präzisesten verfügbaren Farbidentifizierungs-Tools. Es liest einzelne Pixel, 3×3-Mittelwerte, 5×5-Mittelwerte und größere Beispielbereiche. Die gemittelten Modi filtern JPEG-Rauschen heraus und geben dir sauberere Ergebnisse von komprimierten Bildern.

Für die Batch-Extraktion verwende Bild → Modus → Indizierte Farbe und stelle eine feste Anzahl von Palettenfarben ein. Photoshop reduziert das Bild und zeigt jede Farbe in der Farbtabelle.

Sketch

Drücke Control + C, um den Farbwähler in Sketch zu aktivieren. Er funktioniert auf allem, was auf dem Bildschirm sichtbar ist, einschließlich Elementen außerhalb deiner Zeichenflächen. Sketch zeigt HEX-Werte standardmäßig.

Wann ein Designtool vs. einen eigenständigen Wähler verwenden

Verwende die Pipette deines Designtools, wenn du bereits bearbeitest. Verwende einen eigenständigen Wähler, wenn du aus einem zufälligen Bild, einer anderen App sampeln musst oder keine Designsoftware installiert hast.

Beste Online-Bild-Farbwähler im Vergleich

Nicht alle Farbwähler-Tools sind gleich. Hier ist, wie die beliebtesten Optionen abschneiden:

Worauf du achten solltest

• Unterstützung von Farbformaten. Mindestens willst du HEX und RGB. HSL ist nützlich zum Anpassen von Helligkeit oder Sättigung. Manche Tools unterstützen auch CMYK für Druckarbeit.
• Paletten-Extraktion. Einzelfarbenwählen ist gut für schnelle Aufgaben. Aber Paletten-Extraktion spart Zeit, wenn du ein vollständiges Farbschema brauchst.
• Datenschutz. Browserbasierte Tools, die deine Bilder nie hochladen, sind am sichersten. Das ist wichtig für Kundenarbeit oder unveröffentlichte Designs.
• Tastatur-Unterstützung. Pfeiltasten-Navigation für Pixel-genaue Auswahl macht einen großen Unterschied.

So extrahierst du eine vollständige Farbpalette aus einem Bild

Eine Farbe nach der anderen zu wählen, funktioniert für kleine Aufgaben. Aber wenn du eine vollständige Farbpalette für ein Marken-Redesign oder ein Slide-Theme brauchst, ist die automatisierte Extraktion viel schneller.

Schritt-für-Schritt-Paletten-Extraktion

1. Öffne den Farbpaletten-Extraktor
2. Lade dein Referenzbild hoch (ein Foto, Screenshot oder Logo)
3. Das Tool analysiert das Bild und extrahiert dominante Farben
4. Passe die Anzahl der Farben an (typisch funktionieren 5-8 am besten)
5. Kopiere die Palette in deinem bevorzugten Format

Tipps für bessere Paletten-Ergebnisse

Beginne mit hochwertigen Quellbildern. Niedrigauflösende oder komprimierte Fotos fügen Farbrauschen hinzu, das Ergebnisse verzerrt. Wenn du von einem Website-Screenshot ausgehst, mache zuerst eine hochwertige Aufnahme.

Schneide auf den Bereich zu, der zählt. Wenn dir nur die Farben des Hero-Bildes wichtig sind, schneide zuerst die Navi und den Footer aus. Tools scannen jedes Pixel, also verwässern zusätzliche Bereiche die Palette.

Probiere verschiedene Bilder derselben Marke. Ein Screenshot zeigt vielleicht nicht die volle Farbpalette. Ziehe Paletten aus 2-3 Quellen, um ein vollständigeres Bild zu bauen.

Farbformate erklärt: HEX vs. RGB vs. HSL

Jeder Farbwähler gibt dir Codes. Aber welches Format solltest du verwenden? Hier ist ein schneller Blick auf die drei häufigsten.

HEX (Hexadezimal)

Format: #FF5733

HEX ist das häufigste Format im Web. Es ist ein sechsstelliger Code (plus dem #), der für Rot-, Grün- und Blau-Werte steht. Du verwendest HEX in CSS, Designtools wie Figma und Markenrichtlinien.

Am besten für: Webdesign, CSS, Markendokumente.

Musst du zwischen Formaten konvertieren? Unser HEX-zu-RGB-Konverter erledigt es sofort.

RGB (Rot, Grün, Blau)

Format: rgb(255, 87, 51)

RGB setzt Farben durch ihre Rot-, Grün- und Blau-Lichtwerte auf einer 0-255-Skala. Es ist das Standardformat für Bildschirme. CSS unterstützt rgb() standardmäßig, und die meisten Programmiersprachen verwenden RGB für Farbarbeit.

Am besten für: CSS-Variablen, Farbänderungen im Code, Datendiagramme.

HSL (Farbton, Sättigung, Helligkeit)

Format: hsl(11, 100%, 60%)

HSL zeigt Farbe auf eine Weise, die sich natürlich anfühlt. Farbton ist die Farbe (0-360°). Sättigung ist, wie lebendig sie ist (0-100 %). Helligkeit kontrolliert, wie hell oder dunkel sie aussieht (0-100 %). Willst du eine dunklere Schattierung? Senke einfach den Helligkeitswert.

Am besten für: Paletten bauen, CSS-Themes, Anpassen für Zugänglichkeitsbedürfnisse.

Schneller Vergleich

Faustregel: Verwende HEX für feste Werte wie Markenfarben. Verwende HSL, wenn du Varianten wie Hover-Zustände oder Dark-Mode-Themes automatisch erstellen musst.

Tipps zum genauen Abgleichen von Farben

Den richtigen Farbcode zu bekommen ist nur die halbe Arbeit. Hier ist, wie du sicherstellst, dass deine Farben in der Praxis richtig aussehen.

Bildschirm-Unterschiede berücksichtigen

Derselbe HEX-Code kann auf zwei Bildschirmen unterschiedlich aussehen. Wenn Farbgenauigkeit wichtig ist, kalibriere dein Display. Auf dem Mac geh zu Systemeinstellungen → Displays → Farbprofil.

Auf Kompressionsartefakte achten

JPEG-Komprimierung verschiebt Farben leicht in der Nähe von Kanten. Wenn du Farben aus einem Screenshot wählst, verwende PNG für pixelgenaue Ergebnisse. Du kannst das Standard-Screenshot-Format deines Macs ändern auf PNG, falls es das nicht bereits ist.

Mehrere Pixel sampeln

Verlasse dich nicht auf einen einzelnen Klick. Zoome rein und sample 3-5 nahegelegene Pixel. Kleine Verschiebungen sind normal. Wähle den häufigsten Wert oder mittele sie. Fotos sind selten gleichförmig auf Pixelebene.

Im Kontext prüfen

Eine Farbe, die auf Weiß großartig aussieht, kann sich auf Dunkelgrau falsch anfühlen. Teste deine ausgewählten Farben immer auf den echten Hintergründen, auf denen du sie verwenden wirst. Für Zugänglichkeitsbedürfnisse prüfe, dass dein Kontrastverhältnis WCAG AA (4,5:1 für normalen Text) erfüllt.

Den richtigen Farbraum verwenden

Wenn du geräteübergreifend arbeitest, bleibe bei sRGB. Es ist der Standard für das Web und die meisten Bildschirme. Figma verwendet sRGB standardmäßig, und CSS auch. Verwende Display P3 oder Adobe RGB nur, wenn du Wide-Gamut-Displays anpeilst.

In Light- und Dark-Mode testen

Viele Websites und Apps verwenden unterschiedliche Paletten für Light- und Dark-Themes. Wenn du eine Farbe aus dem Light-Mode wählst, passt sie nicht zur Dark-Mode-Variante. Sample beide Versionen und dokumentiere jede Palette separat.

Mit einem Kontrast-Prüfer verifizieren

Nachdem du deine Farben gewählt hast, lass das Vordergrund- und Hintergrund-Paar durch einen Kontrast-Prüfer laufen. WCAG AA erfordert ein 4,5:1-Verhältnis für normalen Text und 3:1 für großen Text. Eine schöne Farbe zu wählen bedeutet nichts, wenn dein Text unleserlich wird.

Screenshots mit Farbwählen kombinieren

Hier ist ein zuverlässiger Workflow für Designer. Erfasse den Bildschirm mit einem Tool wie ScreenSnap Pro. Lass dann den Screenshot durch ein Farbwähler aus Bild-Tool laufen. Du erhältst eine wiederverwendbare Referenzdatei plus exakte Farbcodes. Das ist großartig für Apps, die ihre Farbwerte nicht zeigen, wie native iOS- oder macOS-Oberflächen.

Wenn du mehrere Screenshots kombinieren musst für eine umfassende Farbreferenz, mache das, bevor du die Palette extrahierst.

Häufig gestellte Fragen

Wie wähle ich eine Farbe aus einem Bild online?

Lade dein Bild in ein kostenloses Farbwähler-Tool und klicke auf jedes Pixel. Das Tool zeigt den exakten HEX-, RGB- und HSL-Code. Die meisten browserbasierten Wähler verarbeiten Bilder lokal. Deine Dateien bleiben privat.

Kann ich Farben aus einem Screenshot extrahieren?

Ja. Mache einen Screenshot auf deinem Mac (⌘ + Shift + 4) und lade ihn in einen beliebigen Online-Bild-Farbwähler hoch. Oder verwende den Digital Color Meter des Macs, um Farben direkt von deinem Bildschirm zu wählen. Keine Notwendigkeit, zuerst eine Datei zu speichern.

Was ist der Unterschied zwischen HEX- und RGB-Farbcodes?

Beide zeigen die gleichen Farben. HEX verwendet einen sechsstelligen Code (#FF5733). RGB verwendet Zahlenwerte (rgb(255, 87, 51)). HEX ist häufiger in CSS und Designtools. RGB ist leichter zu lesen und im Code zu ändern.

Gibt es einen in macOS integrierten Farbwähler?

Ja. Digital Color Meter wird mit jedem Mac geliefert. Öffne ihn aus Spotlight, bewege den Cursor über jedes Pixel und drücke ⌘ + Shift + C, um den Farbwert zu kopieren. Er unterstützt RGB- und HEX-Ausgabeformate.

Wie viele Farben sollte eine Markenpalette haben?

Die meisten Marken verwenden 3-6 Kernfarben. Das bedeutet eine primäre, eine sekundäre, 1-2 Akzente und Neutrale (Schwarz, Weiß, Grau). Ziehe deine Hauptfarben aus deinem Logo oder Hero-Bild mit einem Paletten-Extraktor. Baue dann Schattierungen von dort aus.