Outil couleur pratique

Générateur de design tokens

Créez des design tokens couleur depuis une palette et exportez CSS variables, SCSS maps, JSON et Tailwind.

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

Ce que donne cette page

  • Convertissez HEX bruts en tokens nommés.
  • Utilisez échelles numériques et noms sémantiques pour rôles UI.
  • Exportez JSON pour relier design et build tools.

Utile pour

  • Design systems
  • Handoff tokens
  • Équipes frontend

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.

Quelle différence entre jetons primitifs et sémantiques ?

Les primitifs nomment des valeurs brutes, comme blue-500 ou gray-900. Les jetons sémantiques nomment une intention, comme color-action-background ou color-text-muted, et pointent vers un primitif. Les composants ne devraient consommer que des jetons sémantiques : un changement de marque ou de thème ne touche alors qu'une couche d'indirection.

Quel format d'export faut-il versionner ?

Les custom properties CSS quand le thème doit changer à l'exécution dans le navigateur. JSON quand les jetons alimentent une chaîne multiplateforme comme Style Dictionary et doivent atteindre iOS ou Android. Les variables SCSS seulement si tout se résout à la compilation, sans thématisation à l'exécution.