Accueil
Outils de Couleurs
Couleurs vers variables CSS

Générateur de variables CSS à partir de couleurs Convertissez un ensemble de couleurs en propriétés personnalisées CSS (variables).

🎨

Couleurs vers variables CSS

Convertissez un ensemble de couleurs en propriétés personnalisées CSS (variables).

Ajouter des couleurs

Ajoutez des couleurs avec des noms de variables personnalisés à l'aide de sélecteurs de couleur.

Choisir le format

Sélectionnez le format de sortie : HEX, RGB ou HSL.

Copier le CSS

Copiez le bloc de propriétés personnalisées CSS :root généré.

Loading tool...

What Is Couleurs vers variables CSS?

Le générateur de variables CSS à partir de couleurs convertit une collection de couleurs nommées en propriétés personnalisées CSS (variables :root) prêtes à être collées dans vos feuilles de style. Vous pouvez ajouter n'importe quel nombre de couleurs, attribuer un nom de variable sémantique à chacune (comme "principal", "secondaire", "accent"), et choisir le format de sortie : HEX pour la simplicité, RGB avec des virgules pour une flexibilité rgba(), ou HSL avec des virgules pour une manipulation facile en temps réel. Les propriétés personnalisées CSS sont la base des systèmes de personnalisation modernes, permettant le mode sombre, la personnalisation de marque et les mises à jour de couleurs dynamiques. Cet outil génère le bloc :root { --variable: value; } pour que vous puissiez configurer rapidement un système de couleurs. L'aperçu en direct affiche toutes vos couleurs ensemble sous forme d'une bande de palette.

Why Use Couleurs vers variables CSS?

Ajoutez des couleurs illimitées avec des noms de variables personnalisés
Trois formats de sortie : HEX, RGB ou HSL
Génère un bloc CSS :root { } propre
Aperçu en direct de la palette de couleurs
Fondation pour les systèmes de thème CSS

Common Use Cases

Thème CSS

Configurez des propriétés personnalisées CSS pour le thème light/dark.

Jetons de conception

Convertissez les jetons du système de conception en variables CSS.

Couleurs de marque

Créez un ensemble réutilisable de variables CSS pour les couleurs de la marque.

Bibliothèques de composants

Définissez des variables de couleur personnalisables pour les bibliothèques de composants CSS.

Technical Guide

Les propriétés personnalisées CSS (var(--name)) sont définies dans un sélecteur :root pour une portée globale. Le format HEX stocke la valeur de couleur complète : --principal: #3B82F6. Le format RGB avec des virgules stocke les canaux : --principal: 59, 130, 246, qui peut être utilisé comme rgb(var(--principal)) ou rgba(var(--principal), 0,5) pour une opacité flexible. Le format HSL stocke : --principal: 217, 91%, 60%, utilisable comme hsl(var(--principal)). Les formats RGB et HSL sont plus flexibles car ils permettent d'ajouter de l'opacité au point d'utilisation sans rédéfinir la variable. Les propriétés personnalisées CSS sont héritées par tous les éléments enfants et peuvent être remplacées dans des requêtes média ou des sélecteurs de classe pour le commutation de thème. Elles sont prises en charge dans tous les navigateurs modernes et se comportent comme des propriétés CSS régulières.

Tips & Best Practices

1
Utilisez des noms sémantiques comme --primary, --secondary au lieu de --blue, --red pour plus de flexibilité
2
Le format RGB est le plus flexible : rgba(var(--primary), 0.5) vous donne un contrôle sur l'opacité
3
Le format HSL permet de dériver des variations : hsl(var(--primary-h), var(--primary-s), 90%)
4
Remplacez les variables dans les requêtes multimédias pour le mode sombre : @media (prefers-color-scheme: dark) { :root { ... } }
5
Gérez votre nombre de variables de manière efficace - la plupart des systèmes n'ont besoin que de 5 à 10 variables de couleur

Related Tools

Convertisseur HEX vers RGB

Convertissez les codes de couleur HEX en valeurs RVB instantanément avec un aperçu de couleur interactif.

🎨 Color Tools

Convertisseur HEX vers HSL

Convertissez les codes de couleur HEX en valeurs HSL (Teinte, Saturation, Luminosité).

🎨 Color Tools

Sélecteur de couleurs

Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.

🎨 Color Tools

Rechercheur de couleurs Tailwind

Trouvez la classe de couleur CSS Tailwind la plus proche pour n'importe quel code HEX.

🎨 Color Tools

Générateur de filtres CSS

Appliquez des effets de filtre CSS tels que le flou, la luminosité, le contraste et bien plus encore avec des commandes visuelles.

🎨 CSS & Design

Frequently Asked Questions

Q Quel format devrais-je choisir ?

HEX pour la simplicité et la lisibilité. RGB si vous avez besoin d'un contrôle sur l'opacité via rgba(var(...), alpha). HSL si vous souhaitez dériver des variations de couleur en ajustant les composants individuels.

Q Les propriétés personnalisées CSS sont-elles prises en charge partout ?

Oui, dans tous les navigateurs modernes depuis 2016 (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+). Non pris en charge dans IE11.

Q Puis-je utiliser des variables pour le mode sombre ?

Absolument. Définissez les valeurs du mode clair dans :root, puis remplacez-les dans @media (prefers-color-scheme: dark) { :root { ... } } ou sur une classe .dark.

About This Tool

Couleurs vers variables CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.