# Color-Token-Kaskaden-Generator Erzeugt aus einem Primaer-Hex eine komplette Token-Hierarchie mit CSS-Variablen und Style-Dictionary-JSON > Kanonische Seite: https://elysiatools.com/de/tools/color-token-cascade-generator - **Kategorie:** Design - **Schlagwörter:** design token, farbe, css variables, style dictionary ## Überblick Geben Sie ein Primaer-Hex ein, und das Tool leitet Marken-, Akzent- und optionale Neutralskalen fuer ein Design-System ab. Ausgabe: - primary-50 bis primary-900 - accent-50 bis accent-900 - optional neutral-50 bis neutral-900 - semantische Tokens - CSS-Variablen und Style-Dictionary-JSON ## Eingaben - **Primaer-Hex** (text): #3b82f6 - **Akzentstrategie** (select) - **Neutrale Skala einbeziehen** (checkbox) ## Wann verwenden - Beim Aufbau eines neuen Design-Systems oder UI-Kits basierend auf einer zentralen Markenfarbe. - Zur schnellen Erstellung harmonischer Farbskalen für Web-Projekte ohne manuelles Mischen von Farbtönen. - Wenn Entwickler strukturierte Design-Tokens für Style Dictionary oder CSS-Variablen für konsistente UI-Themen benötigen. ## Funktionsweise - Geben Sie den gewünschten Primär-Hex-Code als Basis für Ihre Markenidentität in das Eingabefeld ein. - Wählen Sie eine Akzentstrategie wie komplementär, analog oder geteilt-komplementär, um harmonische Kontrastfarben zu berechnen. - Aktivieren Sie optional die neutrale Skala, um abgestimmte Grauwerte für Hintergründe, Texte und Rahmen zu erhalten. - Exportieren Sie die generierten Ergebnisse als CSS-Variablen oder im Style-Dictionary-JSON-Format für Ihre Entwicklungsumgebung. ## Anwendungsfälle - Erstellung einer konsistenten Farbpalette für eine neue SaaS-Plattform basierend auf einem Logo-Farbwert. - Automatisierung der Token-Generierung für ein plattformübergreifendes Design-System mit Style Dictionary. - Schnelles Prototyping von UI-Komponenten mit harmonischen Akzentfarben und abgestuften Grauwerten. ## Häufig gestellte Fragen ### Welche Farbskalen werden generiert? Das Tool erzeugt Skalen von 50 bis 900 für Primär-, Akzent- und optional neutrale Farben. ### Was bewirkt die Akzentstrategie? Sie definiert mathematisch, wie die Akzentfarbe basierend auf der Primärfarbe im Farbkreis berechnet wird. ### Sind semantische Tokens enthalten? Ja, es werden automatisch Tokens für Hintergründe, Texte und Rahmen (z. B. text-muted, bg-canvas) erstellt. ### Kann ich die Ausgabe direkt in CSS verwenden? Ja, das Tool stellt eine fertige Liste von CSS-Variablen bereit, die direkt in Stylesheets kopiert werden kann. ### Wofür ist das Style-Dictionary-JSON gut? Dieses Format ermöglicht es, Designdaten plattformübergreifend für Web, iOS und Android zu transformieren. ## Ähnliche Tools - [Bild-Palette zu Design-Tokens](https://elysiatools.com/de/tools/image-to-design-tokens): Extrahiert dominante Farben per k-Means und exportiert sie als CSS-/SCSS-Variablen, Tailwind-Config oder JSON-Tokens mit Namen und Farbskala - [Organigramm-Generator](https://elysiatools.com/de/tools/org-chart-maker): Erzeugt ein vertikales Organigramm mit Namen und Positionen aus hierarchischen JSON-Daten - [Graustufen-Konverter](https://elysiatools.com/de/tools/color-grayscale-converter): Farben in Graustufen umwandeln mit mehreren Konvertierungsmethoden und Intensitätssteuerung - [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 - [ECharts-Theme-Token-Extraktor](https://elysiatools.com/de/tools/echarts-theme-token-extractor): Extrahiert Design-Tokens — Farben, Zahlen, Schriftgrößen und Strings — aus einem ECharts-Theme-JSON und exportiert sie direkt in Ihr Design-System. Fügen Sie ein Theme-Objekt ein (das per echarts.init(dom, themeName) registriert wird) und das Werkzeug durchläuft jedes Leaf, taggt jede Farbe (optional Named/rgb → hex normalisiert), jeden Abstand, jede Schriftgröße und jeden String und gibt saubere CSS-Variablen, ein Tailwind theme.extend, ein Style Dictionary tokens.json oder SCSS-Variablen aus. Überbrückt die Lücke zwischen einem ECharts-Visualisierungs-Theme und Figma/CSS/Tailwind-Design-Tokens, ohne jeden Wert von Hand zu kopieren. - [Figma-Tokens-Exporteur](https://elysiatools.com/de/tools/figma-tokens-export): Fügen Sie ein Figma-/Tokens-Studio-Variablen-JSON ein und exportieren Sie nach Tailwind, shadcn CSS-Variablen, Style Dictionary oder SCSS. Erhält Farb-, Abstands- und Font-Tokens mit Typ-Inferenz. - [Fitness-Workout-PDF-Generator](https://elysiatools.com/de/tools/fitness-workout-pdf-generator): Erstellt einen druckbaren Trainingsplan als PDF aus JSON oder CSV mit Tabellen, Fortschrittsfeldern und optionalen QR-Codes - [JSON-LD-Generator aus CSV](https://elysiatools.com/de/tools/json-ld-generator-from-csv): Wandelt CSV- oder Excel-Zeilen in Schema.org-JSON-LD fuer Artikel, Produkte oder Events um und liefert validierungsbereite SEO-Ausgaben ## Beispiele - [Farbcode-Beispiele](https://elysiatools.com/de/samples/color-code): Sammlung von Farbcodes in verschiedenen Formaten (Hex, RGB, HSL, benannte Farben) für Validierungstests - [Grafana Fortgeschrittene Anwendungsbeispiele](https://elysiatools.com/de/samples/grafana-samples): Umfassende Grafana-Beispiele für fortgeschrittenes Dashboard-Design, Alerting-Konfiguration, Datenquellen-Integration und Plugin-Entwicklung - [QR-Code-Beispiele](https://elysiatools.com/de/samples/qrcode-samples): Beispiel-QR-Code-Bilder zum Testen von QR-Code-Lese- und Generierungswerkzeugen - [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 ## Verwandte Inhalte - [Workflow fur Farbsysteme und CSS-Effekte](https://elysiatools.com/de/hubs/design-generate): Eine Palette ableiten, zugangliche Farbbeziehungen aufbauen, Tokens erzeugen und konsistente CSS-Effekte auf echte UI-Zustände anwenden.