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 holt die exakte Farbe aus jedem beliebigen Bild und zeigt sie sofort als HEX-, RGB-, HSL-, HSV- und CMYK-Wert an. Gebraucht wird das laufend: im Webdesign für stimmige Farbschemen, in der Entwicklung, um einen Farbton aus einem Mockup ins CSS zu übernehmen, im Druck, wo CMYK statt RGB zählt, und in der Barrierefreiheit, wenn Text und Hintergrund genug Kontrast brauchen.
Dieses Tool ist gratis und läuft vollständig im Browser – Ihr Bild wird nirgendwo hochgeladen, alles bleibt lokal auf Ihrem Gerät. Aus jedem Pixel lesen Sie HEX, RGB, HSL, HSV und CMYK gleichzeitig ab, dazu lässt sich mit einem Klick eine ganze Palette aus dem Bild extrahieren, passende Farbharmonien generieren und der WCAG-Kontrast zweier Farben direkt prüfen.
So bestimmen Sie eine Farbe aus einem Bild
- 1
Bild hochladen
Bild per Drag-and-drop ins Fenster ziehen, über den Dateidialog auswählen oder mit Strg/Cmd + V einfügen.
- 2
Mit der Pipette klicken
Mit der Pipette auf das gewünschte Pixel im Bild klicken, um dessen Farbe zu erfassen.
- 3
Farbcodes ablesen
HEX, RGB, HSL, HSV und CMYK werden sofort angezeigt – mit einem Klick auf den jeweiligen Wert kopieren.
- 4
Palette extrahieren
Über „Palette extrahieren“ automatisch die dominanten Farben aus dem gesamten Bild ermitteln lassen.
- 5
Farbharmonien erzeugen
Zur gewählten Farbe passende Harmonien generieren – komplementär, analog, triadisch, tetradisch, split-komplementär oder monochromatisch.
- 6
Kontrast prüfen und speichern
WCAG-Kontrast von Vordergrund- und Hintergrundfarbe prüfen, dann die Palette als CSS, JSON oder PNG speichern bzw. exportieren.
HEX, RGB, HSL, HSV und CMYK erklärt
Dieselbe Farbe lässt sich auf mehrere Arten notieren – je nachdem, wofür sie gebraucht wird. Die folgende Übersicht zeigt die gängigsten Farbmodelle mit einem Beispielwert und dem Bereich, in dem sie am meisten Sinn ergeben.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web und CSS |
| RGB | rgb(59, 130, 246) | Bildschirme |
| HSL | hsl(217, 91%, 60%) | Intuitives Anpassen |
| HSV | hsv(217, 76%, 96%) | Design-Tools |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Druck |
Web- und UI-Design
Farben aus Referenzbildern, Screenshots oder Moodboards übernehmen und daraus ein konsistentes Farbschema für Website oder App zusammenstellen – inklusive passender Harmonien für Akzentfarben.
Frontend-Entwicklung
Den exakten HEX-Wert aus einem Design direkt in CSS-Variablen übernehmen, statt Farbwerte zu schätzen oder mühsam im Grafikprogramm nachzumessen.
Druck und Branding
Für Printmaterial zählt CMYK statt RGB. Der CMYK-Wert wird direkt mitgeliefert, damit Logo- und Markenfarben auch gedruckt exakt stimmen.
Barrierefreiheit
Mit dem integrierten WCAG-Kontrastprüfer lässt sich vorab sicherstellen, dass Text auf seinem Hintergrund gut lesbar ist und die Kontraststufen AA bzw. AAA erreicht werden.
Der Vergleich
Viele einfache Farbwähler-Tools wie imagecolorpicker.com liefern nur einen HEX-Wert und sonst wenig. Hier ein direkter Vergleich, was zusätzlich enthalten ist.
| Farbmodelle | HEX, RGB, HSL, HSV und CMYK gleichzeitig | meist nur HEX und RGB |
| CMYK für Druck | inklusive, direkt nutzbar | in der Regel nicht vorhanden |
| WCAG-Kontrastprüfer | integriert, mit AA/AAA-Bewertung | nicht vorhanden |
| Farbharmonien | 6 Harmonie-Typen automatisch generiert | nicht vorhanden |
| Werbung | keine | häufig mit Bannerwerbung |
Häufige Fragen
Wie bestimme ich eine Farbe aus einem Bild?
Bild hochladen oder einfügen, dann mit der Pipette auf die gewünschte Stelle im Bild klicken. Die Farbe wird sofort als HEX-, RGB-, HSL-, HSV- und CMYK-Wert angezeigt.
Was ist ein HEX-Farbcode?
Ein HEX-Code stellt eine Farbe als sechsstelligen Hexadezimalwert dar, zum Beispiel #3B82F6. Die ersten zwei Stellen stehen für Rot, die mittleren zwei für Grün und die letzten zwei für Blau. HEX ist der Standard in CSS und HTML.
Wie rechne ich RGB in HEX um?
Jeder der drei RGB-Werte (0–255) wird einzeln in eine zweistellige Hexadezimalzahl umgewandelt und aneinandergereiht. Der Farbwähler übernimmt diese Umrechnung automatisch und zeigt beide Werte nebeneinander an.
Wie erstelle ich eine Farbpalette aus einem Foto?
Foto hochladen und auf „Palette extrahieren“ klicken. Das Tool ermittelt automatisch die dominanten Farben im Bild und stellt sie als Farbfelder mit den zugehörigen Codes dar.
Wie prüfe ich den Farbkontrast auf Barrierefreiheit?
Vordergrund- und Hintergrundfarbe im Kontrastprüfer auswählen. Das Tool berechnet das Kontrastverhältnis und zeigt an, ob die WCAG-Stufen AA und AAA für normalen und grossen Text erreicht werden.
Ist der Farbwähler kostenlos und sicher für meine Bilder?
Ja, das Tool ist vollständig gratis. Die gesamte Verarbeitung läuft im Browser: Bilder werden nicht auf einen Server hochgeladen und bleiben ausschliesslich auf Ihrem Gerät.
