# Variables CSS

Découvrez 8 outils pour travailler avec les variables CSS dans le navigateur, sans installer de logiciel. Les textes ne sont pas conservés et les fichiers envoyés sont supprimés après 6 heures.

> Page canonique: https://elysiatools.com/fr/tags/css-variables

## Présentation

Cette catégorie regroupe 8 outils dédiés aux variables CSS pour vous aider à travailler plus efficacement avec vos styles et vos données CSS depuis une interface accessible dans le navigateur.

## Questions fréquentes

### Que puis-je faire avec les outils pour variables CSS ?

Vous pouvez utiliser 8 outils dédiés au travail avec les variables CSS depuis une interface dans le navigateur.

### Comment les données sont-elles traitées ?

Vous utilisez les outils dans votre navigateur, tandis que le traitement s’effectue sur les serveurs d’Elysia Tools. Les textes saisis ne sont pas conservés et les fichiers envoyés sont automatiquement supprimés après 6 heures.

### Dois-je installer un logiciel pour utiliser ces outils ?

Non. Les outils sont accessibles depuis votre navigateur et ne nécessitent pas l’installation d’un logiciel.

## Outils

- [Extracteur de palette depuis URL d’image](https://elysiatools.com/fr/tools/color-palette-extractor-from-image-url): Recupere une URL d’image distante, extrait les couleurs dominantes, exporte des fichiers de palette prets pour le code et affiche les contrastes
- [Generateur de cascade de color tokens](https://elysiatools.com/fr/tools/color-token-cascade-generator): Transforme un hex principal en systeme complet de tokens, variables CSS et JSON Style Dictionary
- [Extracteur de tokens de thème ECharts](https://elysiatools.com/fr/tools/echarts-theme-token-extractor): Extrait des design tokens — couleurs, nombres, tailles de police et chaînes — d'un JSON de thème ECharts et les exporte directement dans votre design system. Collez un objet thème (celui enregistré et passé à echarts.init(dom, themeName)) et l'outil parcourt chaque feuille, étiquetant chaque couleur (avec normalisation optionnelle nommé/rgb → hex), nombre d'espacement, taille de police et chaîne, puis émet des variables CSS propres, un thème.extend Tailwind, un tokens.json Style Dictionary ou des variables SCSS. Pont entre un thème de visualisation ECharts et les tokens de design Figma/CSS/Tailwind sans recopier chaque valeur à la main.
- [Exportateur de Tokens Figma](https://elysiatools.com/fr/tools/figma-tokens-export): Collez un JSON de variables Figma / Tokens Studio et exportez vers Tailwind, variables CSS shadcn, Style Dictionary ou SCSS. Préserve les tokens de couleur, d'espacement et de police avec inférence de type.
- [Extracteur de palette couleur depuis image](https://elysiatools.com/fr/tools/image-color-palette-extractor): Charge une image, extrait les couleurs dominantes et exporte des tokens reutilisables avec controle du contraste
- [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes
- [Playground des valeurs arbitraires Tailwind](https://elysiatools.com/fr/tools/tailwind-arbitrary-value-playground): Collez des classes Tailwind utilisant des valeurs arbitraires (w-\[137px\], text-\[#bada55\], grid-cols-\[1fr_2fr\], \[mask-type:luminance\]) et inspectez le CSS généré, avec un aperçu visuel en direct, la détection des indications de type de donnée et une explication de chaque traduction. Utile pour déboguer calc(), les variables CSS et les valeurs ponctuelles hors échelle de jetons.
- [Sync de palette Tailwind](https://elysiatools.com/fr/tools/tailwind-color-palette-sync): Entrez des HEX, choisissez le schéma de noms (échelle 50–950 / nom unique / imbrication) et générez le fragment theme.extend.colors de tailwind.config.ts avec les niveaux WCAG AA/AAA. Dark mode optionnel.

## Contenu associé

- [CSS](https://elysiatools.com/fr/tags/css): Découvrez 48 outils CSS en ligne pour traiter, convertir et valider vos fichiers et données CSS depuis votre navigateur.
- [HTML/CSS](https://elysiatools.com/fr/tags/html): Découvrez 86 outils HTML/CSS pour traiter, convertir et valider des données HTML, CSS et DOM dans votre navigateur.
- [Couleur](https://elysiatools.com/fr/tags/color): Découvrez 214 outils Couleur pour travailler avec les formats HEX, RGB et HSL, ainsi qu’avec les palettes, depuis votre navigateur.
- [Palette de couleurs](https://elysiatools.com/fr/tags/color-palette): Découvrez 10 outils de palettes de couleurs en ligne pour travailler avec vos données de couleurs depuis votre navigateur. Les textes ne sont pas conservés et les fichiers sont supprimés après 6 heures.
- [Design System](https://elysiatools.com/fr/tags/design-system): Découvrez 7 outils Design System en ligne. Utilisez-les dans votre navigateur avec un traitement sur les serveurs Elysia Tools.
- [Design Tokens](https://elysiatools.com/fr/tags/design-tokens): Découvrez 5 outils Design Tokens en ligne pour traiter, convertir, valider et gérer vos données depuis votre navigateur.