Couleur vers variables CSS

Convertir les couleurs hex en propriétés CSS personnalisées avec conventions de nommage

Qu'est-ce que c'est et comment ça marche ?

Convertir un ensemble de couleurs en propriétés personnalisées CSS (variables) est un flux de travail central dans le développement de systèmes de design. Au lieu de coder en dur des valeurs de couleur dans tout votre CSS, vous les définissez une fois comme `--couleur-primaire: #1DA1F2` dans le sélecteur `:root`.

Cet outil prend une liste de valeurs de couleur avec leurs noms et génère des déclarations de propriétés personnalisées CSS prêtes à coller et leurs équivalents Sass/SCSS.

Cas d'usage

• Bootstrap du système de design : collez votre palette de marque et générez le bloc de propriétés personnalisées CSS pour votre fichier de tokens de design ou config Tailwind.
• Changement de thème : définissez les couleurs du thème clair et sombre comme ensembles séparés de propriétés personnalisées.
• Migration Sass : exportez les variables Sass héritées vers des propriétés personnalisées CSS pour un thème natif moderne du navigateur.

Questions fréquentes

Quelle est la différence entre les propriétés personnalisées CSS et les variables Sass ?

Les variables Sass sont résolues à la compilation. Les propriétés personnalisées CSS sont résolues à l'exécution — peuvent être modifiées dynamiquement avec JavaScript et ont une portée de l'élément.

Quelle convention de nommage utiliser pour les variables de couleur ?

Modèles courants : nommage sémantique (`--couleur-primaire`), nommage basé sur l'échelle (`--bleu-100` à `--bleu-900`), ou les deux.

Les propriétés personnalisées CSS peuvent-elles être utilisées dans les media queries ?

Partiellement. Elles fonctionnent dans les corps de media queries mais pas dans les conditions elles-mêmes.

Comment hériter et remplacer les propriétés personnalisées ?

Elles se cascadent comme des propriétés régulières. Remplacez pour un composant : `.carte { --couleur-primaire: #FF0000; }` change la valeur uniquement à l'intérieur de `.carte`.

Développeur

Générateur UUID · Convertisseur de timestamp · Encodeur Base64 · Décodeur Base64 · Générateur de hash · Convertisseur de couleurs