Wozu dient die Toleranz-Einstellung im Alle-Farben-Modus?

Die Toleranz steuert, wie aggressiv ahnliche Farben zusammengefuhrt werden. Bei 0 werden nur exakte RGB-Ubereinstimmungen gruppiert — dies kann bei einem Foto Hunderte einzigartiger Farben erzeugen. Eine erhohte Toleranz fugt visuell ahnliche Farben zu einem einzigen reprasentativen Farbmuster zusammen. Ein Wert von 10-20 funktioniert gut fur Fotos; 0-5 ist am besten fur Logos und Grafiken mit flachen Farben. Der Algorithmus verwendet den euklidischen Abstand im RGB-Farbraum zur Bestimmung der Ahnlichkeit.

Kann ich dies fur Webdesign und Branding verwenden?

Ja. Verwenden Sie die Pixel-Pipette, um exakte Markenfarben aus einem Logo zu extrahieren. Verwenden Sie den Alle-Farben-Modus, um eine vollstandige Farbpalette aus einem Referenzbild, Moodboard oder Konkurrenz-Screenshot zu rekonstruieren. Kopieren Sie die HEX-Codes direkt in Ihr CSS: color: #3B82F6; Alle Vorgange laufen lokal — Ihre Bilder werden niemals auf einen Server hochgeladen.

Bild-Farbpipette & Paletten-Extraktor | Alle Farben in Bildern finden

🎨
Ziehen Sie ein Bild hierher

So wahlen Sie Farben aus Bildern aus und extrahieren sie

Laden Sie Ihr Bild hoch

Ziehen Sie eine beliebige Bilddatei per Drag-and-Drop. Das Bild wird in voller Auflosung fur genaue Farbabtastung auf Pixelebene geladen.

Auswahlen oder Extrahieren

Pixel-Pipette: Mit der Lupe daruberfahren und klicken zum Auswahlen. Alle Farben: Auf Extrahieren klicken, um jede einzigartige Farbe aufzulisten.

Farbwerte anzeigen

Farben werden in HEX, RGB und HSL mit Kopier-Buttons angezeigt. Das Alle-Farben-Raster zeigt jede Farbe als Farbmuster.

Kopieren & uberall verwenden

Farbcodes in die Zwischenablage kopieren. In CSS, Figma, Markenrichtlinien oder jedes Design-Tool einfugen.

Haufig gestellte Fragen

Wie finde ich die exakte Farbe eines Pixels in einem Bild?

Laden Sie Ihr Bild hoch und verwenden Sie den Pixel-Pipette-Modus. Fahren Sie uber einen beliebigen Bereich — die kreisformige Lupenlinse zeigt eine 10-fache Vergrosserung zentriert auf Ihrem Cursor fur prazise Pixel-Erfassung. Die ausgewahlte Farbe erscheint sofort in HEX, RGB und HSL. Klicken Sie, um sie in Ihrer Paletten-Chronik zu speichern. Die Canvas-API liest rohe Pixeldaten in der nativen Auflosung des Bildes.

Wie extrahiere ich ALLE Farben aus einem Bild?

Wechseln Sie zum Alle Farben-Tab und klicken Sie auf Alle Farben extrahieren. Das Tool tastet jeden Pixel in Ihrem Bild ab (skaliert fur Leistung), entfernt doppelte identische Farben und zeigt sie als Farbmuster-Raster sortiert nach Haufigkeit an — haufigste Farben zuerst. Verwenden Sie den Ahnliche zusammenfuhren-Schieberegler, um nahezu identische Farbtone zu gruppieren. Ideal zum Erstellen einer vollstandigen Farbpalette aus einem Referenzbild, Moodboard oder Screenshot.

Was bewirkt die Einstellung Ahnliche zusammenfuhren?

Die Toleranz steuert, wie aggressiv ahnliche Farben gruppiert werden. Bei 0 werden nur exakte RGB-Ubereinstimmungen zusammengefuhrt — ein Foto kann uber 500 einzigartige Farben erzeugen. Bei 20-40 werden visuell ahnliche Farbtone (z. B. leicht unterschiedliche Pixel in einem Farbverlauf oder JPEG-Artefakte) zu einem reprasentativen Farbmuster zusammengefuhrt. Der Algorithmus verwendet den euklidischen Abstand im RGB-Raum: sqrt((r1-r2)² + (g1-g2)² + (b1-b2)²). Werte unter 8 eignen sich gut fur Logos und flache Grafiken; 16-32 ist besser fur Fotos.

Was sind HEX-, RGB- und HSL-Farbformate?

