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.
Comment extraire les couleurs d'une image
Lorsque vous souhaitez savoir quelles couleurs dominent une photo, une illustration ou un logo, les repérer une par une avec une pipette est fastidieux. Cet outil fait ce travail à votre place : il suffit de téléverser une image pour qu'il liste automatiquement les couleurs représentatives — les fameuses couleurs dominantes — qui occupent les plus grandes surfaces de l'image. Les codes HEX et les valeurs RGB s'affichent aussitôt, prêts à être copiés directement dans du CSS, Figma, Photoshop ou tout autre outil de design que vous utilisez.
En coulisses, l'outil dessine l'image sur un élément Canvas du navigateur et en lit les données de pixels. Les couleurs proches sont regroupées (quantifiées) en groupes assez larges, le nombre d'occurrences de chaque groupe est compté, puis les groupes les plus fréquents sont retenus comme couleurs représentatives. Les zones transparentes d'une image PNG sont automatiquement exclues de ce comptage, si bien qu'un sujet détouré sur fond transparent donne des résultats centrés sur les couleurs du sujet lui-même plutôt que sur l'arrière-plan. Les images de grande taille sont redimensionnées en interne avant l'analyse, de sorte que même des photos de plusieurs mégapixels sont traitées presque instantanément. Comme tout le calcul s'effectue localement dans votre navigateur, les données de l'image ne quittent jamais votre appareil, ce qui rend l'outil sûr même pour des photos sensibles ou privées.
Étapes pour extraire les couleurs d'une image
- Téléverser une image Glissez-déposez un fichier image dans la zone prévue à cet effet, ou cliquez dessus pour en choisir un via la boîte de dialogue de sélection.
- Choisir le nombre de couleurs à extraire Sélectionnez 4, 8 ou 12 dans l'option « Nombre de couleurs à extraire ». Le résultat est recalculé instantanément à chaque changement de sélection, sans avoir besoin de retéléverser l'image.
- Examiner les échantillons extraits Les échantillons de couleur s'affichent classés du plus fréquent au moins fréquent. Chaque échantillon est accompagné de son code HEX et de ses valeurs RGB.
- Copier un code HEX Cliquez sur le bouton de copie situé sous un échantillon pour envoyer ce code HEX directement dans le presse-papiers, prêt à être collé dans du CSS ou une application de design.
Astuces pour en tirer le meilleur parti
- 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.
Cas d'usage de cet outil
Construire une palette à partir d'un logo existant
Téléversez l'image d'un logo pour en extraire les couleurs exactes sous forme de codes HEX, ce qui facilite l'harmonisation visuelle d'un site web ou d'une présentation avec l'identité de la marque.
Trouver des candidats de couleur de marque à partir de photos produit
Extraire les couleurs représentatives d'un emballage ou d'une photo produit vous donne une base concrète pour choisir une couleur institutionnelle ou une couleur d'accent pour une page de campagne.
Comprendre l'équilibre chromatique d'une photo ou d'une illustration
Basculer entre 4 et 12 couleurs extraites permet de saisir d'un coup d'œil la tonalité générale d'une image, tout en révélant des nuances plus fines lorsqu'on regarde plus en détail.
Transmettre des couleurs au CSS ou à un outil de design
Copiez un code HEX extrait et collez-le directement dans une variable CSS ou dans le sélecteur de couleur de Figma ou Photoshop, sans avoir à retranscrire les couleurs à l'œil nu.
Glossaire
- Couleur dominante
- La couleur qui occupe la plus grande surface d'une image, ou qui y apparaît le plus fréquemment. Les échantillons listés par cet outil correspondent exactement à ces couleurs dominantes, classées selon la part de l'image qu'elles couvrent.
- Code HEX
- Une notation représentant les composantes rouge, verte et bleue d'une couleur sous forme d'un nombre hexadécimal à deux chiffres chacune, par exemple « #3366cc ». Le « # » est suivi du rouge, puis du vert, puis du bleu ; ce format est largement utilisé en CSS et dans les logiciels de design.
- Valeur RGB
- Une manière de spécifier une couleur à l'aide des trois couleurs primaires de la lumière — rouge, vert et bleu —, chacune exprimée par un nombre compris entre 0 et 255. La combinaison de ces trois valeurs permet de reproduire presque toutes les couleurs visibles.
- Quantification des couleurs
- Le processus consistant à arrondir des couleurs proches pour les regrouper en un nombre plus restreint de groupes. Cet outil divise chaque canal RGB en groupes de 32 unités, de sorte que de légères variations de couleur dues, par exemple, à la compression JPEG soient comptées comme la même couleur plutôt que traitées comme du bruit.
- Valeur alpha (transparence)
- Une valeur décrivant l'opacité de chaque pixel d'une image. Les zones transparentes d'un PNG avec transparence ont une valeur alpha faible, et cet outil exclut automatiquement ces pixels de son comptage des couleurs.
- API Canvas
- Une interface JavaScript du navigateur permettant de dessiner et d'analyser des images et des graphiques. Cet outil l'utilise pour lire une image pixel par pixel et en extraire les couleurs entièrement sur votre appareil, sans jamais envoyer les données à un serveur.
Questions fréquentes
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.