Tada File

Farbpaletten-Generator

Extrahiere die Hauptfarben eines Bildes als Palette und kopiere sie als HEX-Codes, CSS-Variablen oder JSON.

Der Farbpaletten-Generator findet die dominanten Farben in einem Foto oder Design und zeigt sie als Farbfelder an. Du kannst 3, 4, 5, 6 oder 8 Farben wählen. Sie sind nach der Fläche sortiert, die sie abdecken, und sehr ähnliche Töne werden zusammengefasst, damit jedes Farbfeld eigenständig ist. Kopiere die Palette als CSS-Variablen oder JSON-Array oder lade sie als PNG-Farbtafel herunter.

Anleitung: Farbpaletten-Generator

  1. 1

    Bild öffnen

    Zieh ein Foto, eine Illustration, ein Logo oder einen Screenshot hierher, wähle es aus oder füge es ein.

  2. 2

    Anzahl der Farben wählen

    Klicke auf 3, 4, 5, 6 oder 8. Die Farbfelder aktualisieren sich sofort.

  3. 3

    Einzelne Farben kopieren

    Klicke auf das Kopiersymbol eines Farbfelds, um seinen HEX-Code zu kopieren.

  4. 4

    Palette exportieren

    Nutze „CSS-Variablen kopieren“ oder „JSON kopieren“ oder lade die Palette als PNG-Farbtafel herunter.

Funktionen

Nach Fläche sortiert
Das erste Farbfeld ist die Farbe, die den größten Teil des Bildes abdeckt.
Klar unterscheidbare Töne
Fast identische Farben werden zusammengefasst, damit die Palette denselben Ton nicht wiederholt.
Bereit für Entwickler
Exportiere als CSS Custom Properties (--color-1, --color-2 und so weiter) oder als JSON-Array mit HEX-Codes.
PNG-Farbtafel
Lade ein Bild der Palette herunter, bei dem unter jedem Farbfeld der HEX-Code steht.

Fragen

Wie werden die Farben der Palette ausgewählt?

Das Bild wird in kleiner Größe abgetastet, ähnliche Farben werden gruppiert, und die Gruppen mit der größten Fläche werden zuerst angezeigt. Transparente Pixel werden ignoriert.

Warum bekomme ich weniger Farben, als ich gewählt habe?

Sehr ähnliche Töne werden zusammengefasst, damit sich jedes Farbfeld klar unterscheidet. Ein Bild mit nur wenigen verschiedenen Farben liefert daher eventuell weniger Farbfelder.

Wie nutze ich die Palette in CSS?

Klicke auf „CSS-Variablen kopieren“, um einen :root-Block mit den Variablen --color-1, --color-2 und so weiter zu erhalten, und füge ihn in dein Stylesheet ein.

Warum fehlt eine kleine Akzentfarbe?

Die Palette bevorzugt Farben, die eine größere Fläche abdecken. Ein winziges Detail wie ein kleines Logo taucht daher eventuell nicht auf. Nutze den Farbwähler für Bilder, um den exakten Wert einer bestimmten Stelle zu erhalten.