Langue:Français
Chromoforge

Générateur de palettes Tailwind

Créez ensemble les gammes primaire, secondaire et neutre. Copiez @theme pour Tailwind v4, la configuration v3 ou le CSS.

Actualiser le thème ↓

Aperçu du site

La réduction de chroma conserve luminosité et teinte avant l’arrondi HEX. Original garde les palettes et liens précédents.

Ajoutez les déclarations sous les imports existants. Conservez la configuration et les plugins de votre projet.

Aperçu du site
chromoforgeAperçu du site
Votre projet

De la place pour votre prochaine idée.

Une page d’exemple avec vos fonds, surfaces et accents. Changez la palette pour actualiser chaque section.

Composants en contexte

PrimaireSecondaireNeutre

Valeurs initiales générées, pas une certification d’accessibilité. Vérifiez texte, fonds, focus et graphiques dans votre interface.

Exemples d’état

  • Réussite
  • Avertissement
  • Information
Relations entre couleurs
#2563EB
#6A31C4
#D61F58
#D2D61F
#1FD66F

Graphique illustratif, pas des statistiques. La couleur seule ne rend pas un graphique accessible.

Format d’export
/* Tailwind CSS v4: add after your existing Tailwind import. */
@theme {
  --color-primary-50: #EAF6FF;
  --color-primary-100: #D5E9FF;
  --color-primary-200: #AFD1FF;
  --color-primary-300: #81AFFF;
  --color-primary-400: #4E86FA;
  --color-primary-500: #2563EB;
  --color-primary-600: #0038BF;
  --color-primary-700: #001D9F;
  --color-primary-800: #00007D;
  --color-primary-900: #03005F;
  --color-primary-950: #050048;
  --color-secondary-50: #F6F1FF;
  --color-secondary-100: #EAE2FF;
  --color-secondary-200: #D5C5FF;
  --color-secondary-300: #B79FFF;
  --color-secondary-400: #9570EC;
  --color-secondary-500: #6A31C4;
  --color-secondary-600: #5B19B1;
  --color-secondary-700: #460091;
  --color-secondary-800: #310071;
  --color-secondary-900: #210055;
  --color-secondary-950: #15003F;
  --color-neutral-50: #F4F5F7;
  --color-neutral-100: #E6E8EC;
  --color-neutral-200: #CDD1D8;
  --color-neutral-300: #ACB1BB;
  --color-neutral-400: #757C8A;
  --color-neutral-500: #656C7A;
  --color-neutral-600: #474D5A;
  --color-neutral-700: #323844;
  --color-neutral-800: #1F242E;
  --color-neutral-900: #10141C;
  --color-neutral-950: #060910;
}

De la couleur au code

  1. Choisissez les couleurs primaire, secondaire et neutre. Les calculs restent dans ce navigateur.
  2. Examinez les deux thèmes et les trois gammes 50–950, puis choisissez le format.
  3. Copiez ou téléchargez le résultat. shadcn utilise des tokens sémantiques ; Tailwind v4 utilise @theme.

Valeurs initiales générées, pas une certification d’accessibilité. Vérifiez texte, fonds, focus et graphiques dans votre interface.

Autres outils couleur