Farbwähler

Verwenden Sie unseren kostenlosen Online-Farbpicker, um Farben aus jedem Bild oder dem Bildschirm auszuwählen. Holen Sie sich sofort HEX-, RGB- und HSL-Codes. 100% privat.

Ein Farbwähler extrahiert Farbwerte aus Bildern oder Ihrem Bildschirm und gibt HEX, RGB und HSL codes for any pixel you click. It uses the browser's Canvas API to read pixel data from uploaded images, and the EyeDropper API (Chrome, Edge) to capture colors from anywhere on your screen. Die gesamte Verarbeitung erfolgt lokal -- no images or color data are transmitted.

Farben aus Bildern oder Ihrem Bildschirm auswählen – ohne Uploads

Laden Sie ein Bild hoch oder verwenden Sie die systemweite Pipette, um jeden Pixel auf Ihrem Bildschirm zu erfassen. Erhalten Sie sofort HEX, RGB und HSL – alles lokal in Ihrem Browser.

Alle Formate

Bildschirm-Pipette

Kostenlos und unbegrenzt

So geht's

1
Methode wählen
Bild hochladen oder »Aus dem Bildschirm auswählen« nutzen.
2
Farbe wählen
Über das Bild fahren für Vorschau, klicken zum Erfassen.
3
Code kopieren
Die Farbe wird dem Verlauf hinzugefügt. Klicken zum Kopieren von HEX, RGB oder HSL.

Ein Helfer für Designer und Entwickler

Designer

Holen Sie sich schnell genaue Hex-Codes aus Logos oder Fotos. Erstellen Sie Ihre Farbpalette mit pixelgenauer Präzision.

Entwickler

Extrahieren Sie Farbwerte aus UI-Prototypen für CSS. Holen Sie sich RGB- oder HEX-Werte ohne Design-Software.

Grundlagen der digitalen Farbauswahl

How digital color works

