Bild-Tools

Farbpaletten-Extraktor

Bild ablegen und seine dominanten Farben mit HEX-, RGB- und HSL-Werten extrahieren — sofort kopierbereit.

Bild hier ablegen oder klicken zum Auswählen

Bild hier ablegen oder klicken zum Auswählen PNG, JPG, WebP oder GIF

Verarbeitung komplett im Browser — kein Upload, kein Tracking.

Wie viele Farben

4 6 8 12

Palette

Was dieses Tool macht

Designer klauen ständig Farbpaletten aus der Welt — einen Sonnenuntergang, ein Poster, ein Filmstill, einen Screenshot der App von jemandem. Dieses Tool automatisiert das. Lass ein beliebiges Bild fallen und bekomme seine dominanten Farben als Set von Swatches zurück, jeweils mit HEX-, RGB- und HSL-Werten beschriftet, die du mit einem Klick kopieren kannst. Wähle 4 Swatches für eine kompakte Brand-Style-Palette, 6 für eine flexible UI-Palette, 8 für ein Illustrations-Set oder 12, um Nuancen in Fotografien einzufangen. Über das Kopieren einzelner Swatches hinaus kannst du die gesamte Palette in drei Formaten exportieren: CSS-Variablen, fertig zum Einfügen in :root, ein Tailwind-Config-Snippet für deine tailwind.config.js oder JSON mit HEX/RGB/HSL für jedes andere Tool. Das Bild verlässt deinen Browser nie. Wir verkleinern es auf ein kleines Canvas, lesen jedes Pixel ab und gruppieren ähnliche Farben — alles lokal. Das heißt, du kannst Paletten aus internen Mockups, NDA-geschützten Brand-Assets oder privaten Fotos extrahieren, ohne Datenschutz-Risiko. Kein Upload, kein Tracking, keine temporäre Kopie irgendwo auf einem Server.

So funktioniert es

Bild ablegen — Jedes gängige Format funktioniert — PNG, JPG, WebP, GIF. Die Qualität der Palette ist am besten bei Bildern mit klar abgegrenzten Farbflächen; sehr verrauschte oder körnige Bilder können matschige Swatches erzeugen.
Anzahl wählen — 4 für eine knackige Brand-Style-Palette. 6 ist der Sweet Spot für UI. 8–12 fangen feinere Schattierungen ein, nützlich als Illustrations-Referenz.
Einzelne Swatches kopieren — Klicke einen Swatch an, um seinen HEX-Wert in die Zwischenablage zu kopieren. Der Chip blinkt „Kopiert!“ als Bestätigung.
Gesamte Palette exportieren — Nutze die Buttons unten, um die Palette als CSS-Variablen, Tailwind-colors-Objekt oder JSON zu kopieren. Direkt in dein Projekt einfügen.

So funktioniert die Extraktion

Wir skalieren das Bild auf ein 200×200-Canvas (das gesamte Bild wird abgetastet, nicht nur die Ecken) und lesen jedes Pixel über getImageData aus. Der RGB-Wert jedes Pixels wird auf das nächste Vielfache von 32 abgerundet, was 512 mögliche Buckets ergibt (8×8×8). Die Buckets werden gezählt, nach Häufigkeit sortiert, und wir gehen die Liste durch und nehmen die häufigsten Farben, die nicht zu nah an einer schon gewählten liegen (euklidischer Abstand ≥ 38 im RGB-Raum), damit die Palette visuell abwechslungsreich bleibt. Der angezeigte Swatch ist der RGB-Mittelwert aller Pixel im jeweiligen Bucket, nicht der gerundete Bucket-Repräsentant — das liefert etwas genauere Farben. Vollständig transparente und nahezu transparente Pixel werden ausgeschlossen.

Die richtige Anzahl wählen

4 Farben funktioniert für Logos und minimalistische Brand-Identities — zwingt zu strenger Hierarchie. 6 Farben ist das, worauf die meisten Design-Systeme landen: 1–2 Brand-Farben, 1 Akzent, Neutraltöne. 8 Farben geben dir sekundäre Akzente und mittlere Neutraltöne. 12 Farben sind für Illustrations- und Fotografie-Referenzen, wenn du subtile Abstufungen einfangen willst. Über 12 hinaus wird die Palette unruhig und schwer als Design-Constraint zu nutzen.

Häufig gestellte Fragen

Warum unterscheiden sich meine Palettenfarben leicht von einer Photoshop-Pipette?

Wir mitteln die Farben innerhalb eines Buckets, daher entspricht ein Swatch unter Umständen keinem einzelnen Pixel exakt — er repräsentiert den Mittelwert des Clusters. Das ist meist näher an der wahrgenommenen Dominanzfarbe als das willkürliche Picken eines einzelnen Pixels.

Funktioniert der Algorithmus wie K-Means?

Es ist ein einfacherer Frequenz-Bucketing-Ansatz. K-Means erzeugt für knifflige Bilder marginal bessere Cluster, ist aber deutlich langsamer und bringt eine Abhängigkeit mit. Für 95 % der Eingaben liefert die Bucket-Methode in unter 50 ms gleichermaßen brauchbare Paletten.

Warum fehlen manche Farben, die ich erwartet hatte?

Kleine Farbtupfer gehen in der Hintergrunddominanz unter. Wenn eine Farbe weniger als ~1–2 % des Bildes einnimmt, schafft sie es wahrscheinlich nicht in die Palette, sofern du die Anzahl nicht erhöhst. Schneide das Bild für bessere Ergebnisse auf den Bereich zu, der dich interessiert.

Werden die Bilder hochgeladen?

Nein. Alles passiert in deinem Browser. Die einzigen Netzwerkaufrufe dieser Seite betreffen ihre eigenen Assets.

Kann ich Paletten aus Bildern auf einer Webseite extrahieren?

Speichere oder schieße zuerst einen Screenshot des Bildes und lege es dann hier ab. Wir holen keine URLs ab, weil das entweder einen CORS-Proxy oder einen Server bräuchte — und wir bleiben strikt clientseitig.

Warum verwendet der Tailwind-Export brand-1, brand-2?

Generische Namen, die du an dein Projekt anpassen kannst. Füge das Snippet unter theme.extend.colors in deine tailwind.config.js ein und benenne die Keys dann nach dem, wie deine Design-Tokens heißen.

Farbpaletten-Extraktor