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 Chromaforge.
- 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 appelees variables CSS) permettent de centraliser toutes les couleurs d'un projet dans un seul endroit et de les reutiliser partout avec la syntaxe var(--nom-variable). Chromaforge généré ce bloc de variables depuis votre palette.
Le flux de travail est simple : générez ou importez votre palette dans Chromaforge, 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 semantique automatique :
--color-primary-500,--color-text-default, etc. - Support du mode sombre : Chromaforge peut generer deux jeux de variables (theme clair / sombre) dans le meme export.
- Formats multiples : hexadecimal, RGB fractionne (pour les utilitaires d'opacite), 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), redefinissez vos variables pour le mode sombre sans dupliquer les regles CSS. - Thematisation dynamique : en JavaScript, modifiez les variables CSS au runtime pour offrir des themes personnalisables a l'utilisateur.
- Migration depuis SCSS : remplacez vos variables Sass par des custom properties natives et profitez de la cascade et de l'heritage CSS.
FAQ — Variables couleur CSS
Quelle est la difference entre custom properties CSS et variables SCSS ?
Les variables SCSS sont traitees a la compilation : elles n'existent plus dans le CSS final et ne peuvent pas etre modifiees en JavaScript. Les custom properties CSS existent dans le navigateur, heritent via la cascade, et peuvent etre lues et modifiees au runtime avec element.style.setProperty(). Pour tout projet moderne, les custom properties sont generalement preferable.
Comment structurer les noms de variables pour un grand projet ?
Une convention courante est --[namespace]-[categorie]-[nuance], par exemple --ds-color-primary-600. Separez les couleurs brutes (échelle numerique) des couleurs sémantiques (rôles comme --color-text-muted). Chromaforge supporte les deux niveaux dans le meme export.
Puis-je utiliser les variables g?n?r?es avec des utilitaires d'opacite Tailwind ?
Oui, mais Tailwind nécessite des valeurs en composantes RGB separees. 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 consequence.
L'export JSON est-il compatible avec Style Dictionary ?
L'export JSON de Chromaforge suit la structure de Design Tokens W3C (Community Group). Il est compatible avec Style Dictionary 4+ qui supporte nativement ce format. Cela vous permet de transformer vos tokens une fois et de les exporter vers iOS, Android, CSS et n'importe quelle autre plateforme.