Mode d’emploi : Pipette couleur d'image
- Glissez-déposez l'image dont vous voulez connaître les couleurs, ou cliquez pour la choisir. Une capture d'écran peut aussi être collée directement avec Ctrl+V.
- Déplacez la souris sur l'image : la couleur sous le curseur s'affiche en temps réel. Cliquez à l'endroit voulu pour figer la couleur et l'ajouter à l'historique.
- Cliquez sur le bouton HEX, RGB ou HSL pour copier le code couleur dans ce format.
- Consultez plus bas les couleurs dominantes : les principales teintes de l'image et la part qu'elles occupent.
Comment trouver le code couleur d'une photo
Une image numérique est composée de petits points (les pixels). Chaque pixel contient l'intensité de trois lumières, rouge (R), vert (G) et bleu (B), exprimée par un nombre de 0 à 255. L'outil lit directement la valeur RGB du pixel cliqué et l'affiche dans les formats suivants :
| Format | Exemple | Usage courant |
|---|---|---|
| HEX | #2563EB | Web (CSS), saisie des couleurs dans Figma ou Photoshop |
| RGB | rgb(37, 99, 235) | CSS, programmation, montage vidéo |
| HSL | hsl(221, 83%, 53%) | Pour ajuster la teinte, la saturation et la luminosité |
Sur une photo, un même objet n'a pas exactement la même couleur d'un pixel à l'autre, à cause de l'éclairage et de la compression. Si vous avez besoin d'une couleur précise, comme celle d'un logo, choisissez la zone unie la plus large possible. Pour passer à un autre format (CMJN, etc.), utilisez le convertisseur de codes couleur.
Comment sont extraites les couleurs dominantes (palette)
Les couleurs dominantes sont calculées à partir de plusieurs milliers de pixels prélevés uniformément dans toute l'image. Ces pixels sont regroupés par couleurs proches grâce à la méthode de partitionnement en k-moyennes (k-means). L'outil calcule la couleur moyenne de chaque groupe, puis les affiche de la plus présente à la moins présente dans l'image. Les zones transparentes ne sont pas prises en compte.
Ces couleurs sont un bon point de départ pour choisir l'harmonie d'un site web ou d'une présentation. Prenez la couleur la plus présente comme fond et la deuxième ou la troisième comme couleur d'accent : vous obtiendrez une mise en page qui s'accorde bien avec la photo. Plus vous demandez de couleurs, plus les nuances apparaissent en détail.
- 5 couleurs : une palette simple, idéale pour une charte graphique sobre.
- 6 couleurs : le réglage par défaut, un bon équilibre.
- 8 couleurs : pour repérer des nuances secondaires.
Retrouver la couleur d'un site web ou d'une appli avec une capture d'écran
- Sur l'écran dont vous voulez connaître la couleur, capturez une zone avec
Win + Maj + Ssous Windows ouCmd + Maj + 4sur Mac. - Revenez sur cette page et appuyez sur
Ctrl + V(Cmd + Vsur Mac) : la capture s'ouvre immédiatement. - Cliquez sur le bouton ou le texte voulu pour copier son code couleur.
Selon les réglages de couleur de l'écran, le mode sombre ou le zoom du navigateur, la couleur capturée peut différer légèrement de la valeur d'origine. Pour une couleur de marque exacte, consultez le fichier de conception d'origine ou la charte graphique officielle.
Questions fréquentes
Mon image est-elle envoyée sur un serveur ?
Peut-on choisir une couleur sur smartphone ?
La couleur obtenue diffère de celle affichée dans mon logiciel de graphisme. Pourquoi ?
L'historique des couleurs choisies est-il enregistré ?
Quelle est la différence entre HEX et RGB ?
#2563EB pour rgb(37, 99, 235).