Générateur de variables CSS
Composez une liste de couleurs nommées et récupérez instantanément le bloc :root { --nom: valeur; } de variables CSS (custom properties) correspondant. Traitement 100% local dans votre navigateur — rien n'est envoyé à un serveur.
Comment ça marche
Les variables CSS (aussi appelées "custom properties") centralisent les couleurs d'une charte graphique en un seul endroit, ce qui évite de répéter le même code hexadécimal dans des dizaines de fichiers et facilite un futur changement de thème (y compris un mode sombre). Ajoutez ou retirez des lignes, ajustez chaque couleur, et le bloc :root se met à jour en temps réel, prêt à coller en haut de votre feuille de style principale.
Les noms de variables invalides sont-ils corrigés automatiquement ?
Oui : les espaces et caractères non autorisés sont remplacés par des tirets, et le nom est mis en minuscules pour respecter la convention CSS habituelle. Si deux variables finissent avec le même nom, un suffixe numérique est ajouté automatiquement pour éviter tout conflit.
Puis-je utiliser autre chose que des couleurs comme valeur ?
Oui, le champ "Valeur" accepte n'importe quelle valeur CSS valide (une taille en rem, une police, un dégradé...), même si le sélecteur de couleur à côté reste pratique pour composer rapidement une palette.
Confidentialité : la palette que vous composez reste entièrement dans votre navigateur, rien n'est envoyé ni conservé sur un serveur.