Kostenloser Farbextraktor für Bilder
Farbpaletten-Extraktor
Der Farbpaletten-Extraktor liest die exakten Farben aus einem Bild und gibt sie als Farbpalette mit HEX-, RGB-, HSL-, OKLCH- und CMYK-Codes aus. Jede Farbe zeigt ihren Anteil am Bild, und das Bild verlässt nie deinen Browser.
- Kostenlos, ohne Anmeldung
- Bilder verlassen nie dein Gerät
- Exakte Pixelfarben
Bilder hier ablegen
oder mit Ctrl+V einfügen. JPG, PNG, WebP, GIF, AVIF, SVG. Bis zu 20 Bilder.
Wie funktioniert der Farbpaletten-Extraktor?
Der Farbpaletten-Extraktor liest die Pixel deines Bildes in deinem Browser, gruppiert ähnliche Farben und gibt die Farben aus, die das Bild am besten beschreiben.
Bild hinzufügen
Lege bis zu 20 Bilder im Format JPG, PNG, WebP, GIF, AVIF oder SVG ab, füge sie ein oder wähle sie aus. Ein eingefügter Screenshot funktioniert ebenfalls.
Farben werden gruppiert
Der Extraktor bündelt die Pixel in OKLab, einem Farbraum, der auf die menschliche Farbwahrnehmung abgestimmt ist, und führt Farben zusammen, die gleich aussehen.
Palette anpassen
Stelle 2 bis 20 Farben ein, wähle einen Modus und klicke ins Bild, um ein beliebiges exaktes Pixel hinzuzufügen. Ziehe eine Markierung, um ihre Farbe neu aufzunehmen.
Kopieren oder exportieren
Kopiere HEX-Codes, prüfe den Kontrast oder exportiere die Palette für CSS, Tailwind, Adobe, Procreate, GIMP und mehr.
Was liefert der Extraktor für jede Farbe?
Jede extrahierte Farbe liefert sieben Farbcodes, den nächstgelegenen Farbnamen, ihren Anteil am Bild, ihren Kontrast zu Weiß und Schwarz sowie eine Skala mit Hell- und Dunkelstufen von 50 bis 950.
| Code | Beispiel | Verwendung |
|---|---|---|
| HEX | #2A9D8F | Webdesign, CSS und die meisten Design-Apps |
| RGB | rgb(42 157 143) | Bildschirme, CSS und Bildbearbeitungsprogramme |
| HSL | hsl(173 58% 39%) | Helligkeit und Sättigung in CSS anpassen |
| HSB | hsb(173, 73%, 62%) | Farbwähler in Photoshop, Figma und Procreate |
| OKLCH | oklch(63% 0.101 183) | Wahrnehmungsbasierte Farbbearbeitung in modernem CSS |
| CIE Lab | lab(58.4 -35.2 -2.3) | Messung von Farbabständen und Druck-Workflows |
| CMYK | 73, 0, 9, 38 | Druckschätzungen ohne Druckerprofil |
Welcher Extraktionsmodus passt zu deinem Bild?
Der Extraktionsmodus bestimmt, welche Farben in die Palette kommen, wenn ein Bild mehr Farben enthält, als die Palette fasst.
| Modus | Was er auswählt | Geeignet für |
|---|---|---|
| Ausgewogen (Standard) | Große Farbflächen plus markante Akzente, bewertet nach Pixelanteil und nach Abstand zu den bereits gewählten Farben | Fotos, Illustrationen und Markenbilder |
| Dominant | Die Farben, die die meisten Pixel abdecken | Messen, welche Farben ein Bild füllen |
| Leuchtend | Die Bewertung von Ausgewogen, gewichtet nach Chroma, sodass gesättigte Akzente höher ranken | Moodboards, Produktfotos und Kunstwerke |
Die Einstellung Exaktes Pixel liefert eine Farbe, die im Bild vorkommt. Die Einstellung Durchschnitt liefert die mittlere Farbe jeder Gruppe. Der Regler Ähnliche zusammenführen legt fest, wie nah zwei Farben beieinanderliegen müssen, um als eine Farbe zu gelten, gemessen als ΔE_OK-Abstand (standardmäßig 0,03).
Wie genau sind die extrahierten Farben?
Extrahierte Farben sind exakte Pixelwerte: Der Extraktor tastet echte Pixel ab, ohne sie zu mischen, daher kommt jeder HEX-Code einer Palette mit der Einstellung Exaktes Pixel in deinem Bild vor.
- Wahrnehmungsbasierte Gruppierung. Farben werden in OKLab verglichen, wo gleiche Abstände wie gleiche Unterschiede aussehen. Der RGB-Abstand überschätzt manche Farbunterschiede und unterschätzt andere.
- Stabile Ergebnisse. Das Clustering nutzt einen festen Seed, daher liefern dasselbe Bild und dieselben Einstellungen immer dieselbe Palette.
- Echte Anteile. Jedes Pixel wird der nächstgelegenen Palettenfarbe zugeordnet, daher ergeben die Anteile zusammen 100 %.
- Transparenz berücksichtigt. Pixel unter 50 % Deckkraft zählen nicht, daher zeigt ein transparentes PNG nur seine sichtbaren Farben.
Der englische Ratgeber How color extraction works vergleicht diese Methode mit Median Cut, Octree-Quantisierung und einfachem k-Means.
Aus welchen Quellen kannst du Farben extrahieren?
Der Farbpaletten-Extraktor liest vier Arten von Quellen, jede mit eigenem Tool und eigenen Einstellungen.
Bilder
Fotos, Illustrationen, Screenshots und Kunstwerke. Mehrere Bilder ergeben eine zusammengeführte Palette, in der jedes Bild gleich zählt.
Logos
Der Logo-Farben-Extraktor liefert exakte Logofarben, entfernt den Hintergrund und ignoriert die gemischten Pixel an den Kanten.
Websites
Der Website-Farben-Extraktor liest das CSS einer Website und liefert ihre Marken-, Text-, Hintergrund- und Rahmenfarben aus einer URL.
Einzelne Pixel
Die Farbpipette für Bilder liefert den exakten HEX-Code jedes angeklickten Pixels, mit einer Lupe für präzises Zielen.
Welche Exportformate kannst du herunterladen?
Der Extraktor exportiert eine Palette in 11 Formaten, alle in deinem Browser erzeugt.
| Format | Datei | Nutzbar in |
|---|---|---|
| CSS-Variablen | .css | Jedes Website-Stylesheet |
| Tailwind v4 und v3 | @theme-Block, tailwind.config.js | Tailwind-CSS-Projekte |
| SCSS | .scss | Sass-Projekte |
| Design Tokens | .tokens.json | W3C-Design-Tokens-Tools und Figma-Plugins |
| Adobe Swatch Exchange | .ase | Photoshop, Illustrator und InDesign |
| Procreate | .swatches | Procreate auf dem iPad |
| GIMP-Palette | .gpl | GIMP, Inkscape und Krita |
| SVG | .svg | Figma, Sketch und Illustrator |
| PNG-Palettenkarte | .png | Präsentationen, Moodboards und Social-Media-Beiträge |
| HEX-Liste | .txt | Jede App |
Die Code-Formate können für jede Farbe eine Skala mit Hell- und Dunkelstufen von 50 bis 950 enthalten, in OKLCH um den extrahierten Wert aufgebaut.
Wer nutzt einen Farbpaletten-Extraktor?
Designer
Erstelle eine Palette aus einem Moodboard-Foto oder einem Referenzbild und übertrage sie als Farbfelder nach Figma, in Adobe-Apps oder nach Procreate.
Entwickler
Wandle einen Design-Screenshot in CSS-Variablen oder ein Tailwind-Theme mit vollständiger Skala aus Hell- und Dunkelstufen um.
Unternehmer
Finde die exakten HEX-Codes eines Logos oder Produktfotos, damit Website, Onlineshop und Social-Media-Beiträge einheitlich bleiben.
Künstler und Illustratoren
Untersuche die Farbanteile eines Gemäldes oder Fotos, bevor du ein neues Werk beginnst.
Druckeinkäufer
Sammle exakte Bildschirmwerte und CMYK-Schätzungen, um eine Druckerei vor dem Proof zu briefen.
Prüfer für Barrierefreiheit
Prüfe jedes Farbpaar einer Palette gegen die Schwellenwerte von WCAG 2. Der englische Ratgeber WCAG contrast in a palette erklärt die Regeln.
Werden deine Bilder hochgeladen?
Nein. Bilder werden in deinem Browser dekodiert und analysiert, und die Dateien erreichen nie einen Server. Die Website speichert keine Bilder und keine Paletten.
Zwei Funktionen kontaktieren den Server: das Laden eines Bildes über eine Webadresse und das Lesen des Codes einer Website. Beide rufen die öffentliche Datei für dich ab und behalten keine Kopie. Die englische Datenschutzerklärung listet alle Daten auf, die die Website verarbeitet.
Häufige Fragen zum Farbpaletten-Extraktor
Ist der Farbpaletten-Extraktor kostenlos?
Ja. Jede Funktion und jedes Exportformat ist kostenlos, ohne Konto, Wasserzeichen oder Nutzungslimit.
Wie viele Farben kann eine Palette haben?
Eine Palette enthält 2 bis 20 Farben, eingestellt mit dem Regler Farben. Die Standardpalette hat 6 Farben.
Warum liefert ein anderes Tool andere Farben?
Tools unterscheiden sich in Farbraum, Clustering-Algorithmus, Abtastung und Farbwert. Dieser Extraktor gruppiert Farben in OKLab und liefert standardmäßig echte Pixelwerte, während viele Tools Farben in RGB mitteln.
Kann ich eine Palette aus mehreren Bildern extrahieren?
Ja. Füge bis zu 20 Bilder hinzu, und der Extraktor erstellt eine zusammengeführte Palette, in der jedes Bild gleich gewichtet ist, plus eine kleine Palette für jedes Bild.
Funktioniert der Extraktor auf dem Smartphone?
Ja. Der Extraktor läuft in mobilen Browsern, akzeptiert Fotos aus der Fotogalerie und nimmt Farben per Tippen auf.
Welche Bildformate werden unterstützt?
JPG-, PNG-, WebP-, GIF-, AVIF-, BMP- und SVG-Dateien funktionieren in allen aktuellen Browsern. HEIC-Fotos öffnen sich nur in Safari, andere Browser brauchen daher eine Kopie als JPG oder PNG.