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'.

Elysia Tools

Navigation mobile

Design

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

Détails

Ce que cet outil vous aide à faire

Importez une image et l’outil :

La réduit et applique les k-moyennes pour trouver les couleurs dominantes (3 / 5 / 8 / 12 au choix).
Nomme chaque couleur (numérique color1… ou sémantique primary/accent…) avec son % de pixels.
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é.
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.

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

1 exemples

Extraire une palette 5 couleurs avec échelle Tailwind

Importez une image, extrayez 5 couleurs, générez l’échelle 50–950 et exportez en variables CSS préfixées brand.

<div>5 swatches with population %, a base+scale preview row each, and a :root{} CSS-variables block ready to paste.</div>

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

6 réglages

FichiersImportez les fichiers source du flux.1

Image sourcefileRequis

Taille maximale par fichier : 10 MBTypes pris en charge : image/png, image/jpeg, image/webp, image/gif, image/avif

ContenuCollez ou saisissez les valeurs principales.1

Préfixe de tokentextOptionnel

RéglagesAjustez formats, plages, nombres et modes.4

Taille de la paletteselectOptionnelÉchelle de teintesselectOptionnelFormat de sortieselectOptionnelStyle de nommageselectOptionnel

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

De la palette d’image aux design tokens

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Extraction de palette pour un thème Tailwind

2. Génération de variables CSS pour un Design System

FAQ

Exemples de Traitement d'Images Web Python

Exemples de Traitement d'Images Web TypeScript

Exemples de Traitement d'Images Android Java

Exemples de Traitement d'Images Android Kotlin

Générateur de Data URI

Conversion d'Images en Lot

Rognage d'Images par Lot

Redimensionneur d'Image

Outils de conversion de formats d image et d export anime

Outils d interchange JSON et de traduction de formats

Outils d inspection, de diff et de transformation JSON

Outils de nettoyage, finition et preparation d images en lot