Identifier le code exact d'une couleur est un besoin constant en design : reproduire la couleur d'un logo de référence, extraire la palette d'une photo d'inspiration, garder la cohérence entre différents supports d'une identité visuelle. Selon le contexte — si vous avez accès au fichier, si la couleur est dans une image en ligne, sur un site ou sur une photo prise avec le mobile — la méthode la plus efficace varie.
Comprendre les formats de code couleur
Avant de passer aux méthodes, il vaut la peine de comprendre les trois formats les plus utilisés pour représenter les couleurs numériquement :
| Format | Exemple | Où c'est utilisé |
|---|---|---|
| HEX | #3ecf8e | CSS, HTML, design web, la plupart des outils de design |
| RGB | rgb(62, 207, 142) | CSS, édition d'image, impression numérique |
| HSL | hsl(152, 57%, 53%) | CSS, manipulation des couleurs en design, ajustements de teinte |
| CMJN | C:70 M:0 J:31 N:19 | Impression graphique (flyers, cartes, emballages) |
HEX et RGB représentent la même information sous des formats différents — il est toujours possible de convertir de l'un à l'autre. HSL décrit la couleur en termes de teinte, saturation et luminosité, plus intuitif pour des ajustements manuels. CMJN est exclusif à l'impression.
Méthode 1 : Extracteur de Couleurs en ligne (le plus rapide)
Pour identifier les couleurs dominantes d'une image entière — ou localiser un pixel spécifique avec précision — un extracteur de couleurs en ligne est la solution la plus directe. Il suffit de téléverser l'image et l'outil identifie automatiquement les couleurs les plus présentes, avec les codes HEX prêts à copier.
L'Extracteur de Couleurs d'ImageTools analyse n'importe quelle photo ou image et renvoie les couleurs dominantes avec leurs codes HEX respectifs. Tout fonctionne directement dans le navigateur — l'image ne quitte pas votre appareil.
- Accédez à l'outil d'extraction de couleurs.
- Téléversez l'image ou glissez le fichier dans la zone indiquée.
- L'outil identifie automatiquement les couleurs les plus présentes dans l'image.
- Cliquez sur n'importe quelle couleur pour copier le code HEX.
🎨 Astuce en plus : après avoir extrait les couleurs dominantes d'une image, utilisez le Générateur de Palette pour créer des harmonies complémentaires, analogues ou monochromatiques à partir de n'importe laquelle de ces couleurs — et étendre la palette de votre projet.
Extrayez les couleurs de n'importe quelle image maintenant
Téléversez une photo et obtenez les codes HEX des couleurs dominantes en quelques secondes. Gratuit, sans inscription, traité dans votre navigateur.
Extraire les couleurs de l'imageMéthode 2 : Utiliser la pipette du navigateur (Chrome DevTools)
Si la couleur que vous voulez identifier se trouve sur un site — dans le fond d'une page, sur un bouton, dans un logo — Chrome dispose d'un outil intégré pour cela.
- Ouvrez le site dans Google Chrome.
- Appuyez sur F12 (ou clic droit et choisissez « Inspecter »).
- Dans le panneau DevTools, cliquez sur l'icône de curseur en haut à gauche (ou appuyez sur Ctrl+Maj+C).
- Passez la souris sur n'importe quel élément de la page — DevTools affichera les propriétés CSS, y compris les couleurs en HEX ou RGB.
- Pour ouvrir le sélecteur de couleur visuel, cliquez sur le carré coloré à côté de n'importe quelle valeur de couleur dans le panneau CSS.
DevTools de Chrome intègre aussi un Color Picker : en cliquant sur le carré de couleur dans le panneau de styles CSS, un sélecteur s'ouvre permettant de naviguer dans le spectre et de voir les valeurs en HEX, RGB, HSL et HSLA simultanément.
Méthode 3 : Pipette dans Canva
Si vous travaillez dans Canva et voulez capturer une couleur d'une image déjà présente dans votre projet :
- Sélectionnez l'élément dont vous voulez modifier le remplissage (un texte, une forme ou un fond).
- Cliquez sur la couleur de l'élément dans le panneau latéral pour ouvrir le sélecteur de couleur.
- Dans le sélecteur, cliquez sur l'icône de pipette (eyedropper).
- Cliquez sur n'importe quel point de l'image dans le canvas pour capturer la couleur exacte de ce pixel.
- Le code HEX s'affichera dans le champ texte du sélecteur.
Méthode 4 : Pipette dans Photoshop et Illustrator
Photoshop
Avec l'image ouverte, sélectionnez l'outil Pipette (raccourci : touche I). Cliquez sur n'importe quel point de l'image — la couleur capturée s'affiche dans la case de couleur du panneau d'outils. Pour voir le code HEX, double-cliquez sur la case de couleur (ouvre le Color Picker) et la valeur HEX apparaît dans le champ en bas à droite.
Illustrator
Avec le fichier ouvert, sélectionnez un objet puis cliquez sur la couleur de remplissage ou de contour dans le panneau d'outils. Dans le Color Picker qui s'ouvre, le code HEX se trouve dans le champ inférieur. Vous pouvez aussi utiliser l'outil Pipette (raccourci : I) pour capturer la couleur de n'importe quel point du canvas.
Méthode 5 : Extension de navigateur — ColorZilla
L'extension ColorZilla (disponible pour Chrome et Firefox) ajoute une pipette permanente à votre navigateur. Une fois installée, vous pouvez :
- Capturer la couleur de n'importe quel pixel sur n'importe quel site en un clic.
- Voir le code en HEX, RGB et HSL immédiatement.
- Copier la valeur en un clic.
- Accéder à un historique des dernières couleurs collectées.
C'est la solution la plus pratique pour ceux qui doivent capturer des couleurs de sites fréquemment, sans avoir à ouvrir DevTools à chaque fois.
Méthode 6 : Application de capture de couleur sur mobile
Pour identifier les couleurs d'objets physiques — la couleur d'un mur, d'un produit, d'un emballage — ou d'images sur mobile, il existe des applications spécifiques :
- Color Grab (Android) — pointez la caméra vers n'importe quelle surface et capturez le code HEX en temps réel.
- Palette Cam (iOS/Android) — extrait la palette complète de couleurs de photos prises sur le moment ou de la galerie.
- Canva (iOS/Android) — la pipette de Canva mobile fonctionne pour les images importées.
Comment utiliser les codes de couleur extraits
Une fois le code HEX d'une couleur identifié, les usages les plus courants sont :
En CSS / développement web
Utilisez directement dans le code : color: #3ecf8e; ou background-color: #3ecf8e;. Pour des variantes plus claires ou foncées, utilisez HSL — c'est bien plus intuitif d'ajuster la luminosité que de manipuler manuellement des valeurs HEX.
Dans Canva, Figma ou Adobe
Collez le code HEX dans le champ de couleur de n'importe quel élément. Tous les principaux outils de design acceptent le HEX directement.
Pour créer une palette complète
Une fois la couleur de base identifiée, le Générateur de Palette de Couleurs génère automatiquement des combinaisons harmonieuses — complémentaire, analogue, triade et monochromatique — avec tous les codes en HEX, RGB et HSL prêts à l'emploi pour le projet.
Pour l'impression
Convertissez le HEX en CMJN avant d'envoyer à l'imprimeur. Les couleurs à l'écran (RGB/HEX) et à l'impression (CMJN) ont des gammes différentes — ce qui semble identique sur le moniteur peut avoir une variation visible une fois imprimé. Des outils comme Adobe Illustrator et Affinity Designer effectuent cette conversion automatiquement à l'export pour l'impression.
Pourquoi la couleur extraite peut ne pas être exactement celle voulue
Un détail important : les images photographiques ont rarement une couleur parfaitement uniforme sur une zone. Ce qui semble être un bleu uni sur une photo peut avoir des dizaines de variations subtiles de pixel à pixel, causées par l'éclairage, la compression JPG et le bruit de la caméra. La pipette capture la couleur exacte d'un pixel spécifique — qui peut être légèrement différente du « bleu général » que vous essayez d'identifier.
Pour les zones photographiques, l'idéal est d'utiliser un extracteur qui calcule la couleur dominante d'une région — comme le fait l'Extracteur de Couleurs — plutôt que de capturer un seul pixel. Le résultat est une couleur plus représentative et plus utile pour le design.
Questions fréquentes
#3ecf8e et RGB 62, 207, 142 sont la même couleur. Pour le design web et le CSS, utilisez HEX (plus courant et plus court). Pour les usages nécessitant les trois canaux séparés — certaines plateformes d'impression, applis d'édition — utilisez RGB. N'importe quel outil convertit entre les deux en quelques secondes.