BrowserTools
Accueil / Images / Pipette à couleurs d'image, récupérez les couleurs de n'importe quelle photo

Pipette à couleurs d'image, récupérez les couleurs de n'importe quelle photo

Prélevez des couleurs sur n'importe quelle image dans votre navigateur. Survolez avec une loupe, cliquez pour obtenir les valeurs HEX, RGB et HSL et extrayez une palette dominante.

Chargement de Pipette à couleurs d'image, récupérez les couleurs de n'importe quelle photo… Si rien ne se passe, activez JavaScript.

Une pipette à couleurs d'image (aussi appelée sélecteur de couleur) vous donne la couleur exacte de n'importe quel pixel d'une photo, d'une capture d'écran, d'un logo ou d'une maquette. Chargez une image, survolez-la avec la loupe grossissante pour inspecter les pixels un à un, puis cliquez pour capturer la couleur sous forme de code HEX, de valeur RGB ou de valeur HSL, chacune avec un bouton de copie en un clic. L'outil analyse également l'image entière de manière automatique et en extrait une palette de couleurs dominantes, ce qui vous permet d'obtenir en quelques secondes un ensemble assorti pouvant compter jusqu'à huit échantillons, sans aucun prélèvement manuel.

Questions fréquentes

Comment prélever une couleur sur une image ?
Chargez une image en la faisant glisser sur l'outil, en la choisissant avec le champ de fichier ou en la collant depuis le presse-papiers. Déplacez le curseur sur l'image : une loupe grossissante affiche les pixels autour du curseur et un aperçu en direct de la couleur située dessous. Cliquez pour verrouiller cette couleur, puis copiez-la en HEX, RGB ou HSL avec les boutons de copie.
Mon image est-elle envoyée sur un serveur ?
Non. L'image est décodée et dessinée sur un élément canvas dans votre propre navigateur, et tous les calculs de couleur s'effectuent sur votre appareil. Rien n'est transmis nulle part, ce qui rend l'outil sûr pour les captures confidentielles, les éléments de clients et les designs non publiés. Il fonctionne même hors ligne une fois la page chargée.
Quels formats de couleur la pipette fournit-elle ?
Chaque couleur prélevée est affichée dans trois formats à la fois : HEX (par exemple #3A7BD5), RGB (par exemple rgb(58, 123, 213)) et HSL (par exemple hsl(215, 65%, 53%)). Les trois décrivent exactement la même couleur ; ce sont simplement des notations différentes utilisées en CSS, dans les outils de design et les éditeurs d'images. Chaque format dispose de son propre bouton de copie en un clic.
Comment fonctionne l'extraction de la palette dominante ?
L'outil réduit l'image puis répartit chaque pixel dans des groupes de couleurs approximatifs, avant de classer ces groupes selon le nombre de pixels qu'ils contiennent. Les groupes les plus fréquents et visuellement distincts les uns des autres forment la palette, jusqu'à huit échantillons. C'est une quantification rapide par fréquence qui s'exécute entièrement dans votre navigateur en une fraction de seconde.
Puis-je coller une capture d'écran directement depuis le presse-papiers ?
Oui. Faites une capture d'écran, puis appuyez sur Ctrl+V (Cmd+V sur Mac) n'importe où sur la page. L'image de votre presse-papiers est chargée directement dans la pipette sans passer par un fichier, ce qui est le moyen le plus rapide de prélever une couleur sur quelque chose actuellement affiché à l'écran.
Quels formats d'image sont pris en charge ?
Tout format que votre navigateur sait décoder fonctionne, ce qui couvre JPEG, PNG, WebP, GIF, BMP, SVG et, dans la plupart des navigateurs modernes, AVIF. Les formats animés sont échantillonnés sur leur première image. Si le fichier s'ouvre comme une image dans un onglet du navigateur, cette pipette peut en lire les couleurs.
Quelle est la précision de la couleur prélevée ?
La pipette lit les valeurs de pixels décodées directement sur le canvas : au sein d'une même image, elle est donc exacte pour le pixel cliqué. Gardez à l'esprit que les formats avec perte comme le JPEG introduisent des artéfacts de compression ; une zone de couleur unie peut contenir des pixels légèrement différents de la valeur d'origine du design. La grille de la loupe permet de voir cette variation et de choisir un pixel représentatif.
Quelle est la différence entre HEX, RGB et HSL ?
HEX et RGB expriment tous deux une couleur par ses composantes rouge, verte et bleue ; HEX les condense en six chiffres hexadécimaux tandis que RGB les liste en nombres décimaux de 0 à 255. HSL décrit plutôt la teinte (position sur le cercle chromatique), la saturation et la luminosité, ce qui est souvent plus intuitif pour ajuster une couleur, par exemple l'assombrir sans changer sa teinte.
Puis-je conserver plusieurs couleurs et les comparer ?
Oui. Chaque clic ajoute la couleur à une bande d'historique sous l'image. Cliquez sur n'importe quel échantillon de l'historique pour en refaire la couleur active et afficher ses valeurs HEX, RGB et HSL. Le bouton d'effacement vide l'historique quand vous voulez repartir de zéro. L'historique n'existe que dans la page ; un rechargement repart à neuf.
Pourquoi les couleurs prélevées sur un JPEG semblent-elles légèrement différentes ?
La compression JPEG travaille par petits blocs et supprime les détails fins de couleur ; les bords et les zones unies récupèrent donc de petites variations absentes du design d'origine. Si la précision compte, prélevez la couleur sur un PNG ou une autre exportation sans perte, ou utilisez la loupe pour échantillonner un pixel au centre d'une grande zone unie plutôt que près d'un bord.

À propos de Pipette à couleurs d'image, récupérez les couleurs de n'importe quelle photo

Extraire une couleur d'une image se fait en trois étapes : charger, survoler, cliquer. Vous pouvez glisser-déposer un fichier n'importe où sur l'outil, le sélectionner avec le champ de fichier, ou simplement coller une capture d'écran directement depuis le presse-papiers avec Ctrl+V (Cmd+V sur Mac). La loupe affiche une grille agrandie des pixels autour du curseur ainsi qu'un aperçu en direct de la couleur située dessous, ce qui permet de viser exactement le bon pixel, même dans les détails fins comme du texte lissé, des bordures étroites ou des dégradés subtils. Chaque couleur cliquée est ajoutée à une rangée d'historique : vous pouvez ainsi comparer plusieurs candidates côte à côte et en resélectionner une plus tard d'un simple clic.

Tout se passe localement dans votre navigateur. L'image est décodée sur un canvas HTML sur votre propre appareil et ne le quitte jamais : aucun envoi, aucun traitement côté serveur, aucun compte, aucun suivi de vos fichiers. La pipette peut donc être utilisée en toute sécurité avec des documents confidentiels comme des visuels produit non publiés, des éléments de marque de clients ou des captures internes. Cela signifie aussi que l'outil continue de fonctionner hors ligne une fois la page chargée et répond instantanément quelle que soit la vitesse de votre connexion, puisqu'aucun aller-retour réseau n'a lieu.

Les usages typiques sont partout dans le travail quotidien de design et de développement. Les développeurs front-end prélèvent la couleur d'un logo pour la reproduire en CSS. Les designers vérifient qu'un fichier exporté utilise bien les valeurs de marque approuvées. Les équipes marketing contrôlent la cohérence des couleurs entre les visuels de campagne, et les illustrateurs échantillonnent des photos de référence pour composer une palette de peinture. L'extraction automatique de palette est particulièrement pratique pour bâtir un jeu de couleurs à partir d'une photographie, par exemple tirer le thème d'un site web d'une image d'en-tête. Pour affiner ou convertir les valeurs prélevées, le convertisseur de couleurs et le générateur de palettes de ce site prennent le relais là où cet outil s'arrête.

De la pipette aux codes hexadécimaux : comment nous avons appris à nommer les couleurs d'écran

La métaphore de la pipette est plus ancienne qu'on ne le pense. Les premiers logiciels de dessin des années 80, dont Deluxe Paint sur Amiga et MacPaint sur Macintosh, avaient besoin d'un moyen de laisser les artistes réutiliser une couleur déjà présente sur la toile, et une pipette aspirant une goutte de peinture fut le skeuomorphisme qui s'imposa. Quand Photoshop 1.0 sortit en 1990, il fit entrer la pipette dans les flux de travail professionnels, et tous les éditeurs d'images depuis ont conservé l'outil comme l'icône, au point que prélever une valeur n'importe où dans une interface s'appelle aujourd'hui, de façon générique, « pipetter ».

Le code hexadécimal à six chiffres est un heureux accident du matériel. Les écrans ont adopté la couleur 24 bits à la fin des années 80, avec un octet par canal, et un octet correspond exactement à deux chiffres hexadécimaux : #RRGGBB était donc l'écriture lisible la plus compacte de ce que la mémoire vidéo contenait réellement. HTML 3.2 a normalisé cette notation pour le web en 1997, avec un ensemble de 16 couleurs nommées héritées de la palette VGA de Windows. La liste bien plus longue de noms que les navigateurs comprennent aujourd'hui, y compris des curiosités comme PapayaWhip et DarkSlateGray, vient du système de fenêtrage X11, où des chercheurs du MIT et de DEC ont nommé des couleurs dans les années 80 en partie à l'œil et, dans quelques cas raconte-t-on, en les comparant à des crayons de cire Crayola.

Une relique de cette époque refait encore surface dans les discussions de design : la palette « web safe ». À l'ère des écrans 8 bits, les navigateurs ne pouvaient garantir que 216 couleurs précises s'affichent sans tramage, si bien que les designers se limitaient aux valeurs hexadécimales construites avec 00, 33, 66, 99, CC et FF. Les écrans modernes affichent des milliards de couleurs et cette contrainte est sans objet depuis deux décennies, mais ces grosses valeurs « web safe » apparaissent encore dans d'anciens guides de style, trace fossile du temps où choisir une couleur revenait à négocier avec le matériel.

Soutenir