Extraire les couleurs d'une image (extracteur de couleurs dominantes)

Téléversez une image pour extraire automatiquement ses couleurs dominantes — les couleurs représentatives utilisées dans une photo ou une illustration. Tout le traitement s'effectue entièrement dans votre navigateur ; l'image n'est jamais envoyée à un serveur.

Astuces d'utilisation

  • Cliquez sur le bouton de copie sous chaque échantillon pour copier son code HEX dans le presse-papiers, prêt à coller dans du CSS ou votre outil de design.
  • Choisissez 4, 8 ou 12 couleurs à extraire. Optez pour 4 pour une palette de logo simple, ou 12 pour capturer les variations subtiles d'une photo détaillée.
  • Les zones transparentes des images PNG sont automatiquement exclues, de sorte que les couleurs extraites se concentrent sur le sujet réel plutôt que sur l'arrière-plan.
  • Tout le traitement s'exécute localement dans votre navigateur via l'API Canvas ; l'image elle-même n'est jamais envoyée à un serveur, ce qui la rend sûre même pour des images sensibles.
  • Les couleurs sont classées de la plus fréquente à la moins fréquente. Les premières couleurs affichées occupent la plus grande surface de l'image.

Questions fréquentes

Cet outil utilise un algorithme simple qui quantifie l'image en groupes de couleurs grossiers et renvoie la couleur moyenne du groupe le plus fréquent comme couleur représentative. C'est suffisant pour se faire une idée rapide de la tonalité globale d'une image, mais gardez à l'esprit que ce n'est pas aussi précis que les méthodes de clustering plus rigoureuses (comme k-means) utilisées dans les outils professionnels de palette de couleurs.

Non. Cet outil utilise l'API Canvas pour charger l'image et extraire les couleurs entièrement dans votre navigateur (côté client). Les données de l'image ne sont jamais envoyées à un serveur, ce qui la rend sûre même pour des images sensibles.

Tout format d'image courant qu'une balise de navigateur peut afficher — y compris JPEG, PNG, WebP et GIF — devrait fonctionner, selon les formats acceptés par le sélecteur de fichiers de votre navigateur.

Oui. Chaque couleur est affichée sous forme de code HEX (par exemple #3366cc) que vous pouvez copier dans le presse-papiers en un clic, pour le coller directement dans Figma, Photoshop, CSS ou tout autre outil acceptant les valeurs de couleur HEX.
ツールくん

Anecdote — Le travail de recherche des couleurs de marque à partir de photos

Extraire les couleurs utilisées dans une photo ou un emballage de produit est une tâche courante dans le travail de design web et graphique. Lors de l'élaboration des directives visuelles d'une marque, les designers commencent souvent par extraire des couleurs représentatives de photos ou de logos existants, puis les utilisent comme candidates pour une couleur d'entreprise ou d'accent. Ce qui se faisait autrefois à l'œil nu avec une pipette, couleur par couleur, peut désormais être automatisé grâce à des algorithmes comme l'extraction de couleurs dominantes utilisée ici.

Il existe de nombreux algorithmes d'extraction de couleurs. La méthode de quantification par groupes et de comptage de fréquence utilisée par cet outil arrondit la valeur RGB de chaque pixel à un groupe approximatif et compte le nombre d'occurrences de chaque groupe — une technique simple, peu coûteuse en calcul et rapide à exécuter. Des approches plus avancées, comme le clustering k-means, regroupent les couleurs selon leur distance dans l'espace colorimétrique et peuvent produire des regroupements plus naturels, au prix d'un calcul plus lourd.

Un détail intéressant est à quel point une même image peut sembler différente selon le nombre de couleurs extraites. N'extraire que 4 couleurs révèle la tonalité générale d'une image — si elle penche vers le chaud ou le froid — tandis qu'en extraire 12 commence à capter les variations subtiles dues aux ombres et aux reflets de lumière. Ajuster ce nombre permet d'obtenir différents niveaux de détail à partir de la même image.