Farbauswahl aus Bild – Holen Sie sich HEX- und RGB-Farbcodes

Laden Sie beliebige JPG-, PNG-, WebP- oder GIF-Dateien hoch und klicken Sie auf eine beliebige Stelle auf dem angezeigten Bild. Der exakte Pixel unter Ihrem Cursor wird abgetastet und als HEX, RGB und HSL angezeigt, wobei jedes Format mit einem Klick kopiert werden kann. Nützlich zum Anpassen einer Markenfarbe, zum Ausprobieren eines Musters von einem Foto oder zum Erfassen von Akzenttönen aus einem Designmodell.

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.

Ja. Es läuft im Browser und benötigt kein Konto. Sie müssen nichts installieren und die Anzahl der zu prüfenden Paletten ist unbegrenzt.

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.

Ja – Pixoate unterstützt die Stapel- und Massenverarbeitung. Wechseln Sie in den Stapelmodus, fügen Sie bis zu 60 Bilder bei Premium oder 200 bei Pro hinzu, legen Sie Ihre Optionen einmal fest und jedes Bild wird mit den gleichen Einstellungen verarbeitet, bevor Sie eine Tabelle herunterladen – eine Palettenzeile pro Bild. Die Massenverarbeitung ist eine Premium-Funktion; Die Ausgabe verwendet die gleiche Qualität und die gleichen Einstellungen wie im Einzelmodus.

Ja – bei der Massenverarbeitung konfigurieren Sie die Einstellungen einmalig und sie gelten für jedes Element im Stapel – bis zu 60 Bilder bei Premium oder 200 bei Pro. Es ist nicht erforderlich, die Einrichtung für jedes Element zu wiederholen, und die Palettenextraktion wird in Ihrem Browser ausgeführt. Nur die fertige Tabelle wird zum Herunterladen gespeichert.

Fast immer liegt es an einem von drei Gründen: Die Datei überschreitet das kostenlose Upload-Limit von 11 MB – Premium akzeptiert 50 MB und Pro 120 MB. Das Format wird von diesem Werkzeug nicht unterstützt; prüfen Sie daher die Liste im Upload-Bereich. Oder die Datei entspricht tatsächlich nicht dem Format ihrer Dateiendung: Durch Umbenennen ändert sich der Dateiinhalt nicht. Deshalb kann ein scheinbar gültiges Bild abgelehnt werden.

Es gibt an, was tatsächlich in der Datei enthalten ist. Ein leeres oder überraschendes Ergebnis bedeutet also in der Regel, dass die Daten nie vorhanden waren – von der App, die sie zuletzt gespeichert hat, entfernt, von einer Plattform beim Hochladen entfernt oder im Original nicht vorhanden waren. Probieren Sie die unberührte Originaldatei direkt von der Kamera oder Quelle aus und nicht eine Kopie, die über eine Messaging-App gesendet wurde.

Nein. Sie können Color Picker ausführen und das kostenlose Ergebnis ohne Konto herunterladen, und es trägt kein Wasserzeichen. Premium ist das, was Sie kaufen, wenn die Grenzen zu greifen beginnen: bis zu 60 Dateien in einem Stapel, größere Uploads, keine tägliche Obergrenze und das Ergebnis in Originalauflösung. Beim Download-Schritt wird nichts angezeigt, was vor dem Start nicht sichtbar war.

Nein – Color Picker läuft im Browser auf Desktop und Smartphone. Sie müssen nichts installieren, keine Testversion starten und keine Lizenz kaufen, bevor Sie prüfen können, ob das Tool Ihre Aufgabe löst. Verwenden Sie dafür Ihre eigene Datei statt eines Beispiels.