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;
}