# De la palette d’image aux 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 > Page canonique: https://elysiatools.com/fr/tools/image-to-design-tokens - **Catégorie:** Design - **Mots-clés:** palette, tokens, couleur, css, tailwind ## Présentation Importez une image et l’outil : 1. La réduit et applique les **k-moyennes** pour trouver les couleurs dominantes (3 / 5 / 8 / 12 au choix). 2. Nomme chaque couleur (numérique `color1`… ou sémantique `primary`/`accent`…) avec son % de pixels. 3. Génère optionnellement une **échelle de teintes** (Tailwind 50–950 ou Material 100–900) en conservant teinte et saturation et en faisant varier la luminosité. 4. Sérialise le résultat en variables CSS, SCSS, config Tailwind, tokens JSON ou les quatre. Choisissez un `préfixe` et un style de nommage, copiez le code généré — votre design system consomme la palette immédiatement. ## Entrées - **Image source** (file): PNG, JPG, WebP… - **Taille de la palette** (select) - **Échelle de teintes** (select) - **Format de sortie** (select) - **Préfixe de token** (text): e.g. brand, app, theme - **Style de nommage** (select) ## Quand l'utiliser - Lors de la création d'une charte graphique ou d'un design system à partir d'une image d'inspiration ou d'une photo de marque. - Pour générer rapidement des échelles de teintes (Tailwind ou Material) cohérentes sans ajuster manuellement la luminosité. - Pour exporter directement des palettes de couleurs dans le format technique de votre projet (CSS, SCSS, Tailwind JS ou JSON). ## Fonctionnement - Téléversez votre image source au format PNG, JPG, WebP, GIF ou AVIF. - Configurez le nombre de couleurs à extraire (de 3 à 12) et choisissez le type d'échelle de teintes (Tailwind, Material ou aucune). - Définissez le style de nommage (numérique ou sémantique), le préfixe des variables et le format d'exportation souhaité. - Copiez le code généré contenant vos variables ou vos tokens de design directement dans votre projet. ## Cas d'usage - Extraction de la palette de couleurs d'un logo pour initialiser les variables CSS d'un nouveau site web. - Génération d'une configuration Tailwind complète à partir d'une photographie d'ambiance pour un projet créatif. - Création de tokens de design au format JSON pour alimenter un outil de design system multi-plateforme. ## Questions fréquentes ### Comment l'outil extrait-il les couleurs de l'image ? Il utilise l'algorithme de clustering k-means pour regrouper les pixels similaires et identifier les teintes les plus représentatives. ### Quels formats d'exportation sont pris en charge ? Vous pouvez exporter vos tokens en variables CSS, variables SCSS, configuration Tailwind (JS) ou en format JSON. ### Puis-je générer des échelles de couleurs pour Tailwind ? Oui, l'outil peut générer automatiquement une échelle de teintes de 50 à 950 en faisant varier la luminosité. ### Quels formats d'image puis-je utiliser ? L'outil accepte les fichiers PNG, JPEG, WebP, GIF et AVIF jusqu'à 10 Mo. ### Qu'est-ce que le nommage sémantique dans cet outil ? Il attribue des rôles comme 'primary' ou 'accent' aux couleurs extraites au lieu de simples numéros comme 'color1'. ## Outils associés - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Conversion d'Images en Lot](https://elysiatools.com/fr/tools/batch-convert): Convertir plusieurs images en différents formats avec paramètres de qualité - [Rognage d'Images par Lot](https://elysiatools.com/fr/tools/image-batch-crop): Rogner plusieurs images à des dimensions spécifiques ou un rapport d'aspect avec un positionnement personnalisé. Renvoie les images rognées en téléchargement ZIP. - [Redimensionneur d'Image](https://elysiatools.com/fr/tools/image-resize): Outil professionnel de redimensionnement d'image avec plusieurs méthodes, préservation du rapport d'aspect et conversion de format, y compris le flou de fond, supportant GIF/Animated WebP/APNG et JPEG/PNG/WEBP. - [Convertisseur de profondeur d’image vers PNG](https://elysiatools.com/fr/tools/image-to-bit-depth-png): Convertit les images vers des profondeurs PNG monochromes, indexées, grises, RGB ou RGBA exactes avec vérification. - [Convertisseur batch d'images en WebP](https://elysiatools.com/fr/tools/image-to-webp-batch-converter): Convertit des images ou les images d'un ZIP en WebP et renvoie une archive ZIP - [Planche Contact PDF](https://elysiatools.com/fr/tools/pdf-photo-contact-sheet): Genere une planche contact avec miniatures, noms de fichiers et EXIF - [Conversion d'Images par Lot](https://elysiatools.com/fr/tools/image-batch-convert): Convertir plusieurs fichiers image entre différents formats comme JPG, PNG, WebP, AVIF, TIFF, GIF avec réglages de qualité et traitement par lot ## Exemples - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Web TypeScript](https://elysiatools.com/fr/samples/web-image-processing-typescript): Exemples de traitement d'images Web TypeScript incluant lecture/sauvegarde, redimensionnement et conversion de format - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Android Kotlin](https://elysiatools.com/fr/samples/android-image-processing-kotlin): Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format ## Contenu associé - [Outils de conversion de formats d image et d export anime](https://elysiatools.com/fr/hubs/image-convert): Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub. - [Outils d interchange JSON et de traduction de formats](https://elysiatools.com/fr/hubs/json-convert): Comparez les outils de conversion JSON pour CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN et d autres formats structures dans un meme hub. - [Outils d inspection, de diff et de transformation JSON](https://elysiatools.com/fr/hubs/json-utility): Regroupe dans un meme hub les outils de formatage JSON, comparaison, inspection de chemins, validation de schema, fusion et transformation pour les workflows API et donnees. - [Outils de nettoyage, finition et preparation d images en lot](https://elysiatools.com/fr/hubs/image-utility): Regroupe dans un meme hub les outils de nettoyage d image, rognage, marge, encadrement, redimensionnement et compression par lot, filigrane et finition visuelle.