Outil

Générateur de thème UI

Générez un design system complet depuis une couleur. Palette primaire Tailwind (50–950), couleurs sémantiques (succès, erreur, alerte), neutres et exports CSS/Tailwind/SCSS.

Couleur primaire :
#
Palette primaire (Tailwind)
Couleurs sémantiques
Export code

  
  

Qu'est-ce qu'un design system de couleurs ?

Un design system de couleurs définit les règles d'usage des teintes dans une interface. Il comprend une palette primaire (déclinée en 11 nuances), des couleurs sémantiques (succès vert, erreur rouge, alerte orange, info bleu) et des neutres pour le texte, les fonds et les bordures. Tailwind CSS popularise l'échelle 50–950 qui offre suffisamment de granularité pour tous les états : hover, focus, disabled, background, surface.

Générer depuis une couleur de marque

Partez de votre couleur de marque (logo, charte graphique) pour générer automatiquement toute la palette. L'algorithme ajuste saturation et luminosité selon l'échelle Tailwind. Les couleurs sémantiques sont dérivées par rotation de teinte : +120° pour le succès (vert), +180° pour les alertes (orange). Les neutres sont générés en désaturant la couleur primaire pour assurer la cohérence tonale.