Dominante Farben als CSS-Variablen

Laden Sie ein Bild hoch und erzeugen Sie direkt einen Block mit CSS-Variablen (:root {}), der seine dominanten Farben enthält, bereit zum Einfügen in Ihr Stylesheet.

Beispiel:
Ziehen Sie ein Bild hierher oder klicken Sie zum Auswählen (max. 25 MB).

So funktioniert es

Das Tool analysiert die Farbverteilung des Bildes anhand eines Histogramms und behält die häufigsten Farbtöne, geordnet von der dominantesten zur seltensten. Jede Farbe wird anschließend als nummerierte CSS-Variable (--color-1, --color-2 usw.) in einem direkt kopierbaren :root-Block formatiert.

Kann ich die erzeugten Variablen umbenennen?

Ja, der generische Name --color-N ist ein neutraler Ausgangspunkt: Benennen Sie nach dem Einfügen in Ihr Stylesheet jede Variable nach ihrem tatsächlichen Verwendungszweck um (zum Beispiel --color-primary, --color-accent), für besser lesbaren Code.

Wie viele Farben sollte ich extrahieren?

Für ein einfaches Farbkonzept genügen in der Regel 3 bis 5 Farben (eine Hauptfarbe, ein Akzent und ein bis zwei neutrale Töne). Eine höhere Zahl ist sinnvoll, wenn Sie den ganzen Farbreichtum eines Fotos für eine eher dekorative Nutzung erfassen möchten.

100% lokale Verarbeitung: Die Palettenextraktion erfolgt vollständig in Ihrem Browser – Ihr Bild wird niemals an einen Server gesendet.