Aller au contenu
FreeKitX

Générateur de Jetons de Couleur (CSS, Tailwind v4, DTCG) - FreeKitX

Ajouter cet outil aux favoris

Enregistrez cette page dans votre navigateur

Sur téléphone, choisissez Ajouter aux favoris dans le menu Partager ou le menu du navigateur.

Exportez les jetons revus en CSS, Tailwind v4 @theme et JSON DTCG avec repli sRGB.

Générateur de jetons de couleur

Exportez le système de couleurs vérifié en fichiers d’implémentation.

Couleurs sources

Transfert local

Restaurez le brouillon local, échangez un fichier JSON de projet ou partagez un fragment d’URL limité en taille qui reste sur cet appareil.

Importer des couleurs

Collez des couleurs, des propriétés CSS ou du JSON DTCG 2025.10. L’analyse n’exécute pas de CSS, ne charge rien et ne modifie pas le projet avant votre confirmation.

0

Outils associés

Réponse directe

Un générateur de jetons de couleur sérialise le système révisé en propriétés CSS personnalisées, blocs Tailwind CSS v4 @theme et JSON DTCG pour que le code corresponde parfaitement à la prévisualisation visuelle.

Comment utiliser cet outil

1

Accéder à l'étape des jetons

Ouvrez le générateur de jetons ou continuez depuis le vérificateur avec le même document de système de couleur.

2

Choisir le format d'export

Sélectionnez les variables CSS, Tailwind v4 @theme ou JSON DTCG. Chaque export reflète fidèlement les primitives et alias validés.

3

Copier ou télécharger l'artefact

Copiez dans le presse-papiers ou téléchargez le fichier. Les exports intègrent des replis sRGB déterministes pour les couleurs à large gamut.

Projection fidèle d'artefacts et compatibilité

Les jetons exportés traduisent fidèlement le système validé : échelles primitives, alias sémantiques et modes de thème. Les couleurs modernes à large gamut intègrent des replis sRGB perceptuels pour éviter les dégradations sur les écrans standards.

  • Les exports CSS, Tailwind @theme et DTCG restent rigoureusement alignés sur la même révision du document.
  • Aucun stockage de jetons sur serveur externe ni compte utilisateur requis.
  • La copie et le téléchargement disposent de mécanismes de repli fiables en cas de restrictions du navigateur.

Exemples pratiques

Exporter l'échelle Primary vers Tailwind @theme

Entrée : Échelle Primary 50–950 validée + rôles primary/on-primary

Sortie : @theme { --color-primary-500: oklch(...); --color-primary: var(--color-primary-500); }

Génère des variables thématiques immédiatement exploitables sans erreur de copie manuelle.

Limites

  • N'envoie pas directement les jetons vers des outils de design distants ; copiez ou téléchargez les fichiers localement.
  • Si votre chaîne d'outils utilise un dialecte propriétaire, mappez les alias DTCG dans votre propre pipeline.

Questions fréquentes

Les exports correspondent-ils aux valeurs vérifiées ?

Oui. Les artefacts sont créés à partir du même document affiché en prévisualisation, éliminant tout décalage lors de la livraison.

Les jetons sont-ils téléversés quelque part ?

Non. La sérialisation, l'écriture dans le presse-papiers et le téléchargement se déroulent sur votre appareil. Les liens de partage n'utilisent que le fragment d'URL.

Puis-je revenir au constructeur sans perdre mes exports ?

Oui. Le passage d'une étape à l'autre conserve le document ; regénérer les fichiers après modifications appliquera la nouvelle révision.

Références et normes faisant autorité