HEX (#3B82F6) — Standard-CSS-/Web-Format. RGB (59, 130, 246) — Rot-, Grun-, Blau-Kanale 0-255, verwendet in Design-Software und Programmierung. HSL (217°, 91 %, 60 %) — Farbwinkel, Sattigung und Helligkeit; intuitiver zum Erstellen von Farbvariationen. Alle drei beschreiben dieselbe Farbe — nur unterschiedliche Notationen fur verschiedene Anwendungsfalle.

Kann ich extrahierte Farben in CSS oder Design-Tools verwenden?

Ja. Klicken Sie auf einen beliebigen Kopieren-Button (Pixel-Pipette) oder klicken Sie auf ein Farbmuster (Alle Farben), um den HEX-Code in Ihre Zwischenablage zu kopieren. Fugen Sie ihn direkt in CSS ein: color: #3B82F6;. Verwenden Sie RGB-Werte in Design-Tools wie Figma, Sketch oder Adobe XD. Verwenden Sie HSL, um programmatisch hellere/dunklere Variationen zu generieren. Alle Vorgange laufen lokal — Ihre Bilder werden niemals auf einen Server hochgeladen.

Bild-Farbpipette & Paletten-Extraktor — Zwei Tools in einem

Unser Tool kombiniert eine pixelgenaue Farbpipette mit einem Vollbild-Paletten-Extraktor. Die Pixel-Pipette bietet eine Lupenlinse (10-fache Vergrosserung), um einzelne Pixel zu erfassen und exakte HEX-, RGB- und HSL-Werte zu erhalten — ideal zum Abtasten einer bestimmten Farbe aus einem Logo, UI-Mockup oder Foto. Der Alle-Farben-Modus extrahiert jede einzigartige Farbe aus dem gesamten Bild und zeigt sie als sortierbares Farbmuster-Raster an, sortiert nach der Haufigkeit jeder Farbe. Zusammen decken sie den gesamten Workflow der Farbextraktion ab: von chirurgisch praziser Einzelpixel-Abtastung bis zur umfassenden Paletten-Entdeckung.

Pixel-Pipette-Modus — Chirurgische Farbpraezision

Die Pixel-Pipette liest den exakten RGB-Wert des Pixels unter Ihrem Cursor mit der HTML5-Canvas-API-Methode getImageData(). Die kreisformige Lupe zeigt einen 11x11-Pixel-Bereich bei 10-facher Vergrosserung mit einem Fadenkreuz-Overlay, sodass Sie den gewunschten Pixel exakt anvisieren konnen — selbst bei hochauflosenden Bildern, bei denen Pixel mit blossem Auge nicht sichtbar sind. Jede ausgewahlte Farbe wird gleichzeitig in drei Formaten angezeigt:

HEX — Der 6-stellige hexadezimale Code (z. B. #3B82F6). Standard fur CSS, HTML und Webentwicklung.
RGB — Rot-, Grun-, Blau-Werte von 0-255. Verwendet in Grafikdesign-Tools und wenn Sie kanalgenaue Praezision benotigen.
HSL — Farbton (0-360°), Sattigung (0-100 %), Helligkeit (0-100 %). Das intuitivste Format zum Erstellen von Tonungen, Schattierungen und Farbharmonien.

Klicken Sie auf eine Farbe, um sie in Ihrer Paletten-Chronik zu speichern (bis zu 12 Farben). Verwenden Sie den Palette generieren-Button, um automatisch die 5 dominantesten Farben per Haufigkeitsanalyse zu extrahieren — ein schneller Weg, um das Hauptfarbschema eines Bildes zu erhalten.

Alle-Farben-Modus — Vollstandige Paletten-Extraktion

Wahrend die Pixel-Pipette bei der Abtastung einzelner Punkte glanzt, beantwortet der Alle Farben-Tab die Frage: „Welche Farben sind tatsachlich in diesem Bild?" Er tastet systematisch jeden Pixel ab (bei reduzierter Auflosung fur Leistung — typischerweise 150x150 Pixel oder 22.500 Abtastungen), entfernt doppelte identische Farben und prasentiert die Ergebnisse als Raster von Farbmustern mit HEX-Codes. Die Farben sind nach Haufigkeit sortiert — die haufigsten Farben erscheinen zuerst.

Der Ahnliche zusammenfuhren-Schieberegler ist die entscheidende Steuerung. Ohne ihn konnte ein Foto Hunderte visuell nicht unterscheidbarer Farben aufgrund von JPEG-Kompressionsartefakten, subtilen Farbverlaufen und Sensorrauschen erzeugen. Eine Erhohung der Toleranz fuhrt Farben zusammen, deren euklidischer Abstand im RGB-Raum unter dem Schwellenwert liegt. Dies liefert eine saubere, nutzbare Palette statt einer uberwaltigenden Liste. Fur Logos und flache Farbgrafiken halten Sie die Toleranz bei 0-5. Fur Fotos liefern 16-32 in der Regel die besten Ergebnisse.

Wann Sie welchen Modus verwenden sollten

Pixel-Pipette: Extrahieren einer Markenfarbe aus einer Logo-Datei, Abtasten eines bestimmten UI-Elements aus einem Screenshot, Ermitteln des exakten Hauttons aus einem Portrat, Anpassen der Textfarbe an den Hintergrund eines Hero-Bildes.
Alle Farben: Erstellen einer vollstandigen Farbpalette aus einem Moodboard oder Referenzbild, Rekonstruieren des Farbschemas einer Konkurrenz-Website, Analysieren der Farbzusammensetzung Ihrer eigenen Design-Arbeit, Erstellen eines Marken-Farbsystems aus einem Key Visual.
Beide zusammen: Verwenden Sie Alle Farben, um die Palette zu entdecken, und wechseln Sie dann zur Pixel-Pipette, um bestimmte Farbwerte in voller Auflosung zu uberprufen.

Datenschutz & Verarbeitung

Alle Bildverarbeitung erfolgt vollstandig in Ihrem Browser mit der Canvas-API. Ihre Bilder werden niemals auf einen Server hochgeladen — die Datei bleibt auf Ihrem Gerat. Das Tool liest Pixeldaten lokal, fuhrt alle Berechnungen in JavaScript aus und zeigt die Ergebnisse sofort an. Keine Konten, keine Cloud-Verarbeitung, keine Datenerfassung. Sie konnen es offline verwenden, sobald die Seite geladen ist.