Welche Bildformate werden vom Tool unterstützt?

Sie können Bilder in den Formaten PNG, JPEG, WebP, GIF und AVIF hochladen.

Wie funktioniert die k-Means-Farbeextraktion?

Der Algorithmus analysiert die Pixel des Bildes, gruppiert ähnliche Farbwerte und ermittelt die mathematisch dominantesten Farbtöne.

Kann ich die generierten Farben direkt in Tailwind CSS nutzen?

Ja, wählen Sie einfach das Ausgabeformat 'Tailwind-Konfig (JS)', um ein passendes Konfigurationsobjekt für Ihre tailwind.config.js zu erhalten.

Was bewirkt die Option 'Farbskala'?

Sie generiert automatisch hellere und dunklere Abstufungen der extrahierten Farben, indem die Helligkeit bei nahezu konstantem Farbton variiert wird.

Was ist der Unterschied zwischen numerischer und semantischer Benennung?

Numerisch benennt die Tokens fortlaufend (z. B. color1, color2), während semantisch Bezeichner wie primary oder accent verwendet.

Elysia Tools

Mobile Navigation

Design

Bild-Palette zu Design-Tokens

Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala

Einzelheiten

Wobei dieses Tool hilft

Lade ein Bild hoch und das Tool:

Verkleinert es und wendet k-Means an, um die dominanten Farben zu finden (3 / 5 / 8 / 12 wählbar).
Benennt jede Farbe (numerisch color1… oder semantisch primary/accent…) mit Pixel-Anteil %.
Erzeugt optional eine Farbskala (Tailwind 50–950 oder Material 100–900), indem Farbton und Sättigung grob konstant bleiben und die Helligkeit variiert.
Serialisiert das Ergebnis in CSS-Variablen, SCSS, Tailwind-Config, JSON-Tokens oder alle zusammen.

Wähle ein Präfix und einen Namensstil, kopiere den erzeugten Code — dein Design-System nutzt die Palette sofort.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

1 Beispiele

5-Farben-Palette mit Tailwind-Skala extrahieren

Bild hochladen, 5 Farben extrahieren, 50–950-Skala erzeugen und als CSS-Variablen mit Präfix brand exportieren.

<div>5 swatches with population %, a base+scale preview row each, and a :root{} CSS-variables block ready to paste.</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

6 Optionen

DateienQuelldateien für diesen Workflow hochladen.1

QuellbildfilePflicht

Maximale Größe pro Datei: 10 MBUnterstützte Typen: image/png, image/jpeg, image/webp, image/gif, image/avif

InhaltHaupteingaben einfügen oder eingeben.1

Token-PräfixtextOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.4

PalettengrößeselectOptionales FeldFarbskalaselectOptionales FeldAusgabeformatselectOptionales FeldNamensstilselectOptionales Feld

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

Bild-Palette zu Design-Tokens

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Markenfarben aus Logo extrahieren

2. Tailwind-Farbpalette aus Moodboard erstellen

FAQ

Web Python Bildverarbeitung Beispiele

Web TypeScript Bildverarbeitungsbeispiele

Android Java Bildverarbeitungsbeispiele

Android Kotlin Bildverarbeitungsbeispiele

Data-URI-Generator

Batch-Bildkonvertierung

Batch-Bild-Zuschneiden

Bild-Größenanpasser

Tools fur Bildformat-Konvertierung und animierten Export

Tools fur JSON-Austausch und Format-Ubersetzung

Werkzeuge fur JSON-Inspektion, Diff und Transformation

Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung