Pipette : trouver la couleur d’une image
Chargez une image via le sélecteur de fichiers, par glisser-déposer ou avec Ctrl + V, puis cliquez ou touchez l’endroit voulu. La pipette affiche la couleur du pixel en HEX, RGB et HSL et détermine les couleurs dominantes de l’image. L’image n’est pas envoyée sur un serveur.
Comment le calcul est fait
Votre image reste sur votre appareil
La pipette fonctionne entièrement dans votre navigateur : l’image est décodée localement et dessinée sur une surface de dessin (canvas), puis la couleur est lue directement en mémoire avec getImageData(). Il n’y a aucun envoi ni aucune requête réseau contenant les données de l’image ; une fois la page fermée, l’image disparaît. Seules les photos HEIC que votre navigateur ne sait pas ouvrir nécessitent le chargement ponctuel d’un programme de décodage depuis ce site, et votre photo reste malgré tout en local.
Comment lire une couleur
- Choisissez une image, glissez-la dans la zone ou collez-la avec Ctrl + V (p. ex. une capture d’écran).
- Cliquez ou touchez l’endroit voulu. Au clavier, les flèches déplacent la pipette au pixel près.
- Copiez la valeur HEX, RGB ou HSL. Les huit dernières couleurs choisies restent affichées sous forme d’échantillons.
Comment sont obtenues les couleurs dominantes
Pour les couleurs dominantes, l’image est réduite à 200 pixels de côté au maximum. Chaque pixel opaque est rangé dans l’une des 4 096 cases de couleur (16 niveaux par canal). Les cases les plus fréquentes et nettement différentes donnent jusqu’à six couleurs dominantes ; le pourcentage indique leur part parmi tous les pixels opaques. Il s’agit d’une quantification simple : utile pour une vue d’ensemble, mais ce n’est pas une mesure colorimétrique.
Pourquoi la valeur peut différer de l’original
- Profils colorimétriques : les navigateurs convertissent en sRGB les images dotées d’un profil intégré (p. ex. Display P3 sur smartphone). La pipette affiche la valeur sRGB, celle que vous utiliseriez en CSS ; un logiciel de retouche en mode P3 affiche d’autres chiffres.
- Compression : JPEG et WebP enregistrent les couleurs avec perte ; des pixels voisins d’une zone « unie » peuvent différer de quelques niveaux.
- Les très grandes images (plus de 4 096 pixels de côté) sont réduites pour la lecture, ce qui fait la moyenne des pixels voisins. La position affichée se rapporte à l’image d’origine.
Questions fréquentes
Mon image est-elle envoyée ou enregistrée ?
Non. L’image est traitée uniquement dans la mémoire de votre navigateur et n’est envoyée nulle part. Rien n’est non plus conservé dans le stockage du navigateur (localStorage).
Comment trouver le code couleur d’une capture d’écran ?
Faites une capture d’écran (p. ex. sous Windows : Win + Maj + S), cliquez sur cette page et appuyez sur Ctrl + V. Cliquez ensuite sur l’endroit voulu : le code HEX s’affiche aussitôt.
Quels formats d’image sont pris en charge ?
JPG, PNG, WebP, GIF, BMP et AVIF, dans la mesure où votre navigateur sait les ouvrir, ainsi que les photos HEIC de l’iPhone. Pour les images transparentes, la pipette indique en plus l’opacité du pixel.
Puis-je réutiliser la couleur ?
Oui : copiez la valeur HEX et convertissez-la dans d’autres formats avec le convertisseur de couleurs, créez des couleurs assorties avec le générateur de palette ou vérifiez avec le vérificateur de contraste si un texte de cette couleur est bien lisible.
Sources et références juridiques
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
Dernière mise à jour :
Outils similaires
- Convertisseur de couleurs : HEX, RGB, HSL, HSV, CMJNConvertissez vos couleurs : HEX en RGB, RGB en HEX, HSL, HSV, HWB et CMJN. Saisie dans tout format ou via le sélecteur, résultat à copier, dans le navigateur.
- Générateur de palette de couleursCréez des couleurs assorties depuis une couleur de base : complémentaire, analogue, triadique, carré, complémentaire adjacent ou monochrome, en HEX, RGB et HSL.
- Vérificateur de contraste selon les WCAG 2.2Vérifiez le contraste entre couleur de texte et couleur de fond : ratio WCAG 2.2, niveaux AA/AAA pour texte normal, grand texte et composants d’interface.
- Calculer l’âge de son chat en âge humainQuel âge a mon chat en années humaines ? Conversion selon le tableau AAFP-AAHA, chatons en mois compris, avec le stade de vie des lignes directrices 2021.
- Calculer l’âge de son chien en âge humainQuel âge a votre chien en années humaines ? Formule 16·ln(âge)+31 (Wang et al. 2020) et tableau de l’AVMA selon la taille, avec l’âge senior du chien.
- Calculer son besoin en eau par jourCombien d’eau boire par jour ? Apport en boissons et en eau totale selon l’âge, le sexe, la grossesse et l’allaitement, selon l’EFSA et la DGE.