Ce que fait cette page et pourquoi elle existe
Cette page permet de choisir une image depuis votre appareil, puis de survoler n’importe quel pixel ou de cliquer dessus pour en extraire la couleur. L’outil affiche immédiatement le code hexadécimal de ce pixel, accompagné de ses valeurs RVB et TSL. Vous pouvez copier n’importe laquelle de ces valeurs pour l’utiliser dans une feuille de style CSS, un logiciel de conception ou tout autre projet. Un agrandissement aide à cibler le pixel exact, et un historique conserve jusqu’à 12 couleurs pour référence ultérieure.
Ce qui distingue cette page, c’est que le code hexadécimal est le format principal affiché. Il s’agit d’une notation à six chiffres (ou parfois trois en forme abrégée) qui représente les composantes rouge, vert et bleu. C’est le format standard du CSS et des outils de design graphique. Contrairement aux pages sœurs qui mettent l’accent sur la notation fonctionnelle RVB ou TSL, celle-ci donne la représentation hexadécimale, laquelle ne comporte pas de canal alpha dans sa forme à six chiffres. La transparence éventuelle est rapportée séparément, sous forme d’un pourcentage, par exemple « Alpha 30 % — ce pixel est partiellement transparent. »
Parce que le code hexadécimal est un format compact, natif du Web, cette page est l’outil de prédilection quand vous avez besoin d’une valeur de couleur à insérer directement dans color, background-color ou toute autre propriété CSS, sans parenthèses ni syntaxe supplémentaire.
Comment le code hexadécimal est généré
Lorsque vous déposez un fichier image ou que vous le sélectionnez via le bouton de téléversement, l’outil charge l’image dans un élément canvas invisible. Le navigateur lit les données pixel par pixel à l’aide de la méthode getImageData de l’API Canvas. Au chargement, la couleur du pixel central de l’image est lue et affichée immédiatement: vous voyez les coordonnées x et y, le code hexadécimal, les valeurs RVB et TSL, ainsi que les dimensions de l’image (largeur × hauteur).
Ensuite, quand vous déplacez le pointeur de la souris sur l’image, l’outil interroge en temps réel les données du pixel survolé. La valeur hexadécimale est calculée à partir des composantes rouge, vert et bleu (sur 8 bits chacune): chaque composante est convertie en deux chiffres hexadécimaux, puis concaténée avec un #. Par exemple, un pixel dont les valeurs RVB sont (30, 144, 255) donne #1E90FF.
Un clic sur l’image sauvegarde la couleur actuellement échantillonnée dans l’historique des « couleurs choisies ». L’outil affiche alors « Sauvegardé #1E90FF dans vos choix. »
L’agrandissement qui apparaît au-dessus de l’image est essentiel: il montre le pixel pointé entouré de ses voisins immédiats, ce qui évite les erreurs de sélection, surtout dans les zones dégradées ou compressées.
Les cas particuliers et les limites à connaître
Plusieurs situations peuvent tromper un utilisateur qui ne connaît pas le fonctionnement sous-jacent. Voici les principales règles et exceptions que l’outil applique.
Transparence et canal alpha. Comme le code hexadécimal à six chiffres n’encode pas la transparence, l’outil rapporte l’opacité à part. Si un pixel possède une valeur alpha inférieure à 255 (soit 100 % opaque), un message apparaît: « Alpha 30 % — ce pixel est partiellement transparent. » La valeur lue est celle du pixel lui-même, sans tenir compte de ce qu’il pourrait y avoir derrière dans l’image (par exemple, un fond d’écran ou un calque inférieur). Des pixels de même teinte RVB mais d’alpha différent sont traités comme des entrées distinctes dans l’historique.
Compression et anticrénelage. L’outil lit la valeur exacte stockée dans le fichier. Si l’image est un JPEG ou une capture d’écran, la compression avec pertes et l’anticrénelage ont probablement altéré les valeurs des pixels. Ainsi, deux pixels adjacents dans une zone qui semble unie peuvent avoir des codes hexadécimaux très proches mais différents. C’est pourquoi l’agrandissement est crucial: il permet de choisir le pixel intentionnel.
Redimensionnement des grandes images. Pour éviter de dépasser les capacités mémoire du navigateur, les images dont le côté le plus long excède 4096 pixels sont réduites proportionnellement. Le pixel affiché correspond alors à l’image redimensionnée, non à l’originale. Ce comportement est volontaire et documenté.
Formats de fichiers acceptés et messages d’erreur. Les formats pris en charge sont PNG, JPG, WebP, GIF, AVIF et HEIC. Les types MIME correspondants sont image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic et image/heif. Si vous déposez un fichier non supporté, l’outil affiche: « Ce type de fichier n’est pas pris en charge. Essayez une image PNG, JPG, WebP, GIF, AVIF ou HEIC. » Si l’image ne peut pas être ouverte, le message devient: « Cette image n’a pas pu être ouverte. Elle est peut-être corrompue ou dans un format non pris en charge. »
Navigation au clavier et accessibilité
L’outil n’est pas réservé à la souris. Vous pouvez déplacer un réticule (crosshair) sur l’image à l’aide des touches fléchées du clavier. Chaque pression déplace le réticule d’un pixel dans la direction correspondante. En maintenant la touche Maj (Shift) enfoncée, le déplacement passe à 10 pixels par pression, ce qui permet de parcourir rapidement une grande image.
Lorsque le réticule atteint le pixel désiré, vous pouvez appuyer sur la touche Entrée ou sur la barre d’Espace pour sauvegarder la couleur courante dans l’historique. Cette fonctionnalité est particulièrement utile pour les personnes qui ont des difficultés motrices ou qui préfèrent une méthode précise sans souris. Elle sert aussi quand la surface de l’image est très petite et que la souris manque de précision.
Historique des couleurs et copie des valeurs
L’historique conserve les couleurs que vous avez cliquées (ou sauvegardées par clavier), jusqu’à un maximum de 12 entrées. Chaque entrée est représentée par un échantillon visuel. Cliquer sur un échantillon recharge cette couleur dans l’affichage principal: ses codes hexadécimal, RVB et TSL réapparaissent, de même que l’indication de transparence si elle était présente.
Pour copier une valeur, il suffit de cliquer sur le code hexadécimal, sur la valeur RVB ou sur la valeur TSL affichée. Cela place le texte dans le presse-papiers. Si le navigateur bloque l’accès au presse-papiers, l’outil affiche: « Impossible de copier — votre navigateur a bloqué l’accès au presse-papiers. » Ce blocage survient généralement lorsque la page n’est pas servie en HTTPS ou que les permissions de l’utilisateur les empêchent. Dans ce cas, vous pouvez toujours sélectionner manuellement le code et le copier avec le raccourci Ctrl+C (Cmd+C sur Mac).
Quand utiliser cet outil
Les concepteurs UI qui extraient des couleurs précises d’une maquette ou d’une photo de référence y trouveront leur compte. Les développeurs qui ont besoin d’un code hexadécimal exact pour l’insérer dans un fichier CSS — par exemple #1E90FF pour un bouton, une bordure ou un arrière‑plan — gagnent du temps. Les créateurs de contenu qui échantillonnent des couleurs pour des vignettes, des marques ou des graphiques sociaux peuvent constituer une palette directement depuis une image.
L’outil convient aussi à quiconque doit copier un code hexadécimal depuis une image pour faire correspondre une couleur existante dans un logo, une photo ou une capture d’écran, sans avoir à installer un logiciel lourd ou à ouvrir un éditeur. Tout le traitement s’effectue côté client: l’image ne quitte jamais votre ordinateur, ce qui garantit la confidentialité.
Questions fréquentes
Pourquoi le code hexadécimal affiché ne contient-il pas de transparence?
Le format hexadécimal standard à six chiffres (par exemple #1E90FF) ne code que les composantes rouge, vert et bleu. Une extension à huit chiffres existe (#RRGGBBAA), mais elle n’est pas universellement supportée par tous les navigateurs et logiciels. L’outil choisit donc d’afficher le format le plus courant et de rapporter l’alpha séparément.
Pourquoi deux pixels visuellement identiques donnent-ils des codes hexadécimaux différents?
C’est généralement dû à la compression JPEG ou à l’anticrénelage. Ces techniques modifient légèrement les valeurs des pixels pour réduire la taille du fichier ou adoucir les contours. L’outil lit la valeur numérique réelle stockée dans l’image, qui peut différer d’un pixel à l’autre même dans une zone qui semble uniforme.
Comment utiliser les touches du clavier pour échantillonner une couleur?
Une fois l’image chargée, utilisez les flèches directionnelles pour déplacer le réticule. Maintenez la touche Maj enfoncée pour un déplacement de 10 pixels. Appuyez sur Entrée ou sur la barre d’Espace pour sauvegarder la couleur sous le réticule.
Pourquoi mon image est-elle redimensionnée?
Si la plus grande dimension de l’image dépasse 4096 pixels, elle est réduite pour respecter les limites de mémoire du navigateur et garantir la fluidité de l’outil. Les couleurs sont alors lues sur l’image redimensionnée.
Que faire si le message « Ce type de fichier n’est pas pris en charge » apparaît?
Assurez-vous que votre fichier porte l’une des extensions suivantes: PNG, JPG, WebP, GIF, AVIF ou HEIC. Certains fichiers JPEG avec une extension en minuscules ou majuscules fonctionnent aussi. Si le problème persiste, l’image peut être corrompue.
Comment supprimer l’historique et recommencer?
Cliquez sur le bouton « Recommencer » (Start over). Il efface l’image chargée, vide la liste des couleurs choisies et remet l’outil dans son état initial.