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

De la palette d’image aux design tokens

Exemples

1. Extraction de palette pour un thème Tailwind

Développeur Front-End

Contexte

Un développeur doit intégrer une nouvelle maquette basée sur une photo d'illustration fournie par le client.

Problème

Il a besoin d'extraire les 5 couleurs clés de l'image et de générer la configuration Tailwind correspondante avec des échelles de teintes.

Utilisation

Téléverser l'image d'illustration, sélectionner une taille de palette de 5 couleurs, choisir l'échelle Tailwind (50-950) et le format de sortie Tailwind.

{
  "paletteSize": "5",
  "scale": "tailwind",
  "format": "tailwind",
  "prefix": "theme",
  "naming": "semantic"
}

Résultat

Un objet de configuration JavaScript prêt à être inséré dans le fichier tailwind.config.js avec les échelles de teintes générées.

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

UI Designer

Contexte

L'équipe design a validé une image d'ambiance pour la nouvelle identité visuelle d'une application web.

Problème

L'intégrateur doit déclarer rapidement ces couleurs sous forme de variables CSS personnalisées avec un préfixe spécifique.

Utilisation

{
  "paletteSize": "8",
  "scale": "none",
  "format": "css",
  "prefix": "brand",
  "naming": "semantic"
}

De la palette d’image aux design tokens | Elysia Tools

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

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

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