Digitale Displays reproduzieren Farben mit dem additiven RGB-Farbmodell (Rot, Grün, Blau). Jedes Pixel auf dem Bildschirm besteht aus drei Subpixeln (Rot, Grün, Blau), die jeweils auf 256 Helligkeitsstufen (0-255) eingestellt werden können. Durch die Kombination dieser drei Kanäle kann ein Standarddisplay 16,7 Millionen Farben (256³) erzeugen. Der Farbwert, den Sie aus einem Bild oder Bildschirm auswählen, ist das RGB-Tripel dieses Pixels und kann in mehreren Neintationen ausgedrückt werden: HEX (#00BFA5), RGB (rgb(0, 191, 165)) oder HSL (hsl(174, 100%, 37%)).

Wenn Sie mit unserem Tool eine Farbe aus einem Bild auswählen, liest die Canvas API des Browsers die Pixeldaten an der Klickposition mit getImageData(). Dies gibt ein Uint8ClampedArray zurück, das die RGBA-Werte (Rot, Grün, Blau, Alpha) des Pixels enthält. Der Alpha-Kanal (0-255) gibt die Transparenz an. 0 ist vollständig transparent, 255 ist vollständig deckend. Das Tool wandelt dann die RGB-Werte in HEX und HSL um, um sie anzuzeigen. Für die bildschirmweite Farbauswahl erfasst die EyeDropper API die Farbe eines einzelnen Pixels überall auf dem Display, einschließlich anderer Browser-Tabs und Desktop-Anwendungen.

Farbräume sind wichtig, wenn Sie Farben für verschiedene Zwecke auswählen. Der sRGB-Farbraum ist der Standard für Webdesign. Es ist das, was Browser, CSS und HTML verwenden. Viele moderne Displays unterstützen jedoch einen breiteren Farbraum (Adobe RGB, Display P3), der gesättigtere Farben anzeigen kann als sRGB. Wenn Sie eine Farbe aus einem P3-Display-Bild auswählen, kann der Browser P3-Werte melden, die außerhalb des sRGB-Farbraums liegen. Für Webdesign arbeiten Sie immer in sRGB, um geräteübergreifende Farbkonsistenz zu gewährleisten. Für Druckdesign erwägen Sie die Verwendung eines speziellen Druck-Farbverwaltungs-Tools.

Practical color picking workflows

Designer verwenden Farbwähler in mehreren Workflows: Extrahieren von Markenfarben aus einem Logo-Bild, Erstellen einer Farbpalette aus einem Foto, Abgleichen von Farben zwischen einem Design-Mockup und einer Live-Website und Erfassen von inspirierenden Farben überall auf dem Bildschirm. Die EyeDropper API ist besonders leistungsstark für den letzten Anwendungsfall – Sie können Farben aus einem Design in Figma, einer Website in einem anderen Tab oder einer Desktop-Anwendung auswählen, ohne zuerst einen Screenshot machen zu müssen.

Beim Erstellen einer Farbpalette aus einem Bild wählen Sie 3-5 Farben, die die Haupttöne repräsentieren. Beginnen Sie mit der auffälligsten Farbe (normalerweise dem Hintergrund), wählen Sie dann 1-2 Akzentfarben und schließlich neutrale Farben. Tools wie unser Paletten-Generator können diesen Prozess automatisieren, indem sie das Farbhistogramm des Bildes analysieren. Wählen Sie beim Auswählen von Farben für die Barrierefreiheit immer das Kontrastverhältnis zwischen Text- und Hintergrundfarben. Unser Kontrast-Prüfer verwendet die WCAG-2.1-Kontrastformel, um die Lesbarkeit sicherzustellen.

Farbcodes verstehen

HEX (Hexadezimal)

Bsp: #00BFA5. Das gängigste Web-Farbformat. Sechstelliger Code für Rot-Grün-Blau-Mix.

RGB (Rot, Grün, Blau)

Bsp: rgb(0, 191, 165). Definiert die Intensität der Lichtkomponenten (0-255).

HSL (Farbton, Sättigung, Helligkeit)

Bsp: hsl(174, 100%, 37%). Intuitiver. Farbton ist die Farbe, Sättigung die Intensität.

Wie vergleicht sich dieses Tool mit anderen Farbwählern?

Ein direkter Vergleich beliebter Farbwähler-Tools.

Funktion	NovaTools	ImageColorPicker.com
Aus Bild auswählen	Canvas-API
Vom Bildschirm auswählen	EyeDropper-API
HEX + RGB + HSL output	Alle three	Nur HEX
Farbverlauf	Unbegrenzt
Datenschutz (kein Upload)	100% local	Lädt Bild hoch
Funktioniert offline

Die meisten Online-Farbwähler erfordern das Hochladen Ihres Bildes auf ihren Server. Unser Tool liest Pixeldaten direkt aus der Canvas API in Ihrem Browser – Ihre Bilder verlassen niemals Ihr Gerät. Die EyeDropper API ermöglicht bildschirmweite Farberfassung, die serverbasierte Tools nicht bieten können.

Häufig gestellte Fragen

Werden meine Bilder auf den Server hochgeladen?

Nein. Ihre Privatsphäre ist gewährleistet. Alle Verarbeitungen erfolgen vollständig in Ihrem Webbrowser. Ihre Bilder verlassen Ihr Gerät niemals.

Was ist die Schaltfläche »Aus dem Bildschirm auswählen«?

Diese Funktion nutzt die EyeDropper-API des Browsers (Chrome/Edge). Sie ermöglicht es Ihnen, Farben aus jeder Anwendung auf dem gesamten Bildschirm auszuwählen.

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX (#RRGGBB) ist Standard für Webdesign. RGB nutzt 0-255 für Farbintensität. HSL (Farbton, Sättigung, Helligkeit) ist oft intuitiver für manuelle Anpassungen.

Welche Browser unterstützen die EyeDropper-API?

Die EyeDropper-API wird derzeit von Chrome (Version 95+), Edge (Version 95+) und Opera (Version 81+) unterstützt. Sie wird ab 2026 in Firefox oder Safari nicht unterstützt. Wenn Sie einen nicht unterstützten Browser verwenden, wird die Schaltfläche »Farbe vom Bildschirm auswählen« nicht angezeigt, aber Sie können weiterhin Farben aus hochgeladenen Bildern auswählen. Die EyeDropper-API ist eine W3C-Entwurfsspezifikation, sodass die Unterstützung in Zukunft auf andere Browser erweitert werden könnte. Für Firefox-Nutzer ist eine ähnliche Funktion über Browser-Erweiterungen verfügbar. Für Safari-Nutzer bietet das integrierte Dienstprogramm Digital Color Meter (in Programme > Dienstprogramme) eine ähnliche systemweite Farbauswahl.

Kann ich mehrere Farben auswählen und einen Verlauf speichern?

Ja. Jede Farbe, die Sie auswählen, wird automatisch zu Ihrem Farbverlauf hinzugefügt, der unter der Hauptfarbanzeige erscheint. Jeder Verlaufseintrag zeigt das Farbmuster, den HEX-Wert, den RGB-Wert und den HSL-Wert mit einzelnen Kopier-Schaltflächen für jedes Format. Sie können eine unbegrenzte Anzahl von Farben in einer einzigen Sitzung auswählen. Der Verlauf bleibt erhalten, bis Sie die Seite aktualisieren oder schließen — er wird nicht im lokalen Speicher gespeichert oder an einen Server übertragen. Dies ist nützlich für die Erstellung einer Farbpalette aus einem einzelnen Bild oder das Erfassen mehrerer Farben aus verschiedenen Teilen Ihres Bildschirms.

Wie kopiere ich einen Farbwert?

Klicken Sie auf einen beliebigen Farbwert (HEX, RGB oder HSL) im Anzeige- oder Verlaufsbereich, um ihn in Ihre Zwischenablage zu kopieren. Der kopierte Wert ist als CSS-fertiger String formatiert: `#00BFA5` für HEX, `rgb(0, 191, 165)` für RGB oder `hsl(174, 100%, 37%)` für HSL. Sie können ihn direkt in Ihr CSS, SCSS, Tailwind-Konfiguration, Design-Tool oder Code-Editor einfügen. Das Tool verwendet die Clipboard-API für zuverlässiges Kopieren in allen modernen Browsern. Eine visuelle Bestätigung (Häkchen oder Tooltip) erscheint, wenn der Wert erfolgreich kopiert wurde.

Ihre Privatsphäre ist unsere Priorität

Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden nicht hochgeladen, gespeichert oder analysiert.

Wir laden Ihre Dateien nicht hoch, speichern oder analysieren sie.
Alles, was Sie verarbeiten, bleibt auf Ihrem Gerät.
Es gibt keine serverseitige Verarbeitung, keinen Cloud-Speicher und keine Analyse.

Auch wenn Ihre Internetverbindung abbricht, bleiben Ihre Dateien sicher.

Das könnte Ihnen auch gefallen

Thema erkunden

Alle Tools in dieser KategorieFarbwerkzeuge Anleitungen zu diesem ThemaDesign & Barrierefreiheit

Farbkontrastprüfer

Farbenkontrast nach WCAG-Standards prüfen.

Farbpaletten-Generator

Schöne Farbpaletten erstellen.

HEX ↔ RGB ↔ HSL-Konverter

Konvertieren Sie Farben zwischen HEX-, RGB- und HSL-Formaten. Live-Vorschau, schnelle Presets, CSS-fertige Werte kopieren. 100% Client-seitig, keine Uploads.