Lire la couleur d'un pixel
Une image numérique est une grille de pixels, et chaque pixel porte trois valeurs : la quantité de rouge, de vert et de bleu, de 0 à 255. La pipette lit ces trois valeurs à l'endroit où vous cliquez, puis les écrit dans les trois notations que l'on utilise en CSS, en PAO ou dans un logiciel de retouche.
La loupe grossit quinze fois les 9 × 9 pixels autour du viseur ; le carré noir au centre marque le pixel qui sera lu. Elle sert à viser juste sur un trait fin ou un petit logo.
HEX, RGB et HSL
#rrggbb, chaque canal en hexadécimalrgb(rouge, vert, bleu), de 0 à 255hsl(teinte°, saturation %, luminosité %)HEX écrit les trois canaux en base 16, deux chiffres chacun : « ff » vaut 255, « 66 » vaut 102.RGB donne les mêmes valeurs en décimal. HSL décrit la couleur autrement : sa teinte sur le cercle chromatique (0° rouge, 120° vert, 240° bleu), sa saturation (0 % pour un gris) et sa luminosité (0 % noir, 100 % blanc). HSL est pratique pour obtenir une version plus claire ou plus foncée d'une couleur : on ne touche qu'à la luminosité.
La palette des couleurs dominantes
Sous l'image, l'outil propose jusqu'à six couleurs qui résument l'image, de la plus présente à la moins présente. Il les calcule par une quantification simple, écrite pour l'outil :
- l'image est réduite à 160 pixels de côté au plus, assez pour ses grandes plages de couleur ;
- chaque pixel opaque tombe dans une case, en gardant 16 niveaux par canal, soit 4 096 cases ;
- les cases les plus remplies deviennent des couleurs de la palette, à condition d'être assez éloignées de celles déjà retenues ;
- chaque case rejoint la couleur retenue la plus proche, qui prend la moyenne de ses pixels.
Le pourcentage affiché est la part des pixels de l'image rattachés à cette couleur. Cliquez sur une couleur de la palette pour afficher ses valeurs.
Exemples
51 = 33 en hexadécimal, 102 = 66, 204 = cc : #3366cc. En HSL, hsl(220, 60%, 50%) : un bleu moyennement saturé, à mi-luminosité.
ff = 255, 6a = 106, 00 = 0 : rgb(255, 106, 0), soit hsl(24.9, 100%, 50%).
La palette donne #ffffff à 75 % et #ff0000 à 25 % de l'image.
Pourquoi la couleur peut varier
Sur une photo, deux pixels voisins diffèrent presque toujours de quelques unités : bruit du capteur, compression JPEG, lissage des contours. Pour une couleur de marque, visez le centre d'un aplat, pas un bord, ou fiez-vous à la palette. Si vous avez le fichier source d'un logo (SVG, PDF), sa couleur y est écrite exactement.
La valeur lue est celle que le navigateur affiche, en sRGB. Une image enregistrée avec un profil de couleur plus étendu est convertie à l'affichage : un logiciel de retouche réglé sur un autre profil peut donner une valeur un peu différente pour le même pixel.
Questions fréquentes
Comment trouver le code couleur d'une image ?
Choisissez l'image, survolez-la : la loupe grossit les pixels autour du viseur. Cliquez sur le pixel voulu, puis copiez son code HEX, RGB ou HSL avec le bouton « Copier ».
Mon image est-elle envoyée sur un serveur ?
Non. L'image est lue par votre navigateur, dans un canvas, sur votre appareil. Rien n'est transmis à Lycos.
Pourquoi deux pixels voisins n'ont-ils pas la même couleur ?
Une photo n'a presque jamais d'aplat parfait : le bruit du capteur, la compression JPEG et le lissage des contours font varier chaque pixel de quelques unités. La palette des couleurs dominantes donne une moyenne plus représentative.
Peut-on utiliser la pipette au clavier ?
Oui. Atteignez l'image avec la touche Tab, déplacez le viseur avec les flèches (Maj pour avancer de 10 pixels) et appuyez sur Entrée pour lire la couleur du pixel visé.
Que se passe-t-il avec un pixel transparent ?
Sa couleur est donnée sans la transparence, et l'outil indique son opacité. Les pixels plus qu'à moitié transparents sont ignorés par la palette.
Une erreur ? Signalez-la, nous la corrigeons.