Vous avez une image et il vous en faut un seul chiffre : le code hexadécimal d'une couleur précise. Peut-être un logo dont la spécification de marque a disparu depuis longtemps, la capture d'un site dont vous voulez assortir le bleu, ou une photo avec une nuance que vous aimeriez réutiliser. Taper ce que vous pensez être la couleur ne marche pas — votre œil ne peut pas lire #3A7BD5 sur un écran, et la couleur qui a l'air juste est généralement à quelques chiffres près. Voici comment lire la vraie valeur directement dans les pixels.
Pourquoi deviner ne marche jamais tout à fait
Un seul « bleu » à l'écran est en réalité un éventail de bleus quasi identiques, et la luminosité et le calibrage de votre moniteur les décalent davantage. Choisissez à l'œil et vous tombez proche mais faux — assez proche pour que l'écart soit agaçant sans être évident, si bien que vous perdez dix minutes à vous demander pourquoi le bouton n'est pas assorti à l'en-tête. La solution est de cesser de deviner et de lire le chiffre que le pixel stocke réellement.
Obtenez le code en trois étapes
La façon fiable est d'échantillonner le pixel directement avec une pipette à couleur.
- Chargez l'image. Déposez le logo, la capture ou la photo dont vous prélevez.
- Survolez le pixel exact. Une loupe grossissante suit votre curseur et agrandit la zone en dessous, si bien que sur un bord net vous voyez quel pixel est la couleur de marque uniforme et quel pixel est un mélange anticrénelé de deux couleurs.
- Cliquez pour sauvegarder, puis copiez. Chaque clic garde la couleur comme échantillon montrant son HEX, son RGB et son HSL, chacun avec son propre bouton de copie. Cliquez le HEX et il est dans votre presse-papiers.
Tombez sur le bon pixel
La loupe compte plus qu'il n'y paraît. Là où une couleur en rencontre une autre — une lettre sur un fond, le bord d'une icône — les pixels entre les deux sont anticrénelés : un mélange lissé des deux couleurs, ni l'une ni l'autre. Échantillonnez là et vous obtenez une valeur boueuse qui ne correspond à rien. Visez une zone uniforme, quelques pixels à l'intérieur de la forme, où la couleur est pleine, et la vue agrandie vous laisse confirmer que vous y êtes avant de cliquer.
Sur un logo propre ou une interface plate, c'est facile — la couleur est uniforme sur une large zone. Sur une photo, cela demande plus de soin, car le grain et la compression font que des pixels voisins diffèrent vraiment. Prélevez dans une région calme et régulièrement éclairée et prenez deux ou trois échantillons pour vérifier qu'ils concordent.
HEX, RGB ou HSL — prenez ce qui convient
Chaque échantillon vous donne les trois à la fois, vous copiez donc celui que veut votre destination :
- HEX (
#3A7BD5) — la valeur par défaut du web. CSS, Figma, Canva, documents de marque. Copiez celui-ci sauf raison contraire. - RGB (
rgb(58, 123, 213)) — les valeurs des canaux, utiles quand un outil les demande ou que vous avez besoin de transparence viargba. - HSL (
hsl(215, 65%, 53%)) — teinte, saturation, luminosité. Idéal quand vous voulez ajuster la couleur : l'éclaircir pour un état de survol, l'atténuer pour une variante, ou en construire une échelle.
Comme chaque échantillon porte les trois, vous ne rééchantillonnez jamais juste pour changer de format.
Attraper plusieurs couleurs d'un coup
Un logo est rarement d'une seule couleur. Cliquez la couleur principale, l'accent et la couleur du texte en une seule passe — chacune s'empile dans la liste pour les comparer et les copier l'une après l'autre, au lieu de charger l'image trois fois.
Si vous voulez un résumé de couleurs d'une image entière plutôt que des pixels précis — la palette globale dont une photo est faite — c'est une autre tâche, et l'outil de palette distinct d'img.diy extrait automatiquement les couleurs dominantes pour vous. Utilisez cette pipette quand vous connaissez l'endroit exact voulu ; utilisez l'outil de palette quand vous voulez que l'image soit caractérisée pour vous.
Ça reste sur votre appareil
L'image est lue localement dans votre navigateur depuis une toile — rien n'est téléversé, il n'y a aucune inscription, et après le premier chargement ça fonctionne hors ligne. Ainsi, une maquette non sortie ou l'élément privé d'un client ne quitte jamais votre machine juste parce qu'il vous fallait un code hexadécimal.
Chargez l'image, survolez le pixel, cliquez, et copiez le code.