Die exakte Farbe aus jedem Bild herausgreifen

Lade ein beliebiges JPG, PNG, WebP oder GIF hoch und klicke an eine beliebige Stelle des angezeigten Bildes – der exakte Pixel unter deinem Cursor wird abgetastet und als HEX, RGB und HSL angezeigt, jeweils mit Ein-Klick-Kopierfunktion. Perfekt, um eine Markenfarbe zu treffen, einen Farbton aus einem Foto zu entnehmen oder Akzentfarben aus einem Design-Mockup zu greifen.

Klicken Sie auf ein beliebiges Pixel, und dieses Farbwähler-Tool zeigt dessen HEX-Farbcode (zum Beispiel #FF6B35) zusammen mit RGB und HSL an – dieselben HTML/CSS-Farbcodes, die Sie direkt in ein Stylesheet, ein Design-Token oder ein HTML-Attribut einfügen. Klicken Sie auf „Kopieren“, um den Hex-Code mit einem Klick zu übernehmen.

Das Bild wird auf 320 Pixel an seiner längsten Seite herunterskaliert, dann wird jeder Pixel anhand seiner obersten 4 Bit pro Kanal in Behälter einsortiert. Die am stärksten gefüllten Behälter werden auf volle 8-Bit-Farbe gemittelt, nach Häufigkeit sortiert und als deine Palette zurückgegeben. Das Ergebnis sind typischerweise 5 bis 24 dominante Farben, die das Bild optisch zusammenfassen.

Ja. Die Download-Schaltflächen erzeugen zwei Formate: einen CSS-Variablenblock, der direkt in einen :root-Selektor eingefügt werden kann (--color-1, --color-2…), und eine JSON-Datei mit Hex-, RGB-Komponenten und Gewichtungsprozentsatz für jede Farbe. Beide Formate lassen sich sauber in Design-Tokens, Tailwind-Konfigurationen und Palettenbibliotheken integrieren.

Nein – die Farbauswahl und die Paletten-Extraktion erfolgen vollständig in deinem Browser über die HTML-Canvas-API. Das Bild bleibt auf deinem Gerät, wodurch das Tool sicher für unveröffentlichte Produktfotos, Mockup-Entwürfe und Markenassets unter NDA ist.

Für die Markenidentität sind 5–8 Farben der ideale Bereich – sie erfassen das dominierende Thema, ohne die Akzentwahl zu verwässern. Für Datenvisualisierungen empfehlen wir 10–16 Farben, damit du genügend kategorische Farbtöne hast. Mit dem Schieberegler wählst du zwischen 5 und 24.

Pixel mit einem Alphawert unter 128 werden ignoriert, sodass transparente Hintergründe die Palette nicht mit „Hintergrund“-Farben verunreinigen. Das macht die Bild-Farbpipette besonders gut geeignet für Produktfreisteller, Sticker-Artwork und freigestellte Motive.

HEX (#RRGGBB) ist die kompakteste Form und das, was CSS, Figma und Sketch standardmäßig verwenden. RGB zeigt die drei Komponentenwerte von 0–255 – nützlich beim programmatischen Arbeiten mit Bilddaten. HSL (Farbton, Sättigung, Helligkeit) ist intuitiv zum Anpassen von Farben: Verschiebe den Farbton, um die Farbfamilie zu ändern, passe die Helligkeit für hellere und dunklere Nuancen an.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

Kein Bild nötig. Die Farbauswahl & das Farbrad oben funktionieren eigenständig — ziehen Sie am Sättigungs-/Helligkeitsfeld und am Farbtonregler oder geben Sie einen beliebigen HEX-, RGB- oder HSL-Wert ein, um eine exakte Farbe einzustellen. Ein Bild hochzuladen ist optional und dient nur dazu, Farben per Pipette aus einem Foto aufzunehmen.

Wählen Sie Ihre Grundfarbe, und der Bereich „Farbharmonien“ erstellt sofort komplementäre, analoge, triadische, split-komplementäre, tetradische und monochrome Schemata nach der Farbkreis-Lehre. Klicken Sie auf ein Farbfeld, um dessen HEX-Code zu kopieren.

Stellen Sie im eigenständigen Farbwähler & Farbrad Ihre Farbe ein, und das Panel zeigt ihr Kontrastverhältnis gegenüber reinem Weiß und reinem Schwarz zusammen mit der WCAG-Bewertung – AAA, AA, AA Large oder Fail. Nutzen Sie dies, bevor Sie eine Text- oder Schaltflächenfarbe festlegen, damit sie lesbar bleibt und die WCAG-2.1-Barrierefreiheitsrichtlinien erfüllt.

Ja. Der eigenständige Farbwähler & Farbkreis zeigt neben dem HEX-, RGB- oder HSL-Wert, den du eingestellt hast, die am besten passende benannte CSS-Farbe an, was praktisch ist, um einen Farbton in einem Briefing, Ticket oder Design-Spec schnell zu beschreiben, ohne zu raten.

Klicke auf Random in Color Picker & Wheel, um zu einer neuen Farbe zu springen, und nutze dann das Panel Color harmonies darunter, um komplementäre, analoge, triadische und andere abgestimmte Paletten zu dieser Farbe zu sehen — ein schneller Weg zu einem Ausgangspunkt, wenn du von Grund auf gestaltest, statt eine bestehende Abbildung auszulesen.

Nutze das Dropdown „Größe“ über der Palette, um 5, 8, 10, 16 oder 24 dominante Farben zu wählen – die Palette berechnet sich beim Ändern sofort neu. Kombiniere eine kleine Größe wie 5 für eine saubere Markenpalette mit der Farbpipette, um ein oder zwei exakte Akzenttöne zu greifen, die die automatische Extraktion womöglich wegmittelt.

Ja – der eigenständige Farbwähler & Farbkreis zeigt direkt unter dem Farbfeld das Kontrastverhältnis Ihrer aktuellen Farbe gegen reines Weiß und reines Schwarz an, beschriftet mit AAA, AA, AA Large oder Fail gemäß den WCAG-Schwellenwerten (7:1, 4.5:1, 3:1). Nutzen Sie es, um zu prüfen, ob eine Text-/Hintergrund-Kombination die Barrierefreiheitsstandards erfüllt, bevor Sie eine Designfarbe festlegen.

Die Farbauswahl und das Farbrad ordnen jede von Ihnen eingestellte Farbe — über die Auswahl, das HEX-Feld oder die RGB/HSL-Felder — automatisch ihrem nächstgelegenen Standard-CSS-Farbnamen zu, angezeigt als „Nächstliegender Name“ neben dem Farbfeld. Das ist ein schneller Weg, eine Farbe verbal zu beschreiben oder ihr nächstes web-sicheres Äquivalent zu finden.

Ja – jeder Klick oder Fingertipp auf das hochgeladene Bild fügt Ihrer Liste „Ausgewählte Farben“ ein neues Farbfeld hinzu, statt das letzte zu ersetzen, sodass Sie eine eigene Sammlung exakter Pixelfarben aus verschiedenen Bildbereichen aufbauen können. Entfernen Sie ein einzelnes Farbfeld mit seiner ×-Schaltfläche oder leeren Sie die ganze Liste mit „Auswahl löschen“.

Ja – die Schaltfläche „Zufall“ (Shuffle-Symbol) im Farbwähler & Farbkreis springt mit einem Klick zu einer neuen Kombination aus Farbton, Sättigung und Helligkeit, nützlich, um eine kreative Blockade zu lösen oder eine Palette zu erkunden, die Sie nicht manuell eingegeben hätten. HEX, RGB, HSL und die Harmonie-Farbfelder darunter aktualisieren sich alle gemeinsam.

Auf einem Touchscreen ziehen Sie Ihren Finger über das Bild, um die Farbe darunter in einer schwebenden Live-Farbprobe vorab zu sehen, und heben dann den Finger, um genau dieses Pixel Ihrer Liste „Ausgewählte Farben“ hinzuzufügen — kein separates Bestätigungs-Tippen nötig. Dasselbe Dropdown für die Palettengröße und dieselben Export-Knöpfe funktionieren auf dem Mobilgerät identisch.

Ja. Der Farbkreis oben auf der Seite hat eine Zufalls-Schaltfläche, die zu einer zufälligen Farbe springt und sofort deren HEX-, RGB- und HSL-Codes, den nächstliegenden benannten Farbton, Kontrastverhältnisse auf Weiß und Schwarz sowie vollständige Harmonie-Sets anzeigt — komplementär, analog, triadisch, split-komplementär, tetradisch und monochrom. Das ist eine schnelle Möglichkeit, Ausgangspunkte für eine Palette zu entdecken.

Dieses Tool entnimmt Farben aus einem hochgeladenen Bild oder dem integrierten Farbrad, statt deinen Bildschirm live auszulesen. Der schnellste Workaround für eine Bildschirm-Farbpipette: Mach einen Screenshot, lade ihn auf die Seite und klicke genau auf den gewünschten Pixel – du erhältst dieselben HEX-, RGB- und HSL-Codes, ganz ohne Erweiterung zu installieren, und der Screenshot verlässt nie deinen Browser.