Pipette à couleurs d'image, gratuite

Pipette de pixel ou extracteur de palette, deux tâches différentes

Une confusion courante qu'il vaut la peine de dissiper d'abord : ceci est une pipette de pixel, pas un extracteur de palette. Les deux outils se ressemblent et impliquent tous deux des images, mais ils répondent à des questions différentes :

• Pipette de pixel (cet outil) : vous cliquez sur un emplacement précis, l'outil lit la couleur de ce pixel unique. À utiliser quand vous avez besoin de la couleur d'un élément spécifique : le rouge de marque d'un logo, le bleu exact d'un ciel sur une photo de référence, le blanc cassé d'un arrière-plan d'interface dans une capture d'écran.
• Extracteur de palette : l'outil analyse toute l'image et renvoie statistiquement les 5-8 couleurs dominantes. À utiliser quand vous voulez un schéma de couleurs inspiré d'une image globale, pas d'un point précis.

Si vous voulez réellement les couleurs dominantes statistiques, l'outil Extracteur de palette depuis une image, gratuit est le bon choix. Les deux outils se complètent : extrayez une palette pour comprendre l'histoire de couleur globale, puis utilisez cette pipette pour récupérer des accents précis.

Comment ça marche

Le navigateur dessine votre image importée dans un élément HTML <canvas>. Quand vous cliquez, l'outil appelle ctx.getImageData(x, y, 1, 1) : une méthode de l'API Canvas 2D qui renvoie les valeurs RGBA d'un seul pixel sous forme de tableau à quatre éléments (rouge, vert, bleu, alpha). Ces valeurs sont ensuite formatées en HEX, RGB et HSL pour l'affichage. La loupe est un second canvas qui copie une petite région autour du curseur et la rend agrandie, pour que vous puissiez voir exactement quel pixel vous êtes sur le point de sélectionner. Tout s'exécute localement dans votre navigateur ; les octets de l'image ne sont jamais transmis.

Quand recourir à une pipette de pixel

• Harmonisation de marque : prélever la couleur exacte d'un logo pour l'utiliser ailleurs dans une création ou un support marketing.
• Photographie de référence : trouver le ton précis d'un ciel, d'un teint, ou la couleur d'un matériau naturel à partir d'une image de référence.
• Assurance qualité du design : vérifier qu'une capture d'écran correspond à la couleur de la spécification pixel par pixel.
• Rétro-ingénierie d'un site existant : prélever la couleur réellement rendue d'un bouton ou d'un arrière-plan quand les DevTools ne sont pas une option (une capture d'écran d'un collègue, l'interface d'un concurrent).
• Analyse de maquette : extraire les couleurs exactes d'une planche d'ambiance ou d'une maquette de conception.
• Inspection de captures d'écran mobiles : les captures d'écran de téléphone peuvent être examinées sur ordinateur de bureau sans avoir besoin de l'appareil d'origine.
• Audits d'accessibilité : lire la couleur réellement rendue d'un texte ou d'éléments d'interface (qui peut différer du CSS source à cause de l'anticrénelage ou de l'empilement de transparence).

HEX, RGB, HSL : même couleur, trois notations

L'outil émet la même valeur de couleur en trois formats parce que des contextes différents en préfèrent des différents :

• HEX : #2b7190. Compact, six caractères, le standard de facto pour le design web et la plupart des flux de copier-coller. Facile à insérer dans le CSS, les sélecteurs de couleur des outils de design ou le markdown.
• RGB : rgb(43, 113, 144). La forme numérique sous-jacente. Utile quand vous devez ajuster les canaux indépendamment ou quand vous travaillez dans des outils qui attendent des valeurs décimales (valeurs arbitraires de Tailwind, génération programmatique).
• HSL : hsl(199, 54%, 37%). Teinte / saturation / luminosité, plus facile à appréhender pour les humains. Ajuster « la même teinte, légèrement plus claire » est un seul nombre en HSL, mais un changement multicanal en HEX ou RGB.

Le piège de l'anticrénelage

