Palette de Couleurs en Variables CSS

• Plusieurs formats de sortie : notre convertisseur de palette de couleurs en variables CSS prend en charge quatre formats de sortie : HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)) et « Tous les formats », qui génère HEX, RGB, HSL et des variables de canal R/G/B individuelles dans un seul bloc - parfait pour composer des valeurs rgba().
• Génération instantanée de variables CSS : saisissez vos noms de couleur et valeurs hex, choisissez votre sélecteur et votre format, puis cliquez sur « Générer » pour obtenir instantanément des déclarations de propriétés personnalisées CSS prêtes à coller. Notre convertisseur prend aussi en charge le collage en masse : saisissez plusieurs couleurs à la fois au format nom: #hex.
• Palette de couleurs en variables CSS sécurisée en ligne : toute la conversion s'exécute entièrement dans votre navigateur. Vos valeurs de couleur et noms de variables ne sont jamais envoyés à un serveur lorsque vous utilisez notre convertisseur en ligne - 100 % privé, fonctionne entièrement hors ligne une fois chargé.
• Palette de couleurs en variables CSS - sans installation : utilisez notre convertisseur gratuit directement dans votre navigateur, sans téléchargement, sans extension et sans compte. Prend en charge les sélecteurs personnalisés, les préfixes de variables et la saisie de couleurs en masse pour les flux de travail des systèmes de design.

• Génération de jetons de système de design : convertissez la palette de couleurs de votre marque en propriétés personnalisées CSS pour un système de design. Utilisez notre convertisseur de palette de couleurs en variables CSS pour générer tous les jetons de couleur en un clic et les coller dans votre feuille de styles globale ou votre fichier de jetons de design.
• Extension de thème Tailwind CSS : générez des variables CSS à partir des couleurs de votre marque et référencez-les dans votre configuration Tailwind avec var(--nom-couleur). Notre convertisseur facilite le pont entre votre palette de design et le système de thèmes de Tailwind.
• Basculement de thème en mode sombre : définissez des palettes de couleurs claire et sombre comme variables CSS sous différents sélecteurs (.light, .dark ou [data-theme]). Utilisez notre convertisseur avec l'option de sélecteur personnalisé pour générer les deux blocs de thème.
• Documentation des couleurs de marque : convertissez la palette de couleurs hex d'un guide de style de marque en variables CSS pour la transmission aux développeurs. Notre convertisseur génère des variables propres et nommées qui correspondent aux conventions de nommage de l'équipe de design.
• Thématisation de bibliothèques de composants : générez des propriétés personnalisées CSS pour les jetons de couleur d'une bibliothèque de composants. Utilisez l'option de préfixe de variables de notre convertisseur pour créer des espaces de noms (par exemple --brand-color-primary) et éviter les conflits.
• Composition RGBA avec variables de canal : utilisez la sortie « Tous les formats » pour générer des variables de canal R, G et B individuelles en plus de la couleur complète. Cela vous permet de composer des valeurs rgba() avec une opacité dynamique : rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5).

Un convertisseur de palette de couleurs en variables CSS est un outil qui transforme une liste de valeurs de couleur hex en déclarations de propriétés personnalisées CSS - également appelées variables CSS. Les propriétés personnalisées CSS sont définies avec un double tiret en préfixe (par exemple --color-primary: #3b82f6 ) et peuvent être référencées n'importe où dans votre feuille de styles avec var(--color-primary) . Notre convertisseur de palette de couleurs en variables CSS prend en charge les formats de sortie HEX, RGB, HSL et combinés, avec des sélecteurs et des préfixes de variables configurables pour les flux de travail des systèmes de design.

1. Saisissez vos couleurs : ajoutez les couleurs une par une à l'aide du sélecteur de couleur et du champ hex, ou utilisez la fonction de collage en masse pour saisir plusieurs couleurs à la fois au format nom: #hex. Chaque couleur reçoit un nom de variable qui devient le nom de la propriété personnalisée CSS.
2. Configurez les options de sortie : choisissez votre format de sortie (HEX, RGB, HSL ou tous les formats), votre sélecteur CSS (:root, .theme ou personnalisé) et un préfixe de variables facultatif. Toute la configuration s'exécute localement dans votre navigateur - vos valeurs de couleur ne quittent jamais votre appareil.
3. Copiez ou téléchargez le CSS : cliquez sur « Générer les variables CSS » pour produire le bloc CSS complet. Copiez-le dans le presse-papiers ou téléchargez-le sous forme de fichier .css prêt à importer dans votre projet.

• Variables HEX : valeurs de couleur hex standard (par exemple --color-primary: #3b82f6 ). Compatibles avec tous les navigateurs et format le plus compact pour les jetons de couleur.
• Variables RGB : notation fonctionnelle RGB (par exemple --color-primary: rgb(59, 130, 246) ). Utile lorsque vous devez appliquer une opacité avec rgba() sur une couleur fixe.
• Variables HSL : notation fonctionnelle HSL (par exemple --color-primary: hsl(217, 91%, 60%) ). Préférée par de nombreux systèmes de design car la teinte, la saturation et la luminosité se règlent indépendamment.
• Variables de canal (format « Tous ») : valeurs de canal R, G et B individuelles (par exemple --color-primary-r: 59 ) qui vous permettent de composer rgba() avec une opacité dynamique : rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5) .

Les propriétés personnalisées CSS sont sensibles à la casse - --Color-Primary et --color-primary sont des variables différentes. Notre convertisseur de palette de couleurs en variables CSS convertit automatiquement les noms de variables en kebab-case minuscule pour respecter les conventions de nommage CSS. Les variables définies dans :root sont disponibles globalement. Les variables définies dans un sélecteur de classe (par exemple .dark ) ne s'appliquent que lorsque cette classe est présente sur un élément ancêtre - utile pour le changement de thème.