# Generateur de cascade de color tokens Transforme un hex principal en systeme complet de tokens, variables CSS et JSON Style Dictionary > Page canonique: https://elysiatools.com/fr/tools/color-token-cascade-generator - **Catégorie:** Design - **Mots-clés:** design token, couleur, css variables, style dictionary ## Présentation Saisissez une couleur hex principale et l outil construit des echelles de marque, daccent et des neutres optionnels, prets pour un design system. Sorties : - primary-50 a primary-900 - accent-50 a accent-900 - neutral-50 a neutral-900 en option - tokens semantiques - variables CSS et JSON Style Dictionary ## Entrées - **Hex principal** (text): #3b82f6 - **Strategie d accent** (select) - **Inclure echelle neutre** (checkbox) ## Quand l'utiliser - Lors de la création d'un nouveau design system ou d'une charte graphique numérique cohérente. - Pour générer rapidement des variables CSS harmonisées à partir d'une seule couleur de marque. - Pour exporter des jetons de design structurés vers Style Dictionary pour des projets multi-plateformes. ## Fonctionnement - Saisissez le code hexadécimal de votre couleur principale dans le champ dédié. - Sélectionnez une stratégie d'accentuation (complémentaire, analogue ou complémentaire fractionnée) pour définir les teintes secondaires. - Activez l'option d'échelle neutre pour générer des nuances de gris coordonnées à votre teinte principale. - Copiez les résultats sous forme de variables CSS, de tokens sémantiques ou de structure JSON. ## Cas d'usage - Initialisation rapide d'un UI Kit pour une application web ou mobile. - Standardisation des couleurs pour assurer la cohérence visuelle d'une plateforme SaaS. - Automatisation de la livraison des spécifications couleurs entre designers et développeurs. ## Questions fréquentes ### Quels formats de sortie sont disponibles ? L'outil génère des variables CSS, des tokens sémantiques et un format JSON compatible avec Style Dictionary. ### Comment est calculée la couleur d'accent ? Elle est dérivée mathématiquement de la couleur principale selon la stratégie choisie : complémentaire, analogue ou complémentaire fractionnée. ### L'échelle neutre est-elle un gris pur ? Non, elle est légèrement teintée avec la couleur principale pour assurer une meilleure harmonie visuelle dans l'interface. ### Qu'est-ce qu'un token sémantique ? C'est un jeton nommé par sa fonction (ex: bg-canvas, text-muted) plutôt que par sa valeur chromatique brute. ### Puis-je utiliser ces tokens pour le mode sombre ? Oui, les échelles générées et les tokens sémantiques servent de fondation pour construire vos thèmes clair et sombre. ## Outils associés - [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes - [Générateur d'organigramme](https://elysiatools.com/fr/tools/org-chart-maker): Génère un organigramme vertical avec noms et postes à partir de données JSON hiérarchiques - [Convertisseur Niveaux de Gris](https://elysiatools.com/fr/tools/color-grayscale-converter): Convertir les couleurs en niveaux de gris avec plusieurs méthodes de conversion et contrôle d'intensité - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Extracteur de tokens de thème ECharts](https://elysiatools.com/fr/tools/echarts-theme-token-extractor): Extrait des design tokens — couleurs, nombres, tailles de police et chaînes — d'un JSON de thème ECharts et les exporte directement dans votre design system. Collez un objet thème (celui enregistré et passé à echarts.init(dom, themeName)) et l'outil parcourt chaque feuille, étiquetant chaque couleur (avec normalisation optionnelle nommé/rgb → hex), nombre d'espacement, taille de police et chaîne, puis émet des variables CSS propres, un thème.extend Tailwind, un tokens.json Style Dictionary ou des variables SCSS. Pont entre un thème de visualisation ECharts et les tokens de design Figma/CSS/Tailwind sans recopier chaque valeur à la main. - [Exportateur de Tokens Figma](https://elysiatools.com/fr/tools/figma-tokens-export): Collez un JSON de variables Figma / Tokens Studio et exportez vers Tailwind, variables CSS shadcn, Style Dictionary ou SCSS. Préserve les tokens de couleur, d'espacement et de police avec inférence de type. - [Generateur PDF de programme fitness](https://elysiatools.com/fr/tools/fitness-workout-pdf-generator): Genere un PDF imprimable dentrainement depuis JSON ou CSV avec tableaux, cases de suivi et QR optionnels - [Generateur JSON-LD depuis CSV](https://elysiatools.com/fr/tools/json-ld-generator-from-csv): Transforme des lignes CSV ou Excel en JSON-LD Schema.org pour des articles, produits ou evenements avec une sortie prete a etre validee ## Exemples - [Exemples de codes couleur](https://elysiatools.com/fr/samples/color-code): Collection de codes de couleur dans différents formats (Hex, RGB, HSL, couleurs nommées) pour les tests de validation - [Exemples Avancés d'Application Grafana](https://elysiatools.com/fr/samples/grafana-samples): Exemples complets de Grafana couvrant le design avancé de tableaux de bord, la configuration d'alertes, l'intégration de sources de données et le développement de plugins - [Exemples de Codes QR](https://elysiatools.com/fr/samples/qrcode-samples): Images de codes QR d'exemple pour tester les outils de lecture et de génération de codes QR - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format ## Contenu associé - [Workflow de systeme coloré et d'effets CSS](https://elysiatools.com/fr/hubs/design-generate): Extraire une palette, construire des relations accessibles, générer des tokens et appliquer des effets CSS cohérents sur de vrais états d'interface.