Une pipette au pixel près lit exactement le pixel sous votre curseur, mais dans les images réelles, ce pixel n'est peut-être pas la couleur que vous croyez. L'anticrénelage fond les bords des lettres, des icônes et des formes courbes avec l'arrière-plan environnant pour les rendre lisses. Ainsi, cliquer sur le « bord » d'un texte noir sur du blanc peut vous donner un gris plutôt qu'un noir pur. Deux habitudes pratiques pour éviter le piège :

• Prélevez au centre des formes pleines, pas sur les bords où se produit l'anticrénelage.
• Utilisez la loupe pour confirmer que vous êtes sur un pixel qui est clairement la couleur de marque plutôt qu'un pixel de bord mélangé.

La compression JPEG et pourquoi la qualité de la référence compte

La compression JPEG introduit de petites distorsions de couleur, surtout autour des bords de contraste et dans les zones plates de couleur unie. Une couleur de marque « rouge pur » (#FF0000) exportée en JPEG puis réimportée peut se lire comme #FE0102 ou similaire : proche, mais pas identique à la source. Pour une harmonisation de marque exacte, préférez :

• Des images source PNG ou WebP sans perte quand vous prélevez des couleurs qui comptent.
• Des fichiers source vectoriels (SVG, PDF) rendus à fort zoom : les couleurs vectorielles sont exactes.
• Directement depuis l'outil de design (Figma, Sketch, Photoshop) quand c'est possible, plutôt que depuis une capture d'écran.

Alternatives de pipette au niveau du navigateur et du système

Plusieurs autres façons de prélever des couleurs sur votre écran :

• L'API CSS EyeDropper (new EyeDropper()). Statut de MDN : « Disponibilité limitée, cette fonctionnalité n'est pas Baseline car elle ne fonctionne pas dans certains des navigateurs les plus utilisés. » En pratique, prise en charge dans Chrome et Edge (depuis Chrome 95), pas dans Firefox ni Safari. Renvoie une couleur sous la forme { sRGBHex }. Bonne quand elle est prise en charge, mais sa prise en charge irrégulière fait qu'une pipette fondée sur Canvas garde sa place pour un usage multinavigateur.
• Digital Color Meter de macOS : application macOS intégrée qui lit n'importe quel pixel à l'écran.
• Color Picker de Windows PowerToys : l'utilitaire officiel PowerToys de Microsoft inclut une pipette de pixel.
• Les DevTools du navigateur : Chrome et Firefox incluent tous deux des pipettes dans leur interface de sélecteur de couleur lors de l'édition de CSS dans l'inspecteur.

Pourquoi une pipette web garde sa place : elle fonctionne sur des captures d'écran partagées arrivées par Slack ou par e-mail, ne nécessite pas d'installer de logiciel, s'exécute depuis n'importe quel navigateur sur n'importe quel système, et l'image ne quitte jamais votre machine.

Confidentialité

Les images transportent souvent bien plus que des pixels : les métadonnées EXIF peuvent inclure les coordonnées GPS de la prise de vue, le numéro de série de l'appareil et les horodatages de capture d'origine. Les captures d'écran peuvent contenir une interface confidentielle, du texte en brouillon ou une image de marque avant lancement. Les visages sont des identifiants biométriques selon les lois sur la vie privée de plusieurs juridictions. Cet outil s'exécute entièrement dans votre navigateur : l'image passe de votre système de fichiers à un canvas en mémoire, est échantillonnée pixel par pixel, et la seule chose qui quitte la page est la valeur de couleur lorsque vous la copiez. Les outils de pipette d'image côté serveur téléversent l'image entière ; c'est le compromis.

Erreurs courantes

1. Prélever sur un bord anticrénelé. La couleur que vous obtenez est un mélange de la forme et de son arrière-plan. Prélevez plutôt au milieu des zones pleines.
2. Prélever sur un JPEG fortement compressé. Les artefacts de compression décalent subtilement les couleurs. Utilisez une source de meilleure qualité pour une harmonisation de marque exacte.
3. Confondre la pipette avec un extracteur de palette. Si vous voulez les couleurs dominantes d'une image globale, c'est un extracteur de palette qu'il vous faut, pas une pipette de pixel.
4. Prélever sur un PNG transparent devant un arrière-plan de page coloré. Selon la façon dont le canvas compose la transparence, vous pourriez finir par échantillonner l'arrière-plan de la page à travers le canal alpha. Convertissez d'abord l'image vers un arrière-plan connu si la précision compte.
5. Se fier exactement à la couleur d'une capture d'écran. Certains moniteurs appliquent une calibration de couleur qui décale la couleur rendue par rapport à la source. La valeur de pixel que lit la pipette est ce qui est encodé dans l'image, pas nécessairement ce qu'affichait l'écran d'origine.
6. Prélever sur une image de basse résolution et manquer du détail. Une vignette de 200×100 d'un logo offre moins de pixels distincts parmi lesquels choisir que l'élément d'origine. Quand c'est possible, travaillez à partir de la source de plus haute résolution.

Autres questions fréquentes

Quelle est la différence entre ceci et un générateur de palette de couleurs ?

Une pipette lit la couleur d'un pixel précis sur lequel vous cliquez. Un générateur de palette analyse toute l'image et renvoie statistiquement les couleurs les plus dominantes. Des tâches différentes : les pipettes sont précises, les générateurs de palette sont interprétatifs. Pour une palette générée à partir de votre image, voyez Extracteur de palette depuis une image, gratuit.

Pourquoi la couleur que je prélève diffère-t-elle de la spécification de marque ?

Deux raisons courantes. Premièrement, l'image sur laquelle vous prélevez a peut-être été compressée (le réencodage JPEG décale les couleurs de quelques valeurs RGB). Deuxièmement, le pixel sur lequel vous avez cliqué se trouve peut-être sur un bord anticrénelé qui se fond avec l'arrière-plan. Pour une harmonisation de marque exacte, utilisez une source vectorielle ou un PNG / WebP sans perte de haute qualité, et prélevez au milieu des zones pleines.

Puis-je l'utiliser sur mobile ?

Oui, le prélèvement par appui fonctionne sur les appareils tactiles, même si le comportement de la loupe et la précision exacte au pixel peuvent varier selon le navigateur mobile. Pour un travail au pixel près sur mobile, la plus grande cible tactile rend difficile une pipette ancrée à la loupe ; envisagez de faire les prélèvements critiques en couleur sur un navigateur de bureau quand c'est possible.

L'image est-elle téléversée quelque part ?

Non. L'image est chargée dans un élément Canvas local via les API FileReader / de chargement d'image du navigateur ; les lectures de pixels se font via getImageData ; rien n'est transmis à un serveur, aucun point de terminaison d'analyse ne voit l'image. Utile quand l'image contient des données GPS EXIF, des visages, des captures d'interfaces confidentielles ou une image de marque avant lancement que vous ne voulez pas téléverser.

Pourquoi prélever une couleur dans une image alors que le CSS affiche la valeur ?

Le CSS affiche la couleur déclarée, mais les pixels rendus peuvent différer : dégradés, empilement d'opacité, anticrénelage, ajustements du mode sombre, gestion du profil de couleur du navigateur et compression des captures d'écran provoquent tous une divergence. Quand vous avez besoin de savoir ce qu'est réellement le pixel (pour l'assurance qualité du design, l'accessibilité, ou la correspondance avec une référence), lire directement le pixel rendu est la seule réponse fiable.

Pourquoi la loupe est-elle utile ?

Les pixels uniques sont minuscules : à la résolution d'écran typique, les pixels individuels sont bien en dessous de la taille que votre œil peut distinguer sans aide. La loupe montre une vue agrandie de la zone sous votre curseur pour que vous puissiez confirmer exactement quel pixel vous cliquerez. Particulièrement précieuse sur les images denses, le texte anticrénelé, ou les formes courbes où des pixels adjacents diffèrent de petites quantités.