1000 Outils

Générateur de tokens de couleurs

Construisez votre système de design en quelques secondes. Entrez une couleur primaire et un nom de token, et notre outil génère automatiquement les 11 nuances standards (50 à 950). Exportez en variables CSS custom properties, en configuration Tailwind ou en JSON, prêt à intégrer dans votre projet.

50
100
200
300
400
500
600
700
800
900
950
:root {
  --color-primary-50: #f1f1fe;
  --color-primary-100: #e3e3fd;
  --color-primary-200: #bdbef9;
  --color-primary-300: #8a8bf5;
  --color-primary-400: #4d4fef;
  --color-primary-500: #1418eb;
  --color-primary-600: #1013bc;
  --color-primary-700: #0d0f96;
  --color-primary-800: #0a0c71;
  --color-primary-900: #07084b;
  --color-primary-950: #04052f;
}

Qu'est-ce qu'un token de design ?

Les tokens de design sont des variables nommées qui stockent les décisions de design (couleurs, espacements, typographies). Pour les couleurs, ils prennent la forme d'une palette numérotée : primary-50, primary-100... primary-950. Cette approche est popularisée par Tailwind CSS, Material Design et Figma. Elle permet de maintenir une cohérence entre les équipes design et développement, et de modifier l'ensemble de l'interface en changeant une seule valeur.

Export en CSS, Tailwind et JSON

Notre outil propose trois formats d'export. Les variables CSS (:root { --color-primary-500: ... }) sont universelles et fonctionnent avec n'importe quel framework. L'export Tailwind s'intègre directement dans theme.extend.colors de votre tailwind.config.js. Le format JSON est compatible avec les outils de design tokens comme Style Dictionary, Theo ou les tokens Figma.

Questions fréquentes

Outils similaires

🌈

Sélecteur de couleur

Choisissez une couleur et obtenez instantanément ses codes HEX, RGB et HSL, prêts à copier.

🌈

Générateur de dégradé CSS

Créez des dégradés CSS linéaires ou radiaux avec aperçu en direct et code CSS prêt à copier.

🌈

Verificateur de contraste WCAG

Verifiez que le contraste entre vos couleurs de texte et de fond respecté les normes WCAG AA et AAA.

🌈

Melangeur de couleurs

Melangez deux couleurs ensemble avec un ratio ajustable et découvrez la couleur obtenue.

🌈

Inverseur de couleur

Saisissez une couleur HEX et obtenez instantanément sa couleur inversee (negative).

🌈

Générateur de couleurs complémentaires

Trouvez les couleurs complémentaires, analogues, triadiques et split-complémentaires de votre teinte.