Image vers Variables :root CSS · Prêt à Coller · Export SCSS Inclus
Extrayez les couleurs dominantes de n'importe quelle image et obtenez instantanément un bloc CSS :root avec des propriétés personnalisées à coller dans n'importe quel projet. Pas de saisie manuelle de couleurs, pas d'erreurs de transcription hex — l'extracteur produit des variables propres dérivées directement des données pixel réelles de votre image. L'export SCSS est également disponible.
Ouvrez l'extracteur et commencez immédiatement — sans compte, rien n'est stocké sur un serveur.
Ouvrir l'Extracteur de Palette →Les propriétés CSS personnalisées déclarées sur :root agissent comme des design tokens globaux. En les générant depuis une image, vous ancrez votre système de couleurs à une référence visuelle réelle plutôt qu'à une estimation abstraite. L'export inclut un commentaire avec la valeur hex à côté de chaque variable pour que vous puissiez lire la couleur réelle d'un coup d'œil sans ouvrir de sélecteur. Vous pouvez aussi renommer les variables pour correspondre à la convention de nommage de votre projet avant de coller.
Les propriétés CSS personnalisées, aussi appelées variables CSS, sont des déclarations qui commencent par -- et sont limitées à un sélecteur. Les déclarer sur :root les rend disponibles dans tout le document. On les utilise avec var(--nom-propriété) partout dans la feuille de style.
Collez le bloc :root en haut de votre fichier CSS, puis référencez chaque couleur avec var(--color-1), var(--color-2), etc. Cela permet de changer tout le thème en modifiant un seul bloc central plutôt que de chercher des codes hex individuels partout dans le code.
Oui. Le panneau d'export propose les deux formats : propriétés CSS personnalisées :root et syntaxe de variables SCSS avec $. L'export SCSS utilise la notation $color-1, $color-2… pour être directement utilisable dans un projet Sass ou SCSS sans modification.