Générateur de variables couleur CSS
Générez des custom properties CSS et tokens design depuis une palette.
Ce que couvre cette page
Cette page explique le flux de travail et renvoie directement vers la section correspondante de l’outil principal Chromoforge.
- Générez des palettes depuis une couleur de base.
- Vérifiez le contraste avant de publier du texte UI.
- Exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.
- Fonctionne localement dans le navigateur.
Comment ca fonctionne
Les custom properties CSS (aussi appelées variables CSS) permettent de centraliser toutes les couleurs d'un projet dans un seul endroit et de les réutiliser partout avec la syntaxe var(--nom-variable). Chromoforge généré ce bloc de variables depuis votre palette.
Le flux de travail est simple : générez ou importez votre palette dans Chromoforge, donnez un nom a chaque role de couleur (primaire, secondaire, surface, texte, bordure...), puis exportez. Le résultat est un bloc :root { } pret a coller dans votre fichier CSS global :
- Nommage sémantique automatique :
--color-primary-500,--color-text-default, etc. - Support du mode sombre : Chromoforge peut générer deux jeux de variables (thème clair / sombre) dans le même export.
- Formats multiples : hexadecimal, RGB fractionne (pour les utilitaires d'opacité), HSL et oklch.
- Compatible avec tous les frameworks : React, Vue, Angular, Svelte, ou CSS pur.
Vous pouvez aussi exporter en format SCSS ($variable: valeur;) ou en JSON de tokens design pour les outils comme Style Dictionary ou Theo.
Exemples pratiques
Les variables CSS de couleur sont la base de tout design system moderne :
- Design system d'equipe : definissez une fois
--color-brand-600et toute l'equipe l'utilise. Un changement de couleur se fait en modifiant une seule ligne. - Mode sombre natif : avec
@media (prefers-color-scheme: dark), redéfinissez vos variables pour le mode sombre sans dupliquer les règles CSS. - Thématisation dynamique : en JavaScript, modifiez les variables CSS au runtime pour offrir des thèmes personnalisables a l'utilisateur.
- Migration depuis SCSS : remplacez vos variables Sass par des custom properties natives et profitez de la cascade et de l'héritage CSS.
FAQ — Variables couleur CSS
Quelle est la différence entre custom properties CSS et variables SCSS ?
Les variables SCSS sont traitées a la compilation : elles n'existent plus dans le CSS final et ne peuvent pas être modifiées en JavaScript. Les custom properties CSS existent dans le navigateur, héritent via la cascade, et peuvent être lues et modifiées au runtime avec element.style.setProperty(). Pour tout projet moderne, les custom properties sont generalement préférable.
Comment structurer les noms de variables pour un grand projet ?
Une convention courante est --[namespace]-[categorie]-[nuance], par exemple --ds-color-primary-600. Séparez les couleurs brutes (échelle numérique) des couleurs sémantiques (rôles comme --color-text-muted). Chromoforge supporte les deux niveaux dans le même export.
Puis-je utiliser les variables générées avec des utilitaires d'opacité Tailwind ?
Oui, mais Tailwind nécessite des valeurs en composantes RGB séparées. Exportez vos couleurs au format "RGB fractionne" (--color-primary-500: 30 64 175;) et utilisez la syntaxe Tailwind bg-[rgb(var(--color-primary-500)/50%)] ou configurez votre tailwind.config.js en conséquence.