# 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 > Kanonische Seite: https://elysiatools.com/de/tools/image-to-design-tokens - **Kategorie:** Design - **Schlagwörter:** palette, design-tokens, farbe, css, tailwind ## Überblick Lade ein Bild hoch und das Tool: 1. Verkleinert es und wendet **k-Means** an, um die dominanten Farben zu finden (3 / 5 / 8 / 12 wählbar). 2. Benennt jede Farbe (numerisch `color1`… oder semantisch `primary`/`accent`…) mit Pixel-Anteil %. 3. Erzeugt optional eine **Farbskala** (Tailwind 50–950 oder Material 100–900), indem Farbton und Sättigung grob konstant bleiben und die Helligkeit variiert. 4. 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. ## Eingaben - **Quellbild** (file): PNG, JPG, WebP… - **Palettengröße** (select) - **Farbskala** (select) - **Ausgabeformat** (select) - **Token-Präfix** (text): e.g. brand, app, theme - **Namensstil** (select) ## Wann verwenden - Wenn Sie Markenfarben aus einem Logo oder Bild extrahieren und direkt in Code-Variablen für Ihr Stylesheet übersetzen möchten. - Wenn Sie für ein neues Webprojekt eine konsistente Farbskala im Tailwind- oder Material-Design-Stil basierend auf einem Stimmungsbild benötigen. - Wenn Sie Design-Tokens für Ihr Design-System im JSON-, CSS- oder SCSS-Format synchronisieren und manuelle Farbwert-Übertragungen vermeiden wollen. ## Funktionsweise - Laden Sie ein Bild im Format PNG, JPG, WebP, GIF oder AVIF mit einer Größe von bis zu 10 MB hoch. - Wählen Sie die gewünschte Palettengröße (3, 5, 8 oder 12 Farben), den Namensstil (numerisch oder semantisch) und legen Sie ein Token-Präfix fest. - Bestimmen Sie, ob eine Farbskala (Tailwind-Stil 50–950 oder Material-Stil 100–900) generiert werden soll, und wählen Sie das gewünschte Ausgabeformat. - Das Tool berechnet die dominanten Farben per k-Means-Clustering und stellt den fertigen Code zum Kopieren bereit. ## Anwendungsfälle - Extraktion von Markenfarben aus einem hochgeladenen Logo zur Erstellung von CSS-Custom-Properties für ein Stylesheet. - Generierung einer vollständigen Tailwind-Farbpalette (50–950) aus einem Moodboard-Bild für ein neues UI-Theme. - Export von Farbpaletten als standardisierte JSON-Design-Tokens zur Integration in plattformübergreifende Design-Systeme. ## Häufig gestellte Fragen ### 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. ## Ähnliche Tools - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [Batch-Bildkonvertierung](https://elysiatools.com/de/tools/batch-convert): Mehrere Bilder in verschiedene Formate mit Qualitätseinstellungen konvertieren - [Batch-Bild-Zuschneiden](https://elysiatools.com/de/tools/image-batch-crop): Mehrere Bilder auf bestimmte Abmessungen oder Seitenverhältnisse mit benutzerdefinierter Positionierung zuschneiden. Gibt zugeschnittene Bilder als ZIP-Download zurück. - [Bild-Größenanpasser](https://elysiatools.com/de/tools/image-resize): Professionelles Bild-Größenanpassungstool mit mehreren Methoden, Seitenverhältniserhaltung und Formatkonvertierung, inklusive Funktion für Hintergrundunschärfe, unterstützt GIF/Animated WebP/APNG und JPEG/PNG/WEBP. - [Bild-Bittiefe-zu-PNG-Konverter](https://elysiatools.com/de/tools/image-to-bit-depth-png): Konvertiert Bilder in exakte monochrome, indizierte, Graustufen-, RGB- oder RGBA-PNG-Bittiefen mit Prüfung. - [Batch-Konverter fuer Bilder zu WebP](https://elysiatools.com/de/tools/image-to-webp-batch-converter): Konvertiert Bilder oder Bilder aus einem ZIP in WebP und liefert ein ZIP zurueck - [PDF Kontaktbogen](https://elysiatools.com/de/tools/pdf-photo-contact-sheet): Erstellt Kontaktbogen mit Vorschaubildern, Dateinamen und EXIF - [Batch-Bild-Konvertierung](https://elysiatools.com/de/tools/image-batch-convert): Konvertieren Sie mehrere Bilddateien zwischen verschiedenen Formaten wie JPG, PNG, WebP, AVIF, TIFF, GIF mit Qualitätseinstellungen und Stapelverarbeitung ## Beispiele - [Web Python Bildverarbeitung Beispiele](https://elysiatools.com/de/samples/web-image-processing-python): Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung - [Web TypeScript Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/web-image-processing-typescript): Web TypeScript Bildverarbeitungsbeispiele einschließlich Bild-Lesen/Speichern, Skalierung und Formatkonvertierung - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung - [Android Kotlin Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-kotlin): Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung ## Verwandte Inhalte - [Tools fur Bildformat-Konvertierung und animierten Export](https://elysiatools.com/de/hubs/image-convert): Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub. - [Tools fur JSON-Austausch und Format-Ubersetzung](https://elysiatools.com/de/hubs/json-convert): Vergleiche JSON-Konvertierungswerkzeuge fur CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN und ahnliche strukturierte Formate in einem Hub. - [Werkzeuge fur JSON-Inspektion, Diff und Transformation](https://elysiatools.com/de/hubs/json-utility): Bunde JSON-Formatierung, Diff, Pfad-Inspektion, Schema-Prufung, Merge und Transformation in einem Hub fur API- und Daten-Workflows. - [Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung](https://elysiatools.com/de/hubs/image-utility): Bunde Bildbereinigung, Beschneiden, Padding, Rahmen, Batch-Resize/Kompression, Wasserzeichen und visuelle Veredelung in einem Hub fur Asset-Vorbereitung.