Image Color Picker : extraire le code couleur d’une image

Charge l’image dans l’Image Color Picker et clique sur le point dont tu veux connaître la couleur. L’outil affiche aussitôt les valeurs HEX, RGB et HSL de ce pixel. Clique sur « Copier » pour récupérer la valeur. Un clic sur le soleil de l’image d’exemple donne #ffd166. Dans le code HEX, chaque paire de chiffres représente le rouge, le vert ou le bleu (ff = 255, d1 = 209, 66 = 102) : #ffd166 correspond donc à rgb(255, 209, 102) et hsl(42, 100 %, 70 %).

Une pipette de couleur, aussi appelée sélecteur de couleurs ou Eyedropper, relève la couleur d’un point et fournit son code. Cet Image Color Picker est une pipette en ligne pour les images, utilisable dans le navigateur, même sur mobile : aucune application n’est nécessaire. Sur mobile, touche un point et fais glisser ton doigt ; la loupe affiche les pixels en dessous. Au clavier, déplace la sélection d’un pixel avec les flèches (de 10 avec Maj) et enregistre la couleur dans l’historique avec Entrée.

Non. L’image est placée sur une zone de dessin dans ton navigateur, où elle est analysée. Elle n’est ni téléversée ni enregistrée ; même l’historique des couleurs choisies reste uniquement dans cet onglet. Tu peux le vérifier dans l’onglet Réseau des outils de développement : le chargement et les clics ne génèrent aucune requête.

Fais une capture d’écran (Windows : Windows+Maj+S ; Mac : Cmd+Maj+4 avec Ctrl pour copier dans le presse-papiers) et colle-la dans l’outil avec Ctrl+V (Mac : Cmd+V). Clique ensuite sur le point voulu et copie son code couleur. Tu peux ainsi relever les couleurs d’un site web, d’une application ou d’un jeu sans extension de navigateur.

Il y a quatre raisons courantes. Premièrement, les images JPG enregistrent les couleurs avec perte : les pixels voisins peuvent légèrement différer. Deuxièmement, le navigateur peut convertir les profils colorimétriques intégrés (comme Display P3) en sRGB, tandis que d’autres programmes affichent la valeur brute. Troisièmement, une capture d’écran montre la couleur après la gestion des couleurs de ton écran. Quatrièmement, l’outil réduit les images de plus de 36 mégapixels avant de les analyser. Pour les photos, règle donc la moyenne sur 3 × 3, 5 × 5 ou 11 × 11 pixels : l’outil calcule la moyenne de 9, 25 ou 121 pixels autour du pointeur au lieu de relever une valeur aberrante. Pour les aplats de couleur, comme dans un logo, le réglage « 1 pixel » convient.

Charge l’image : la palette apparaît juste en dessous. Choisis entre 2 et 12 couleurs et vois pour chacune son code HEX et sa proportion dans l’image. Pour cela, l’outil analyse au moins 90.000 pixels répartis uniformément (les images plus petites en entier), ignore les pixels transparents et regroupe les couleurs avec l’algorithme median cut. Pour les photos, la palette est approximative. « Copier la liste HEX » te donne une liste ; « Copier les variables CSS » te donne des lignes comme --color-1: #08203a; à placer dans un bloc :root et à utiliser avec var(--color-1).

En plus des valeurs de couleur, l’outil affiche le nom CSS correspondant ou, s’il n’existe pas de correspondance exacte, le nom CSS le plus proche et sa valeur HEX. Pour #ffd166, c’est khaki (#f0e68c) : il ne s’agit donc que d’une approximation. L’outil ne fournit pas de valeurs RAL, Pantone, NCS ou CMYK. La couleur affichée à l’écran dépend aussi de la lumière et de l’appareil photo : vérifie toujours une peinture murale ou une laque sur un échantillon réel. Le Color Picker te donne les valeurs HSV et CMYK d’une couleur connue.

L’outil calcule le rapport de contraste WCAG de la couleur avec le blanc et le noir. Le texte normal nécessite au moins 4,5:1 (niveau AA), et 7:1 (AAA) est excellent ; 3:1 suffit pour les grands caractères. Sur #ffd166, le texte noir atteint 14,56:1, contre seulement 1,44:1 pour le texte blanc. Pour vérifier deux couleurs de ton choix, utilise Contrast Checker.

PNG, JPG, WebP, AVIF, GIF, BMP et SVG, selon les formats pris en charge par ton navigateur. Pour les GIF, la première image est analysée. Seul Safari ouvre les fichiers HEIC et HEIF enregistrés par les iPhone ; sinon, exporte d’abord la photo en JPG. Les fichiers peuvent atteindre 40 MB. Pour les pixels semi-transparents, l’outil affiche aussi la valeur HEX avec canal alpha, par exemple #ff000080. Les pixels entièrement transparents n’ont pas de couleur : l’outil te le signale.