Farbwähler
Wählen Sie jede Farbe aus einem Bild und erhalten Sie sofort HEX-, RGB-, HSL-, HSV- und CMYK-Codes.
Bild hochladen, um eine Farbe zu wählen
Ziehen und ablegen, einfügen oder durchsuchen – PNG, JPG, WEBP oder GIF
Tipp: Sie können ein Bild auch mit Strg/Cmd + V einfügen
Farbcodes
Nächstgelegener Farbname: Royal Blue
Farbharmonien
Kontrastprüfung (WCAG)
Beispieltext
Gespeicherte Farben
Noch keine gespeicherten Farben – wählen Sie eine und tippen Sie auf „Farbe speichern“.
Ein Farbwähler ist ein Werkzeug, mit dem Sie jede beliebige Farbe – etwa aus einem Foto, Screenshot oder Logo – exakt bestimmen und in gängige Farbcodes wie HEX, RGB, HSL, HSV und CMYK übersetzen. Statt Farbwerte per Augenmaß zu schätzen, klicken Sie einfach auf das gewünschte Pixel und erhalten den präzisen Code, den Sie direkt in Ihre Software, Ihr Stylesheet oder Ihr Layout übernehmen können.
Ob im Webdesign, in der Frontend-Entwicklung, in der Druckvorstufe oder bei der barrierefreien Gestaltung – ein zuverlässiger Farbwähler gehört zum täglichen Handwerkszeug. Unser Tool ist vollständig kostenlos und läuft komplett in Ihrem Browser: Ihre Bilder werden niemals auf einen Server hochgeladen, sondern lokal auf Ihrem Gerät verarbeitet, was Ihre Daten und Ihre Entwürfe schützt. Sie erhalten HEX-, RGB-, HSL-, HSV- und CMYK-Werte auf einen Blick, extrahieren automatisch eine Farbpalette aus jedem Bild, erzeugen passende Farbharmonien und prüfen den WCAG-Kontrast zweier Farben – alles in einem Werkzeug.
So bestimmen Sie eine Farbe aus einem Bild
- 1
Bild hochladen
Ziehen Sie ein Bild in das Fenster, fügen Sie es mit Strg/Cmd + V ein oder wählen Sie eine Datei von Ihrem Gerät. Unterstützt werden PNG, JPG, WEBP und GIF – die Verarbeitung erfolgt lokal in Ihrem Browser.
- 2
Farbe mit der Pipette wählen
Klicken Sie mit der Pipette auf ein beliebiges Pixel im Bild. Die Zoom-Vorschau hilft Ihnen, auch feine Farbverläufe und einzelne Bildpunkte präzise zu treffen.
- 3
Farbcodes ablesen und kopieren
Lesen Sie die HEX-, RGB-, HSL-, HSV- und CMYK-Werte der gewählten Farbe ab und kopieren Sie den gewünschten Code mit einem Klick direkt in die Zwischenablage.
- 4
Palette aus dem Bild extrahieren
Lassen Sie das Tool automatisch die dominierenden Farben des Bildes ermitteln und als Palette anzeigen – ideal, um das Farbschema eines Fotos oder einer Marke zu erfassen.
- 5
Farbharmonien erzeugen
Erstellen Sie auf Basis Ihrer Farbe passende Harmonien wie Komplementär-, Analog-, Triaden- oder monochromatische Kombinationen für stimmige Farbschemata.
- 6
Kontrast prüfen und exportieren
Prüfen Sie den WCAG-Kontrast zwischen Text- und Hintergrundfarbe auf Barrierefreiheit und speichern oder exportieren Sie Ihre Palette anschließend als CSS, JSON oder PNG.
HEX, RGB, HSL, HSV und CMYK erklärt
Dieselbe Farbe lässt sich in verschiedenen Farbmodellen beschreiben – jedes ist für einen bestimmten Einsatzzweck optimiert. HEX und RGB dominieren am Bildschirm, HSL und HSV erleichtern das intuitive Anpassen von Farben, und CMYK ist der Standard für den professionellen Vierfarbdruck. Die folgende Übersicht zeigt dieselbe blaue Farbe in allen fünf Notationen.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web und CSS – die kompakte Standardnotation für Farben in HTML und Stylesheets. |
| RGB | rgb(59,130,246) | Bildschirme und digitale Anzeigen, die Farben additiv aus Rot, Grün und Blau mischen. |
| HSL | hsl(217,91%,60%) | Intuitives Anpassen über Farbton, Sättigung und Helligkeit – ideal zum Aufhellen oder Abdunkeln. |
| HSV | hsv(217,76%,96%) | Design- und Grafikprogramme, deren Farbwähler mit Farbton, Sättigung und Hellwert arbeiten. |
| CMYK | cmyk(76%,47%,0%,4%) | Druck und Printprodukte – der subtraktive Standard für Cyan, Magenta, Gelb und Schwarz. |
Web- und UI-Design
Greifen Sie exakte Farben aus Mockups, Screenshots oder Referenzbildern ab und übertragen Sie sie eins zu eins in Ihre Designs. Mit der automatischen Palettenextraktion und den Farbharmonien entwickeln Sie im Handumdrehen stimmige Farbschemata für Websites, Apps und Interfaces.
Frontend-Entwicklung
Kopieren Sie HEX- oder RGB-Werte direkt in Ihre CSS-Variablen, Design-Tokens oder Tailwind-Konfiguration. Da das Tool alle gängigen Notationen liefert, sparen Sie sich das manuelle Umrechnen und übernehmen Farben ohne Reibungsverluste in Ihren Code.
Druck und Branding
Für Broschüren, Visitenkarten oder Verpackungen benötigen Sie CMYK-Werte statt Bildschirmfarben. Unser Farbwähler zeigt zu jeder Farbe direkt die CMYK-Notation an, sodass Sie Markenfarben konsistent vom Screen in die Druckvorstufe überführen.
Barrierefreiheit
Der integrierte WCAG-Kontrastprüfer verrät Ihnen sofort, ob eine Text-Hintergrund-Kombination die Anforderungen der Stufen AA und AAA erfüllt. So stellen Sie sicher, dass Ihre Inhalte für Menschen mit Sehbeeinträchtigung gut lesbar bleiben.
Der Vergleich
Viele bekannte Farbwähler beschränken sich auf das reine Ablesen von HEX- und RGB-Werten. Unser Tool geht deutlich weiter – hier ein Vergleich mit imagecolorpicker.com.
| Farbmodelle | HEX, RGB, HSL, HSV und CMYK auf einen Blick | Im Wesentlichen HEX und RGB |
| CMYK für den Druck | Ja, direkt für jede Farbe angezeigt | Nein bzw. nur eingeschränkt |
| WCAG-Kontrastprüfer | Integriert, mit AA-/AAA-Bewertung | Nicht vorhanden |
| Farbharmonien | Komplementär, Analog, Triadisch, Tetradisch u. a. | Nicht vorhanden |
| Werbung | Werbefrei und ohne Server-Upload | Werbefinanziert |
Häufige Fragen
Wie bestimme ich eine Farbe aus einem Bild?
Laden Sie das Bild hoch oder fügen Sie es ein, aktivieren Sie die Pipette und klicken Sie auf die gewünschte Stelle. Das Tool erfasst das Pixel und zeigt Ihnen sofort die HEX-, RGB-, HSL-, HSV- und CMYK-Werte an, die Sie mit einem Klick kopieren können.
Was ist ein HEX-Farbcode?
Ein HEX-Farbcode ist eine sechsstellige, hexadezimale Schreibweise für Farben, die mit einem Rautezeichen beginnt, zum Beispiel #3B82F6. Jeweils zwei Zeichen stehen für den Rot-, Grün- und Blauanteil der Farbe. HEX ist die Standardnotation für Farben in HTML und CSS.
Wie rechne ich RGB in HEX um?
Jeder der drei RGB-Werte (0 bis 255) wird in eine zweistellige Hexadezimalzahl umgewandelt und zusammengesetzt – aus rgb(59,130,246) wird so #3B82F6. Unser Farbwähler nimmt Ihnen diese Umrechnung ab und zeigt beide Notationen automatisch nebeneinander an.
Wie erstelle ich eine Farbpalette aus einem Foto?
Laden Sie das Foto hoch und nutzen Sie die Funktion „Palette extrahieren“. Das Tool analysiert das Bild und ermittelt automatisch die dominierenden Farben. Die entstandene Palette können Sie speichern und als CSS, JSON oder PNG exportieren.
Wie prüfe ich den Farbkontrast auf Barrierefreiheit?
Wählen Sie im Kontrastprüfer eine Text- und eine Hintergrundfarbe. Das Tool berechnet das Kontrastverhältnis und zeigt an, ob es die WCAG-Anforderungen der Stufen AA und AAA für normalen und großen Text erfüllt – so gestalten Sie Ihre Inhalte gut lesbar.
Ist der Farbwähler kostenlos und datenschutzfreundlich?
Ja. Das Tool ist vollständig kostenlos und läuft ausschließlich in Ihrem Browser. Ihre Bilder werden lokal auf Ihrem Gerät verarbeitet und niemals auf einen Server hochgeladen, sodass Ihre Fotos und Entwürfe privat bleiben.
