Extracteur de jetons CSS
CSS Token Extractor
Extrait couleurs, espacements, rayons et polices d’une feuille de style et propose un jeu de propriétés personnalisées.
Lit une feuille de style, compte chaque couleur, longueur, rayon, police et ombre qu’elle contient, et propose une `--variable` pour chacune, ordonnées par fréquence d’emploi. Il peut ensuite réécrire la feuille de style pour qu’elle les utilise. C’est un scanneur de déclarations bâti sur le tokeniseur du formateur CSS, pas un analyseur complet et pas un linteur : il vous dit quelles valeurs sont dans le fichier, c’est-à-dire la partie fastidieuse à faire à la main.
CSS en entrée
Déposez un fichier .css
Lu dans cet onglet seulement.
Jetons proposés
Ajouté devant, comme dans --app-color-1.
Déclarations
29
Couleurs
11
Valeurs d’espacement
5
Rayons
3
Polices
1
Variables déjà présentes
1
Couleurs 11
- #6366f1×2
- #fff×2
- #1f2937×1
- rgba(0,0,0,.06)×1
- rgba(0,0,0,.08)×1
- #111827×1
- #4b5563×1
- #4f46e5×1
- #eef2ff×1
- #4338ca×1
- #e5e7eb×1
Espacements 5
- 4px×1
- 8px×3
- 16px×4
- 24px×3
- 32px×1
Rayons 3
- 8px×1
- 12px×1
- 999px×1
Tailles de police 3
- 12px×1
- 14px×2
- 20px×1
Hauteurs de ligne 1
- 1.6×1
Polices 1
- "Pretendard", system-ui, sans-serif×1
Ombres 2
- 0 1px 2px rgba(0,0,0,.06)×1
- 0 8px 24px rgba(0,0,0,.08)×1
Comment le fichier est lu
- · Lu avec le tokenizer du formateur CSS, si bien qu’un
url()ou un#fffà l’intérieur d’une chaîne n’est pas compté comme une couleur, et quecalc()reste entier. - · Les couleurs sont normalisées en hexadécimal, donc #FFF, white et rgb(255 255 255) fusionnent en une seule entrée avec son compte. Les noms sont numérotés par fréquence d’emploi, donc --color-1 est en général la couleur de marque ou celle du texte : renommez-les.
- · Les espacements ne viennent que de margin, padding, gap et des propriétés inset, et les rayons que de border-radius, numérotés par taille. width et height sont écartés : ce sont des dimensions, pas un rythme.
- · Le JSON suit la forme du brouillon W3C Design Tokens (DTCG), avec $type et $value. « CSS réécrit avec var() » ne remplace que les correspondances exactes de valeur et ne touche à aucun autre caractère.
Pour bâtir une gamme à partir d’une couleur que vous avez extraite, l’échelle de teintes et de nuances fait cela ; pour le mode sombre, la palette pour le mode sombre.
Comment s’en servir
Collez la feuille de style, ou déposez le fichier
Un fichier à la fois. L’exemple qui se charge d’abord est là pour montrer la forme de la sortie avant que vous n’alliez chercher votre propre CSS.
Lisez les décomptes avant les jetons
Quarante couleurs dans un fichier qui devrait en avoir douze, voilà le constat. Les listes groupées en dessous montrent chaque valeur avec le nombre de fois où elle apparaît, si bien que celles qui valent la peine d’être nommées sont en haut et que les uniques — qui sont d’habitude des erreurs ou des règles mortes — sont en bas.
Mettez un préfixe si le projet en demande un
Vide donne `--color-1` ; taper `app` donne `--app-color-1`. Dans les deux cas les numéros sont le classement par usage, pas un sens : renommez-les une fois que vous savez à quoi sert chaque valeur.
Prenez les variables, le JSON, ou le fichier réécrit
La sortie CSS est un bloc `:root` à coller en tête. Le JSON est à la forme du brouillon W3C Design Tokens, pour une étape de build ou un outil de design. La réécriture est la feuille de style d’origine où les correspondances exactes sont remplacées par `var()` et où rien d’autre n’est touché — lisez le diff avant de valider.
Questions fréquentes
Le CSS réécrit est-il sûr à livrer tel quel ?
Lisez le diff d’abord. La substitution est textuelle et sur correspondance exacte seulement, elle ne cassera donc pas une valeur qu’elle ne reconnaît pas ; mais elle ne peut pas non plus savoir que deux gris identiques veulent dire deux choses différentes — une couleur de bordure et une étiquette désactivée qui partagent le même hexadécimal recevront la même variable, et plus tard quelqu’un changera l’une des deux. Nommer correctement les jetons est l’étape qui rattrape cela, et c’est une étape humaine.
Pourquoi la largeur et la hauteur manquent-elles dans la liste des espacements ?
Délibérément. L’espacement est un rythme — marges, remplissage, écarts, décalages — et un système de design le transforme en jetons. Les largeurs et les hauteurs sont des dimensions : une barre latérale de 240 px et une cible tactile de 44 px ne sont pas deux points de la même échelle, et les mettre dans la liste enterre les valeurs qui, elles, en sont.
Gère-t-il SCSS, Less ou CSS-in-JS ?
Seulement le CSS pur de façon fiable. Le tokeniseur traversera beaucoup de SCSS, mais l’imbrication, les corps de `@mixin` et les valeurs interpolées ne sont pas résolus, donc les décomptes dérivent. Compilez d’abord et scannez la sortie — c’est aussi le fichier que le navigateur voit réellement.
Il a trouvé une couleur dans une URL. Vraiment ?
Non : ce cas est traité. Le scan tourne sur le tokeniseur du formateur CSS, donc un `#fff` dans un `url()` ou dans une chaîne est une chaîne, et `calc()` est laissé entier plutôt que démonté en longueurs. Ce sont les deux endroits où une expression régulière se trompe.
À alimenter depuis
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.
Palette pour le mode sombre
Dark Mode Palette
Construit une rampe de 50 à 950 depuis une couleur et la reflète en version sombre, pour que chaque paire de jetons conserve son contraste.
Couleur Tailwind la plus proche
Nearest Tailwind Colour
Trouve l’entrée de la palette Tailwind la plus proche d’une couleur donnée et affiche la distance perceptuelle.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Échelle de teintes et de nuances
Tint & Shade Scale
Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Palette pour le mode sombre
Dark Mode Palette
Construit une rampe de 50 à 950 depuis une couleur et la reflète en version sombre, pour que chaque paire de jetons conserve son contraste.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.