Pipette couleur pour image
Cliquez sur n'importe quel point d'une photo et copiez le code de sa couleur en HEX, RVB, TSL, TSV, CMJN ou OKLCH. Dans Chrome et Edge, vous pouvez aussi relever une couleur n'importe où sur votre écran. L'outil liste en plus les couleurs principales de l'image et indique si le texte noir ou blanc reste lisible sur chacune.
Gratuit · Sans inscription · Sans envoi
Étape 1 : Ajoutez votre image
JPG, PNG ou WebP. Elle reste sur votre appareil.
Déposez une image ici
Cliquez ensuite sur n'importe quel point pour voir son code couleur. Rien n'est envoyé.
Une photo de démonstration est déjà ouverte pour que vous essayiez l'outil tout de suite. Ajoutez votre propre image pour la remplacer. Les images sont ouvertes dans votre navigateur et jamais envoyées.
Ce que fait une pipette de couleur sur une image
Une photo est une grille de pixels, et chaque pixel garde une couleur sous la forme de trois nombres : la quantité de rouge, de vert et de bleu qu'il contient. Cet outil lit ces nombres à l'endroit où vous cliquez et les écrit dans les formats qu'utilisent les designers et les développeurs.
C'est utile quand vous avez l'image mais pas le code de la couleur. Reprendre les couleurs d'un logo, copier une teinte d'une capture d'écran de site ou fondre la photo d'un produit dans le fond d'une page reviennent au même geste : viser la couleur et copier le code.
Une loupe montre les pixels exacts sous le curseur, de sorte que vous pouvez viser un seul pixel plutôt qu'une tache. La couleur visée s'affiche pendant que vous bougez, et un clic la relève et marque l'endroit sur la photo.
| Format | Exemple | Où l'utiliser |
|---|---|---|
| HEX | #FF7D3D | CSS, outils de design, chartes graphiques |
| RVB | rgb(255, 125, 61) | CSS, code, éditeurs d'image |
| TSL | hsl(20, 100%, 62%) | Créer des versions plus claires ou plus foncées |
| TSV | hsb(20, 76%, 100%) | Applis de design avec curseurs TSV |
| CMJN | cmyk(0%, 51%, 76%, 0%) | Point de départ pour l'impression |
| OKLCH | oklch(0.730 0.176 44) | CSS moderne, dégradés homogènes |
L'exemple est la carte orange de la photo de démonstration. Vous voulez utiliser une couleur relevée comme bordure ? Collez son code HEX dans Ajouter une marge à une image.
Comment relever une couleur sur une image
- 1
Utilisez l'exemple ou ajoutez votre image
Une photo de démonstration est déjà ouverte. Pour utiliser la vôtre, choisissez un fichier JPG, PNG ou WebP, déposez-le dans l'outil ou collez une capture avec Ctrl+V ou Cmd+V.
- 2
Cliquez sur la couleur voulue
Déplacez le curseur sur l'image pour voir les couleurs dans la loupe, puis cliquez ou touchez pour en choisir une. La couleur relevée s'affiche aussitôt et est repérée sur la photo. Dans Chrome ou Edge, vous pouvez aussi prendre une couleur n'importe où sur votre écran.
- 3
Copiez le code
Appuyez sur Copier à côté de HEX, RVB, TSL ou OKLCH. Sous la photo, une palette liste ses couleurs principales, et un clic sur l'une d'elles affiche aussi ses codes.
Fonctions de la pipette à couleur
Chaque fonction ci-dessous marche dans votre navigateur, sans inscription. Les figures utilisent la photo de démonstration et une seconde photo, et tous les nombres viennent de leurs pixels réels. Les navigateurs décodent le JPEG de façon légèrement différente : un code peut donc différer du vôtre de quelques niveaux.
Relever le pixel exact
Loupe · pixel exact
Une loupe suit le curseur et montre les pixels alentour sous forme de grands carrés, avec un cadre rouge sur celui qu'un clic relèvera. Le point relevé reçoit un repère rempli de sa propre couleur, et les codes s'affichent à côté de la photo. Sur la figure, chaque anneau est un clic : le point 2, sur la carte mandarine, vaut #FF7D3D, soit rgb(255, 125, 61) ou hsl(20, 100%, 62%). Sur un écran tactile, touchez l'endroit voulu. Une grande photo est affichée plus petite que sa taille réelle, la souris peut donc sauter des pixels. Les flèches déplacent d'un seul pixel à la fois, ou de dix avec Maj, et la ligne sous la photo indique la position du pixel.
Voir les couleurs principales automatiquement
De 2 à 12 couleurs
Chaque image reçoit sous elle une bande de palette, construite à partir de ses propres pixels. Utilisez − et + pour afficher de 2 à 12 couleurs, cliquez sur un segment pour voir ses codes ou téléchargez la bande en PNG. Ici, le ciel turquoise pâle occupe le plus de place, environ 34 %, donc #ABC7C1 ouvre la bande, suivi d'un brun foncé (#6C513F, 21 %), d'un presque-noir (#3C3D35, 17 %) et de trois tons terre plus clairs. Survolez un segment pour voir sa part.
Vérifier le contraste du texte blanc et noir
WCAG AA
Chaque couleur affiche son contraste avec du texte blanc et noir, marqué comme réussi ou non selon le niveau AA des WCAG (4,5:1 pour du texte normal). L'outil ne teste que le texte blanc et noir. La figure teste quatre pixels exacts de la photo des montgolfières. Sur le bleu ciel #A1CDD0, le blanc obtient 1,7:1 et le noir 12,2:1, donc seul le noir passe. La terre cuite #A5493E est l'inverse pour du texte normal : 5,8:1 avec le blanc et 3,6:1 avec le noir, ce qui franchirait tout de même le seuil de 3:1 du grand texte. La roche à l'ombre #3B443F passe avec le blanc à 10,1:1, et le sable #C8A06F avec le noir à 8,7:1.
HEX · RVB · TSL · TSV · CMJN · OKLCH
Six formats de couleur, un clic chacun
Chaque format a son propre bouton Copier : vous collez une valeur directement dans du CSS, une appli de design ou une charte graphique. L'outil donne aussi la couleur CSS la plus proche, comme coral ou tomato, et signale quand votre couleur correspond exactement.
Chrome et Edge
Relever n'importe où sur l'écran
Le bouton pipette prend une couleur dans n'importe quelle fenêtre ouverte, un site web ou une autre appli compris, et pas seulement dans l'image. Échap pour annuler. Les navigateurs sans cette fonction, comme Firefox et Safari, affichent une courte explication à la place du bouton.
JPG · PNG · WebP · jusqu'à 20 MB
Démarrer tout de suite, apporter votre image
Au chargement de la page, une photo de démonstration est ouverte, avec une couleur déjà relevée. Remplacez-la avec Utiliser votre image, en déposant un fichier dans l'outil ou en collant une capture. Tout fonctionne dans votre navigateur et rien n'est envoyé.
Conseils pour mieux relever les couleurs
Visez le milieu d'une zone
Les pixels du bord mélangent les deux couleurs qui s'y rencontrent. Cliquez bien à l'intérieur d'une surface et vérifiez à la loupe que le cadre rouge se trouve sur une teinte uniforme.
Partez de la palette
La palette liste les couleurs qui couvrent le plus de l'image. Appuyez sur + pour répartir les grandes zones en davantage de teintes, puis cliquez sur un segment pour voir ses codes.
Utilisez du PNG pour les logos et les visuels plats
La compression JPEG étale la couleur autour des bords nets. Un export PNG d'un logo donne des codes propres et exacts.
Testez la couleur avant de l'utiliser
Chaque couleur relevée affiche son contraste avec du texte blanc et noir. Vérifiez-le avant de poser du texte dessus.
Pourquoi une couleur relevée n'est pas toujours celle qu'on attendait
Deux points qui se ressemblent peuvent avoir des codes différents
La compression JPEG décale légèrement les valeurs des pixels par petits blocs, si bien qu'une zone qui paraît unie peut varier de quelques niveaux d'un pixel à l'autre. Si un code paraît un peu décalé, cliquez un ou deux pixels plus loin et comparez. Les visuels plats enregistrés en PNG donnent les résultats les plus stables.
L'éclairage change la couleur sur une photo
Les ombres, les hautes lumières, la balance des blancs et le traitement de l'appareil modifient ce que contient un pixel. L'outil donne la couleur telle qu'elle apparaît sur la photo, donc un nuancier de peinture ou un tissu dans une pièce ne lui correspondra pas exactement.
Les couleurs sont lues en sRVB
Le sRVB est la norme des couleurs du web. Quand une image porte un autre profil colorimétrique, le navigateur la convertit à l'ouverture du fichier, si bien qu'une application de bureau qui affiche le profil d'origine peut donner des nombres légèrement différents.
Où utiliser une couleur tirée d'une image
Trois usages courants et ce qu'il faut copier pour chacun.
HEX · RVB · OKLCH
Sites web et CSS
Collez un code HEX directement dans une feuille de style, par exemple color: #ff7d3d. RVB, TSL et OKLCH fonctionnent de la même façon dans rgb(), hsl() et oklch().
Cliquez sur une couleur de la palette sous la photo pour obtenir son code dans les mêmes six formats, prêt à coller.
HEX
Marque et design
Quand la charte graphique manque, relevez les couleurs sur le fichier d'un logo ou sur une capture du site. Les logos PNG nets donnent les résultats les plus propres.
Télécharger la palette en PNG conserve les couleurs principales d'une photo de référence sous forme de bande, à envoyer à un client ou à glisser dans un moodboard.
WCAG
Texte lisible sur une couleur
L'encadré de contraste affiche le rapport pour du texte blanc et pour du texte noir sur la couleur relevée. Le niveau AA des WCAG demande au moins 4,5:1 pour du texte normal et 3:1 pour du grand texte.
La carte mandarine obtient 2,5:1 avec du texte blanc et 8,3:1 avec du texte noir : le noir est donc le choix sûr ici.
Les rapports de contraste viennent uniquement de la couleur relevée. Si le texte est posé sur une photo et non sur un aplat, vérifiez aussi la zone située derrière le texte.
Questions fréquentes
Comment relever une couleur sur une image ?
Ouvrez l'image, déplacez le curseur dessus et cliquez sur le point voulu. Sur mobile, touchez-le. Les codes HEX, RVB, TSL et OKLCH de ce point apparaissent à côté de l'image, chacun avec un bouton Copier.
Comment trouver le code hexadécimal d'une couleur dans une photo ?
Relevez la couleur comme indiqué plus haut et appuyez sur Copier à côté de HEX. Un code hexadécimal est un dièse suivi de six caractères, deux pour le rouge, deux pour le vert et deux pour le bleu, par exemple #FF7D3D.
Quelle est la différence entre HEX, RVB, TSL et OKLCH ?
Ils décrivent la même couleur de façons différentes. HEX et RVB donnent les quantités de rouge, de vert et de bleu, en base 16 et en base 10. TSL donne la teinte, la saturation et la luminosité, ce qui facilite la création d'une version plus claire ou plus foncée.
OKLCH est une notation plus récente que CSS accepte dans les versions actuelles des principaux navigateurs. Sa luminosité suit la clarté perçue d'une couleur, ce qui garde les dégradés et les échelles de teintes homogènes.
Pourquoi le code diffère-t-il de celui d'un autre outil ?
En général, à cause du pixel exact sur lequel vous avez cliqué et du profil colorimétrique. Les photos varient légèrement d'un pixel à l'autre, donc un clic un pixel plus loin peut donner un autre code.
Une photo dont le profil n'est pas sRVB peut aussi être lue différemment, car cet outil lit les couleurs telles que le navigateur les affiche.
Comment l'outil trouve-t-il les couleurs principales d'une image ?
Il lit les pixels de votre image, regroupe les teintes proches et répartit ces groupes dans le nombre de couleurs que vous choisissez. Chaque couleur est la moyenne de son groupe, et son pourcentage est la part des pixels qui en sont les plus proches. Une très grande image est lue sur une grille régulière de pixels, ce qui donne la même palette.
Une grande zone unie, comme un ciel ou un fond, reçoit sa propre couleur sans occuper toute la palette, si bien que les petits détails apparaissent aussi.
À quoi sert Relever une couleur n'importe où sur l'écran ?
Le bouton utilise la pipette intégrée à votre navigateur. Appuyez dessus, puis cliquez sur n'importe quelle couleur de votre écran, dans n'importe quelle fenêtre et pas seulement dans l'image ouverte. Échap pour annuler.
La couleur relevée s'affiche aussitôt avec ses codes. Chrome et Edge sur ordinateur la proposent. Firefox et Safari non : la page l'explique alors à la place du bouton.
Qu'est-ce que le nom CSS le plus proche ?
CSS possède une liste de couleurs nommées, comme tomato, coral ou rebeccapurple. L'outil cherche celle qui ressemble le plus à votre couleur et l'affiche. Le nom est un mot-clé CSS, donc identique dans toutes les langues, et il ne correspond exactement que si votre couleur fait partie des couleurs nommées.
Quels types d'image puis-je utiliser ?
Des fichiers JPG, PNG et WebP jusqu'à 20 MB. Un PNG ou un WebP avec transparence fonctionne aussi. Si vous relevez un pixel transparent, l'outil vous le signale et affiche la couleur sans la transparence.
Cette pipette à couleur est-elle gratuite ?
Oui. Pas d'inscription, pas de filigrane et aucune limite au nombre de couleurs relevées. Les images jusqu'à 20 MB s'ouvrent dans votre navigateur et rien n'est envoyé.
Puis-je l'utiliser sur un téléphone ou une tablette ?
Oui. Touchez l'image pour relever une couleur. La loupe est faite pour la souris : sur un écran tactile, un repère montre l'endroit touché et les codes apparaissent juste après l'image.
Puis-je relever une couleur sur une capture d'écran ou un site web ?
Oui, de deux façons. Collez une capture avec Ctrl+V ou Cmd+V, ou ouvrez le fichier de la capture, puis cliquez sur la couleur. Dans Chrome ou Edge, vous pouvez aussi utiliser Relever une couleur n'importe où sur l'écran pour prendre une couleur dans n'importe quelle fenêtre ouverte, un site web compris.
Comment les valeurs TSV et CMJN sont-elles calculées ?
Les deux sont calculées à partir de la couleur sRVB. Le TSV (HSV en anglais, affiché ici hsb) reprend la même teinte que le TSL, avec saturation et luminosité mesurées par rapport au canal le plus lumineux.
Le CMJN est une simple conversion, pas un profil d'impression. Une imprimante ou une presse fait passer la même couleur par son propre profil, et ses pourcentages peuvent donc différer. Prenez ces valeurs comme point de départ et comparez-les à une épreuve.
Pourquoi y a-t-il déjà une image sur la page ?
Une photo de démonstration s'ouvre d'abord pour que vous voyiez comment l'outil fonctionne avant d'ajouter quoi que ce soit. Ajoutez la vôtre avec Utiliser votre image, déposez-la dans l'outil ou collez-la, et elle remplace l'exemple.
Mes images sont-elles envoyées quelque part ?
Non. C'est votre propre navigateur qui ouvre l'image et lit ses pixels. Rien n'est envoyé à un serveur et rien n'est conservé après la fermeture de l'onglet.