Farbpaletten-Extraktor

Eine Farbpalette aus einem Bild ziehen, den Kontrast zweier Farben prüfen und als CSS oder Tailwind exportieren — direkt im Browser.

Über Farbpaletten-Extraktor

Was es ist

Dieses Tool findet die Hauptfarben eines Bildes — Foto, Logo, Screenshot — und zeigt sie als Palette mit der dominanten Farbe zuerst. Füge eigene Farben mit der Pipette direkt aus dem Bild hinzu, vergleiche zwei beliebige Farben auf WCAG-Kontrast und exportiere die Palette als CSS-Variablen, Tailwind-Konfiguration oder JSON.

Hauptfunktionen

  • Eine Palette der Hauptfarben eines PNG-, JPEG- oder WebP-Bildes, die dominante zuerst.
  • Die Anzahl der Farben nach deiner Wahl.
  • Eigene Farben, mit der Pipette aus dem Bild entnommen.
  • Eine WCAG-Kontrastprüfung für zwei beliebige Farben, für normalen und großen Text.
  • Export als CSS-Variablen, Tailwind oder JSON; jede Farbe als HEX oder RGB kopieren.

So funktioniert es

  1. Zieh ein Bild auf die Fläche, klick sie an, um eines zu wählen, oder klick auf „Beispiel“.
  2. Leg die Anzahl der Farben fest.
  3. Entnimm bei Bedarf weitere Farben aus dem Bild und markiere zwei Farben für den Kontrastvergleich.
  4. Kopiere einzelne Farben oder exportiere die ganze Palette.

Wann es hilft

  • Ein Website-Farbschema aus einem Markenfoto oder Logo aufbauen.
  • Prüfen, ob Text in deinen Farben lesbar ist, bevor du sie einsetzt.
  • Genaue Farbcodes aus einem Screenshot eines Designs holen.

Datenschutz und Grenzen

Deine Daten

Dein Bild wird im Browser verarbeitet und nicht auf einen Server hochgeladen — die Website erhält nur ein anonymes Ereignis „Tool geöffnet“, ohne Inhalt. Ein Ergebnis, das du an ein anderes Tool schickst, bleibt 24 Stunden auf diesem Gerät unter „Letzte Aktivität“.

Grenzen

  • Vollständig transparente Pixel werden ignoriert; ein Bild ohne sichtbare Farbe ergibt keine Palette.
  • Die Palette zeigt die Hauptfarbgruppen, nicht jeden einzelnen Farbton im Bild.

Häufige Fragen

Wie werden die Farben gewählt?

Ähnliche Farben des Bildes werden gruppiert, und jede Gruppe ergibt eine Farbe der Palette. Die Gruppe mit der größten Fläche ist die dominante Farbe.

Was bedeuten AA und AAA bei der Kontrastprüfung?

Das sind WCAG-Barrierefreiheitsstufen. AA verlangt mindestens 4,5:1 für normalen und 3:1 für großen Text, AAA 7:1 und 4,5:1.

Welches Exportformat soll ich wählen?

CSS-Variablen für reines CSS, Tailwind für eine Tailwind-Konfiguration, JSON für Design-Tools oder eigene Skripte.