Outil couleur pratique

Générateur thème shadcn

Mappez une palette vers des variables CSS type shadcn pour background, foreground, primary, muted, accent et destructive.

Ouvrir dans l’outil principalRetour à l’outil
EnglishItalianoEspañolFrançaisDeutsch

Ce que donne cette page

  • Utilisez les nuances pour assigner les variables sémantiques.
  • Séparez neutres et marque pour des composants cohérents.
  • Vérifiez le contraste primary/destructive foreground.

Utile pour

  • Apps React
  • Librairies UI
  • Variables CSS

Comment l’utiliser

Générateur paletteCréez des palettes accessibles, vérifiez le contraste WCAG, extrayez des couleurs d'images et exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.Contrôle WCAGVérifiez le contraste entre texte et arrière-plan selon WCAG AA et AAA, testez des paires réelles et choisissez des couleurs lisibles.Extracteur imageExtrayez les couleurs dominantes des images PNG, JPG ou WebP dans le navigateur et créez des palettes exportables.
Puis-je utiliser cela avec le générateur principal?

Oui. Commencez ici, ouvrez l’outil Chromoforge avec la même couleur de base et exportez la palette.

Quelles variables un thème shadcn attend-il ?

Les paires background et foreground, puis card, popover, primary, secondary, muted, accent et destructive, chacune avec son foreground, plus border, input et ring. Tous les composants de la bibliothèque lisent ces noms : les renseigner entièrement garde les thèmes clair et sombre synchronisés.

Pourquoi les valeurs shadcn s'écrivent-elles sans fonction de couleur ?

La configuration par défaut stocke des canaux nus pour que Tailwind compose l'alpha, comme dans hsl(var(--primary) / 0.5). Coller une chaîne hsl() ou oklch() complète dans la variable casse les utilitaires d'opacité. Les versions récentes acceptent aussi des valeurs complètes : suivez la convention déjà en place dans le projet.