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 einen beliebigen Farbton aus einem Bild aufnehmen und in exakte Farbcodes übersetzen. Sie klicken einfach mit der Pipette auf ein Pixel und erhalten im selben Moment die passenden Werte in HEX, RGB, HSL, HSV und CMYK – ohne Raten und ohne umständliches Nachmessen. Genau das brauchen Fachleute im Webdesign, in der Entwicklung, im Druck und überall dort, wo Farben sauber aufeinander abgestimmt werden müssen.
Dieser Farbwähler ist vollständig kostenlos und läuft komplett im Browser. Ihre Bilder werden nicht auf einen Server übertragen, sondern lokal auf Ihrem Gerät verarbeitet – das schont Ihren Datenschutz. Nebst der reinen Farbaufnahme extrahieren Sie mit einem Klick eine ganze Palette aus einem Foto, erzeugen stimmige Farbharmonien und prüfen den WCAG-Kontrast zwischen Text und Hintergrund, damit Ihre Gestaltung auch barrierefrei funktioniert.
So bestimmen Sie eine Farbe aus einem Bild
- 1
Bild laden
Laden Sie ein Bild hoch oder ziehen Sie es einfach in das Feld. Alternativ fügen Sie es mit Strg/Cmd + V ein oder geben eine Bild-URL an.
- 2
Mit der Pipette eine Farbe aufnehmen
Klicken Sie mit der Pipette auf ein beliebiges Pixel im Bild. Die Zoom-Ansicht hilft Ihnen, genau den gewünschten Punkt zu treffen.
- 3
Farbcodes ablesen und kopieren
Lesen Sie die Werte in HEX, RGB, HSL, HSV und CMYK ab und kopieren Sie das gewünschte Format mit einem einzigen Klick.
- 4
Palette aus dem Bild extrahieren
Lassen Sie sich die wichtigsten Farben des Bildes als Palette anzeigen, um in Sekunden ein stimmiges Farbschema zu gewinnen.
- 5
Farbharmonien erzeugen
Erstellen Sie aus Ihrer Farbe komplementäre, analoge, triadische oder monochromatische Harmonien und finden Sie passende Kombinationen.
- 6
Kontrast prüfen und Palette sichern
Prüfen Sie den WCAG-Kontrast zwischen Text und Hintergrund, speichern Sie Ihre Favoriten und exportieren Sie die Palette als CSS, JSON oder PNG.
HEX, RGB, HSL, HSV und CMYK erklärt
Dieselbe Farbe lässt sich auf verschiedene Arten beschreiben. Welches Modell sinnvoll ist, hängt vom Einsatz ab: Für das Web arbeiten Sie meist mit HEX oder RGB, für feines Anpassen mit HSL oder HSV und für den Druck mit CMYK. Die folgende Übersicht zeigt jedes Modell mit einem Beispiel und dem Bereich, in dem es sich am besten eignet.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web und CSS – kompakte Schreibweise für Websites |
| RGB | rgb(59, 130, 246) | Bildschirme und digitale Anzeigen |
| HSL | hsl(217, 91%, 60%) | Intuitives Anpassen von Farbton, Sättigung und Helligkeit |
| HSV | hsv(217, 76%, 96%) | Design-Tools und Farbwähler in Grafikprogrammen |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Druck und Vierfarbverfahren |
Web- und UI-Design
Nehmen Sie Farben direkt aus Screenshots, Mockups oder Referenzbildern auf und übernehmen Sie sie exakt in Ihre Oberfläche. So bleiben Buttons, Hintergründe und Akzente über das ganze Design hinweg konsistent, und Sie erstellen im Handumdrehen ein abgestimmtes Farbschema für Ihre Website oder App.
Frontend-Entwicklung
Kopieren Sie den HEX- oder RGB-Wert und legen Sie ihn als CSS-Variable ab, etwa --primary: #3B82F6. Der Farbwähler liefert Ihnen die Codes im richtigen Format, sodass Sie Farben ohne Umwege in Stylesheets, Design-Tokens oder Komponenten übernehmen können.
Druck und Branding
Für Drucksachen wie Broschüren, Visitenkarten oder Verpackungen zählen die CMYK-Werte. Lesen Sie den CMYK-Anteil direkt ab und stellen Sie sicher, dass Ihre Markenfarben auf Papier so wirken wie am Bildschirm – ein wichtiger Schritt für ein einheitliches Erscheinungsbild.
Barrierefreiheit
Prüfen Sie mit dem integrierten Kontrastprüfer, ob Text und Hintergrund die WCAG-Vorgaben erfüllen. Ein ausreichender Kontrast sorgt dafür, dass Ihre Inhalte auch für Menschen mit Sehbeeinträchtigung gut lesbar bleiben und Ihre Website den Richtlinien für Barrierefreiheit entspricht.
Der Vergleich
Viele Online-Farbwähler beschränken sich auf das Nötigste. Die folgende Übersicht zeigt, was dieser Farbwähler zusätzlich bietet – im Vergleich zu imagecolorpicker.com.
| Farbmodelle | HEX, RGB, HSL, HSV und CMYK auf einen Blick | Vorwiegend HEX und RGB |
| CMYK für den Druck | Ja, direkt ablesbar | Nicht vorhanden |
| WCAG-Kontrastprüfer | Integriert, mit Bewertung nach AA und AAA | Nicht vorhanden |
| Farbharmonien | Komplementär, analog, triadisch und mehr | Nicht vorhanden |
| Werbung | Keine Werbung, kein Tracking | Werbung eingeblendet |
Häufige Fragen
Wie bestimme ich eine Farbe aus einem Bild?
Laden Sie das Bild hoch und klicken Sie mit der Pipette auf die gewünschte Stelle. Der Farbwähler zeigt Ihnen sofort die Werte in HEX, RGB, HSL, HSV und CMYK an, die Sie mit einem Klick kopieren können.
Was ist ein HEX-Farbcode?
Ein HEX-Farbcode ist eine kompakte Schreibweise für Farben im Web, beginnend mit einer Raute, zum Beispiel #3B82F6. Die sechs Zeichen stehen für die Rot-, Grün- und Blauanteile im Hexadezimalformat und werden vor allem in HTML und CSS verwendet.
Wie rechne ich RGB in HEX um?
Jeder der drei RGB-Werte von 0 bis 255 wird in eine zweistellige Hexadezimalzahl umgewandelt und zu einem Code zusammengesetzt. Aus rgb(59, 130, 246) wird so #3B82F6. Der Farbwähler übernimmt diese Umrechnung automatisch für Sie.
Wie erstelle ich eine Farbpalette aus einem Foto?
Laden Sie das Foto hoch und lassen Sie die Palette extrahieren. Der Farbwähler ermittelt die dominierenden Farben des Bildes und stellt sie als Palette dar, die Sie speichern und als CSS, JSON oder PNG exportieren können.
Wie prüfe ich den Farbkontrast auf Barrierefreiheit?
Wählen Sie eine Text- und eine Hintergrundfarbe, und der Kontrastprüfer berechnet das Kontrastverhältnis. Er zeigt Ihnen an, ob die Kombination die WCAG-Stufen AA und AAA erfüllt, damit Ihre Inhalte gut lesbar bleiben.
Ist der Farbwähler kostenlos und meine Daten geschützt?
Ja, das Werkzeug ist vollständig kostenlos und läuft direkt im Browser. Ihre Bilder werden lokal auf Ihrem Gerät verarbeitet und nicht auf einen Server hochgeladen, sodass Ihre Daten privat bleiben.
