Extracteur de palette de couleurs d'image

Déposez une image pour en extraire la couleur dominante et une palette complète — copiez chaque échantillon en HEX, RGB ou HSL, ou exportez des variables CSS et des couleurs Tailwind. Elle ne quitte jamais votre navigateur.

L'extracteur de palette de couleurs d'image décode votre image et analyse ses couleurs entièrement dans votre navigateur. L'image n'est jamais téléversée — aucune donnée d'image ni couleur extraite n'est envoyée à ArrayKit.

Ouvrir le sélecteur de couleur d'image

À propos de Palette depuis une image

L'extracteur de palette de couleurs d'image transforme n'importe quelle image en un jeu de couleurs utilisable. Déposez ou choisissez une photo, un logo, une capture d'écran ou une maquette, et il fait ressortir l'unique couleur dominante ainsi qu'une palette des teintes les plus présentes dans l'image. Chaque échantillon est affiché en HEX, RGB et HSL, pour que vous puissiez reprendre une valeur directement dans du CSS, un jeton de design ou un pot de peinture. Réglez la taille de la palette de quatre à douze couleurs, copiez un échantillon isolé ou tous les codes HEX d'un coup, ou récupérez un bloc de variables CSS :root prêt à l'emploi et un extrait de couleurs Tailwind pour votre thème. Il est conçu pour les designers, les développeurs front-end et toute personne qui doit assortir une palette de marque à partir d'une image. L'image est décodée et ses couleurs sont lues sur votre appareil — rien n'est téléversé.

Fonctionnalités

Comment utiliser Palette depuis une image

  1. Cliquez sur la zone de dépôt ou faites-y glisser un fichier image
  2. Lisez la couleur dominante et les échantillons de la palette extraite
  3. Basculez les échantillons entre HEX, RGB et HSL, ou changez la taille de la palette
  4. Copiez un échantillon isolé, tous les codes HEX, ou le bloc CSS ou Tailwind

Exemple

Entrée

Uploaded: brand-hero.png (blue / green / red artwork)

Sortie

:root {
  --color-1: #2563eb;
  --color-2: #10b981;
  --color-3: #ef4444;
}

Une palette de trois couleurs devient un bloc de variables CSS prêt à copier.

Erreurs courantes et dépannage

Foire aux questions

Combien de couleurs puis-je extraire d'une image ?
Vous pouvez extraire de quatre à douze couleurs dans la palette, plus l'unique couleur dominante affichée à part. Changez la taille de la palette à tout moment et les échantillons, les variables CSS et le bloc Tailwind se mettent à jour instantanément.
Quelle est la différence entre la couleur dominante et la palette ?
La couleur dominante est la couleur la plus représentative de toute l'image, affichée avec son HEX, son RGB et son HSL. La palette est un ensemble des couleurs les plus présentes dans l'image, classées selon leur importance visuelle.
Puis-je exporter la palette en variables CSS ou en couleurs Tailwind ?
Oui. L'outil génère un bloc :root de propriétés personnalisées --color-N et un objet de couleurs Tailwind indexé palette-1, palette-2, et ainsi de suite. Copiez l'un ou l'autre en un clic et collez-le dans votre projet.
De quels formats d'image puis-je extraire une palette ?
PNG, JPEG, WebP, SVG, GIF, AVIF, BMP et ICO fonctionnent tous. Déposez ou choisissez le fichier et la palette est générée à partir des pixels décodés dans votre navigateur.
Comment construire une palette qui correspond à ma marque ?
Téléversez votre logo, une photo de produit ou une capture d'écran de votre site. L'extracteur fait ressortir les couleurs les plus présentes pour que vous puissiez figer les valeurs HEX de la marque, puis les exporter en variables CSS ou en jetons Tailwind.
Pourquoi deux de mes échantillons sont-ils ressortis presque identiques ?
Les images dominées par une seule teinte produisent plusieurs nuances proches. Réduisez la taille de la palette pour les fusionner, ou choisissez une image plus variée en couleurs pour un étalement plus large.

Outils associés

Tous les outils ArrayKit