Générateur de Nuances et Teintes

Générez une échelle complète de 11 étapes depuis n'importe quelle couleur hex. Exportez en variables CSS, config Tailwind, SCSS ou JSON.

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

Questions Fréquentes

Quelle est la différence entre nuance et teinte ?

Une nuance est une couleur mélangée au noir (plus sombre), une teinte est mélangée au blanc (plus claire).

Comment utiliser les variables CSS exportées ?

Copiez le résultat du tab CSS et collez-le dans votre fichier CSS global. Référencez-les avec var(--brand-500).

L'échelle est-elle compatible avec Tailwind CSS ?

Oui. Passez à l'onglet Tailwind et copiez l'objet colors dans tailwind.config.js.