Welche Farben dominieren dieses Bild? (Palette aus Bild)
Lade ein Foto / Screenshot / Mockup hoch - das Tool zieht 4-12 dominante Farben heraus per k-means-Clustering mit k++-Initialisierung (intelligenter als rein zufällig).
Jede Farbe zeigt ihren Pixelanteil. Exportiere als CSS-Variablen, Tailwind-Config, JSON.
Alles lokal - dein Bild verlässt den Browser nie.
Perfekt für Brand-Audits, Design-Referenzen, Mood Boards.
So nutzt du das Tool
- Lade ein Bild hoch - PNG, JPG, WebP, AVIF, HEIC. Die Datei wird auf max. 200×200 Pixel herunterskaliert (damit k-means in ~50ms statt 5s auf einem 4K-Bild läuft).
- Wähl eine Farbzahl: 4 (nur die Dominantesten), 6 (ausgewogen), 8 (detailliert), 10 oder 12 (komplementär).
- Die obere Leiste zeigt die Palette proportional - breiterer Swatch = mehr Pixel. Klick zum HEX-Kopieren.
- Die "Details"-Tabelle zeigt jede Farbe in 4 Formaten (HEX, RGB, HSL, OKLCH).
- Drei Export-Blöcke: CSS-Variablen (in `:root` einsetzen), Tailwind-Config (in `theme.extend.colors`), JSON (für anderes Tooling).
Wann das hilfreich ist
Wo sich der Paletten-Extraktor lohnt - typische Szenarien:
- Brand-Audit - Logo / Mockup hochladen, prüfen, ob deine Farben konsistent sind.
- Design-Inspiration - ein schönes Sonnenuntergangs-Foto → 6-Farben-Palette für eine Landingpage.
- Reverse-Engineering - du willst die Palette von jemand anderem nachbauen - Screenshot → extrahieren.
- Mood Board - sammle Pinterest-Bilder, zieh einen gemeinsamen Farb-Vibe heraus.
- Webdesign - ein Produktfoto als "Ankerfarbe" für die gesamte Seite.
- Print-Design - aus Fotografie extrahieren für Papier / Verpackung.
- Schulung - merk dir, wie ein "weiß-blaues Foto" tatsächlich 30% Grau, 25% Blau, 20% Weiß enthält - wahrnehmungsmäßig anders, als es wirkt.
Fragen und Antworten
K-means = Clustering-Algorithmus - teilt Punkte (hier: Pixelfarben) in K Gruppen, sodass jeder Punkt nah an seinem Zentrum liegt. k++-Initialisierung (David Arthur 2007) wählt die Startzentren abstandsgewichtet - besser als rein zufällig. 10 k-means-Iterationen liefern eine stabile Palette (mehr ändern selten Sichtbares).