La sortie hexadécimale: un standard pour le CSS
Contrairement aux pages sœurs qui présentent le code couleur dans la notation fonctionnelle rgb() ou hsl(), cette page place le format hexadécimal au premier plan. Le code hexadécimal, sous sa forme à six chiffres (par exemple #1E90FF), est la représentation la plus compacte du modèle RVB (Rouge, Vert, Bleu) et s’intègre directement dans n’importe quelle propriété CSS sans parenthèses ni syntaxe supplémentaire. Un color: #1E90FF ou un background-color: #1E90FF s’écrit en une seule chaîne, ce qui explique pourquoi les designers et développeurs web en font leur format de prédilection pour les maquettes, les chartes graphiques et les fichiers de style.
L’absence de canal alpha dans le code hexadécimal standard est un point essentiel: la transparence d’un pixel n’est pas encodée dans le format #RRGGBB. L’outil la reporte donc séparément sous forme de pourcentage, avec un message tel que « Alpha 72 % – ce pixel est partiellement transparent ». Cela évite toute confusion avec la notation #RRGGBBAA (hexadécimal à huit chiffres), rarement supportée nativement dans les navigateurs anciens et absente de la spécification CSS de base. En restant sur le six chiffres, la page garantit une compatibilité maximale avec tous les environnements web.
Le code hexadécimal affiché est toujours celui du pixel exact stocké dans l’image, sans correction ni interpolation. Si l’image source est un JPEG fortement compressé, les valeurs de pixels voisins peuvent varier légèrement à cause des artefacts de compression. L’outil ne modifie rien: ce que vous voyez est le pixel brut, tel qu’il est interprété par le navigateur après décodage.
Du pixel au code: le mécanisme d’échantillonnage
Lorsque vous chargez une image (formats acceptés: PNG, JPG, WebP, GIF, AVIF, HEIC), l’outil affiche immédiatement les dimensions (largeur × hauteur) et les valeurs colorimétriques du pixel central. Ensuite, il suffit de déplacer la souris sur l’image pour que les coordonnées (x, y) et les codes HEX, RGB et HSL se mettent à jour en temps réel. Un effet de loupe – une zone agrandie autour du pointeur – permet de sélectionner exactement le pixel voulu, même dans les zones à l’aspect uniforme mais affectées par l’anticrénelage.
Pour ceux qui préfèrent le clavier, les flèches directionnelles déplacent un réticule pixel par pixel. La touche Maj (Shift) accélère le déplacement en sauts de 10 pixels. Les touches Entrée ou Espace enregistrent la couleur courante dans l’historique, tout comme un clic de souris. Ce mode clavier est particulièrement utile lorsque la souris manque de précision ou pour des utilisateurs qui naviguent sans dispositif de pointage.
Les valeurs affichées sont mises à jour à chaque mouvement, sans latence perceptible. Le code hexadécimal retourné est toujours au format six chiffres (exemple: #A3B4C5). Si le même pixel a une teinte uniforme dans une zone plane, l’échantillonnage reste fiable; en revanche, dans les zones de dégradé ou d’anticrénelage, chaque pixel peut différer du voisin. La loupe devient alors indispensable.
Gestion des formats et des contraintes techniques
L’outil accepte les fichiers image aux formats les plus courants du web: 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é (par exemple un BMP ou un TIFF), un message d’erreur s’affiche: « Ce type de fichier n’est pas pris en charge. Essayez une image PNG, JPG, WebP, GIF, AVIF ou HEIC. » De même, si l’image est corrompue ou dans un format que le navigateur ne parvient pas à décoder, le message « Cette image n’a pas pu être ouverte. Elle est peut-être corrompue ou dans un format non pris en charge. » apparaît.
Pour éviter de saturer la mémoire et de ralentir l’interface, toute image dont le côté le plus long dépasse 4096 pixels est automatiquement réduite par le navigateur. Ce redimensionnement peut altérer légèrement les couleurs si l’algorithme de mise à l’échelle applique un filtre de lissage. Dans la pratique, pour des captures d’écran ou des photos web, la perte est négligeable. Pour une extraction ultra‑précise, il est conseillé d’utiliser une image source ne dépassant pas cette limite ou de redimensionner en amont avec un outil qui conserve les pixels intacts (par exemple un redimensionnement au plus proche voisin).
La transparence est gérée séparément: un pixel semi‑transparent est lu tel quel, sans tenir compte de ce qui pourrait se trouver derrière dans l’image. Le code hexadécimal affiché correspond à ses composantes RVB, et la valeur alpha est rapportée en pourcentage (« Alpha 72 % – ce pixel est partiellement transparent »). Attention: une image JPEG ne contient pas de canal alpha; seuls les formats PNG, WebP, GIF, AVIF et HEIC peuvent avoir des pixels transparents.
L’historique des couleurs: enregistrer et réutiliser
Chaque clic (ou pression sur Entrée/Espace) ajoute la couleur courante à un historique visuel. Cet historique peut contenir jusqu’à 12 entrées. Les couleurs dont les composantes RVB sont identiques mais dont l’alpha diffère sont considérées comme des entrées distinctes – par exemple, un rouge opaque et un rouge à 50 % de transparence apparaîtront tous les deux. Cliquer sur une pastille de l’historique recharge cette couleur dans les affichages HEX, RGB et HSL, permettant de l’examiner à nouveau ou de la copier.
Chacune des trois valeurs (HEX, RGB, HSL) est interactive: un clic dessus copie la chaîne correspondante dans le presse‑papiers. Pour le code hexadécimal, la copie produit exactement #RRGGBB (six chiffres). Si le navigateur bloque l’accès au presse‑papiers (certaines politiques de sécurité ou navigateurs anciens), un message d’erreur s’affiche: « Impossible de copier – votre navigateur a bloqué l’accès au presse‑papiers. » Dans ce cas, l’utilisateur peut sélectionner manuellement le texte du code.
Le bouton « Recommencer » (Start over) réinitialise complètement l’outil: il supprime l’image chargée, vide l’historique des couleurs et remet l’interface dans son état initial. Aucune donnée n’est conservée d’une session à l’autre, ce qui garantit la confidentialité puisque tout le traitement se fait côté client, sans téléchargement vers un serveur.
Cas particuliers et comportements limites
Plusieurs situations méritent d’être connues pour éviter des erreurs d’interprétation. Tout d’abord, un pixel semi‑transparent est lu tel quel: l’outil ne tente pas de simuler son apparence sur un fond blanc ou noir. Cela signifie que le code hexadécimal affiché ne correspond pas à la couleur visuelle que l’on perçoit si l’image est affichée sur un fond quelconque. Pour obtenir la couleur composée avec un fond, il faudrait utiliser une application de traitement d’image.
Ensuite, les images JPEG et les captures d’écran subissent souvent de la compression avec perte et de l’anticrénelage. Ainsi, deux pixels voisins dans une zone censée être uniforme peuvent présenter des différences de quelques unités dans leurs composantes RVB. L’outil ne lisse ni ne moyenne ces valeurs – il renvoie le pixel précis que vous avez pointé, même si celui‑ci est altéré par le format. Pour une extraction fiable, il est préférable d’utiliser une image non compressée (PNG sans perte) et de zoomer sur la zone désirée.
Enfin, le code hexadécimal retourné est toujours un # suivi de six caractères hexadécimaux. Aucune forme abrégée à trois caractères n’est proposée par l’outil, même si certaines couleurs (par exemple #112233) pourraient être réduites à #123. Cela évite toute ambiguïté et reste compatible avec l’ensemble des spécifications CSS.
Questions fréquentes
Le code hexadécimal peut-il être en trois chiffres dans cet outil?
Non, l’outil affiche systématiquement le format à six chiffres (#RRGGBB). La notation abrégée à trois chiffres n’est pas utilisée, car elle ne permet pas de représenter toutes les nuances.
Que faire si mon image est trop grande (>4096 pixels)?
L’image est automatiquement redimensionnée par le navigateur pour que son plus grand côté ne dépasse pas 4096 pixels. Si la précision est cruciale, redimensionnez l’image en amont avec un filtre « au plus proche voisin » afin de préserver les couleurs des pixels.
Comment copier une couleur sans souris?
Utilisez les touches fléchées pour déplacer le réticule, puis Entrée ou Espace pour enregistrer la couleur dans l’historique. Cliquez ensuite sur la pastille pour rappeler la couleur, puis appuyez sur Tab pour atteindre l’un des codes (HEX, RGB, HSL) et validez par Entrée pour copier.
La transparence est-elle prise en compte dans le code hexadécimal?
Non, le code hexadécimal affiché ne contient pas de canal alpha. La transparence est indiquée séparément en pourcentage (par exemple « Alpha 72 % »). Seuls les formats avec canal alpha (PNG, WebP, etc.) peuvent renvoyer une transparence non nulle.
Puis-je utiliser ce code hexadécimal directement dans un fichier CSS?
Oui, le code hexadécimal à six chiffres (#RRGGBB) est directement utilisable dans toute propriété CSS acceptant une couleur: color, background-color, border-color, etc. Aucune syntaxe supplémentaire n’est nécessaire.
Pourquoi les couleurs diffèrent-elles entre l’outil et mon logiciel de graphisme?
Les différences proviennent souvent de la compression de l’image source (JPEG, antialiasing), de l’espace colorimétrique du navigateur (sRGB par défaut) ou du fait que l’outil affiche le pixel brut sans compensation gamma. Vérifiez que votre image utilisée comme échantillon n’a pas été rééchantillonnée.