Extracteur de variables de couleur CSS
Trouvez chaque couleur dans votre CSS et convertissez-la en propriétés personnalisées réutilisables.
Extracteur de variables de couleur CSS
Collez une feuille de styles et cet outil scanne chaque déclaration pour les valeurs de couleur écrites en hex, rgb()/rgba() ou hsl()/hsla(), puis réécrit les règles pour faire référence à des propriétés personnalisées au lieu de répéter la même valeur partout. Il a été construit pour nettoyer une feuille de styles qui a grandi organiquement — une refonte, une fusion de bibliothèque de composants ou du CSS extrait d'un outil de conception — où le même bleu se retrouve écrit une douzaine de façons légèrement différentes.
L'option de nommage contrôle comment chaque variable est nommée : par ordre de première apparition (--color-1, --color-2…), par une teinte approximative et une clarté (--color-bleu-foncé, --color-gris-clair), ou par la propriété sur laquelle elle apparaît en premier (--color-arrière-plan, --color-bordure). Activez « fusionner les couleurs identiques écrites différemment » pour regrouper #ff0000, rgb(255, 0, 0) et hsl(0, 100%, 50%) en une seule variable même si le texte source diffère ; les valeurs identiques sont toujours fusionnées indépendamment. Le curseur de similitude va plus loin et fusionne les nuances qui sont proches mais pas identiques — utile quand une palette a accumulé des gris ou des bleus quasi-dupliqués que personne n'avait l'intention de créer. Choisissez si le bloc généré se trouve sous :root ou un sélecteur personnalisé, sélectionnez la notation dans laquelle les variables s'impriment, ou basculez vers une simple liste de couleurs et de décomptes d'occurrences quand vous voulez juste un audit plutôt qu'une réécriture.
Le scanner ne regarde qu'à l'intérieur des valeurs de déclaration réelles, donc il ne confond jamais un sélecteur ID comme #abcabc avec une couleur, et laisse les commentaires, les chaînes entre guillemets et les contenus url() complètement intacts. Les fins de ligne Windows et Unix fonctionnent toutes les deux, et l'outil n'est pas trompé par les fonctions imbriquées comme une couleur dans une liste de gradient.
Tout s'exécute localement dans votre navigateur — votre feuille de styles n'est jamais chargée nulle part, il est donc sûr de coller du code d'un projet privé. Copiez le résultat, téléchargez-le en tant que fichier .txt, ou renvoyez la sortie vers l'entrée pour l'affiner avec une autre passe.