Générateur de Tokens de Design

Créez des échelles de tokens multi-couleurs et exportez en variables CSS, config Tailwind, SCSS, JSON ou tokens Figma.

Color Scales

brand

100

200

300

400

500

600

700

800

900

950

:root {
  --brand-50: #f7f5ff;
  --brand-100: #ede8fe;
  --brand-200: #dad2fc;
  --brand-300: #beb3fa;
  --brand-400: #998ff6;
  --brand-500: #6366f1;
  --brand-600: #4e52bc;
  --brand-700: #3c408d;
  --brand-800: #2d3269;
  --brand-900: #21264a;
  --brand-950: #191f38;
}

Questions Fréquentes

Que sont les tokens de design ?

Les tokens de design sont des valeurs de couleur nommées qui forment la base d'un système de design.

Puis-je ajouter plusieurs échelles de couleur ?

Oui — cliquez sur 'Ajouter' pour ajouter d'autres échelles. Chacune obtient sa propre échelle de 11 étapes.

Qu'est-ce que le format Figma tokens ?

Le format Figma génère une structure JSON compatible avec le plugin Figma Tokens.