Hub Global d'Outils
Langue actuelle: French

Générateur de variables CSS

Construisez une liste de tokens de couleur, prévisualisez chaque variable et copiez des propriétés CSS prêtes à l'emploi.

Mode d'emploi

  1. Saisissez un préfixe comme brand, theme ou ui.
  2. Modifiez chaque nom de variable et choisissez une couleur.
  3. Ajoutez des lignes si vous avez besoin de plus de variables.
  4. Copiez le CSS généré et collez-le dans votre feuille de style.

Aperçu des couleurs

--brand-primary

--brand-secondary

--brand-accent

Variables CSS générées

:root {
  --brand-primary: #4f46e5;
  --brand-secondary: #06b6d4;
  --brand-accent: #f59e0b;
}

Structurez vos couleurs avec des variables CSS

Générez rapidement des tokens :root pour éviter les valeurs répétées et simplifier les mises à jour globales.

Quand utiliser cet outil

  • Vous répétez les mêmes couleurs dans plusieurs fichiers CSS.
  • Vous voulez modifier des couleurs globales sans erreurs de remplacement.
  • Vous avez besoin d'une base de tokens pour un petit site.

Étapes rapides

  1. Choisissez un préfixe clair comme brand ou theme.
  2. Nommez les variables par rôle puis assignez des HEX.
  3. Copiez le bloc :root généré.
  4. Collez-le dans votre feuille CSS et remplacez les valeurs en dur répétées.

Erreurs fréquentes

  • Nommer les variables uniquement par teinte et non par usage.
  • Utiliser des préfixes incohérents entre fichiers.
  • Mélanger valeurs en dur et variables pour les mêmes éléments.

Guides CSS variables associés

Consultez des guides courts pour mettre en place un workflow CSS variables maintenable.