Récupérer les couleurs exactes de n’importe quelle capture d’écran
Les couleurs naissent dans les fichiers de design ; elles finissent dans des captures d’écran — et les deux ne concordent pas toujours. Cet outil lit les vrais pixels de l’image que vous déposez : vous trouvez le code hexadécimal d’une couleur dans une image au lieu de le deviner. Tout fonctionne avec les API canvas de votre navigateur, qui lisent les couleurs directement dans les pixels décodés.
Comment utiliser la pipette
- Ajoutez une image. Déposez un fichier, cliquez pour en choisir un, ou collez une capture d’écran directement depuis le presse-papiers avec ⌘V. Sur téléphone, touchez la carte et choisissez une photo.
- Visez avec la loupe. Survolez l’image avec la souris, ou maintenez le doigt dessus sur téléphone : la loupe agrandit une grille de 11 × 11 pixels autour du point et affiche le code hexadécimal en direct, pour tomber exactement sur le pixel voulu.
- Prélevez, puis ajustez. Cliquez — ou levez le doigt — pour prélever. Chaque couleur prélevée rejoint un bandeau d’historique et s’affiche en HEX, RGB et HSL, avec des boutons pour la copier d’un geste ; les touches fléchées (ou les flèches à l’écran) déplacent la pipette d’un pixel à la fois.
- Récupérez la palette. Six couleurs dominantes sont extraites dès le chargement — un générateur de palette de couleurs intégré. Cliquez sur une couleur de la palette pour copier son code hexadécimal.
Dans les navigateurs Chromium, un bouton Prélever à l’écran apparaît aussi : une pipette en ligne qui échantillonne n’importe quel pixel visible sur votre écran, même en dehors de l’image.
Quand prélever sur une image vaut mieux qu’ouvrir le fichier de design
Le cas le plus courant : vérifier un rendu par rapport à la maquette. La maquette indique que le bouton est en #2F6BFF ; la capture d’écran de l’équipe QA montre ce qui a réellement été livré, une fois que les thèmes, l’opacité et les modes de fusion des calques ont eu leur mot à dire. Prélever la couleur sur la capture tranche la question en quelques secondes. L’autre grand cas : retrouver une palette quand il n’existe plus aucun fichier source — un vieux design dont le fichier Figma a disparu depuis longtemps, la page d’accueil d’un concurrent, une affiche prise en photo. La palette automatique vous donne des couleurs de départ fidèles, et la loupe vous donne les valeurs exactes dans les aplats.
Une vérification de couleur voyage rarement seule. Si la même capture d’écran part dans un rapport de bug, signalez l’écart avec notre outil Annoter une capture d’écran ; si elle va dans une présentation, mettez-la en valeur avec notre outil Mockup de capture d’écran.
HEX, RGB et HSL en un coup d’œil
HEX
Un code hexadécimal est l’écriture d’une couleur en six chiffres hexadécimaux — deux pour le rouge, deux pour le vert, deux pour le bleu : #2F6BFF signifie 47 de rouge, 107 de vert et 255 de bleu. C’est la monnaie courante du CSS, des outils de design et des chartes graphiques — copiez-le pour faire passer une couleur d’un outil à l’autre sans la modifier.
RGB
rgb(47, 107, 255) détaille les trois mêmes canaux en décimal, de 0 à 255 chacun. C’est exactement aussi précis que l’hexadécimal, simplement plus facile à lire et à ajuster canal par canal — et cela se prolonge naturellement en rgba() quand la transparence entre en jeu.
HSL
HSL décrit la couleur comme on se la représente : la teinte, sous forme d’angle sur le cercle chromatique, puis la saturation et la luminosité en pourcentages — hsl(223, 100%, 59%) désigne ce même bleu. Copiez-le pour dériver des états de survol ou des nuances : ajustez la luminosité, gardez la teinte.
Pourquoi un pixel prélevé peut différer de la valeur CSS
Deux effets expliquent la plupart des surprises. Le premier est l’anticrénelage (antialiasing) : au bord d’un texte ou d’un coin arrondi, le moteur de rendu mélange le premier plan et l’arrière-plan, si bien que les pixels du bord n’appartiennent à aucune des deux couleurs — la loupe sert précisément à vous écarter du bord pour prélever dans un aplat. Le second est la gestion des couleurs : une capture d’écran faite sur un écran à large gamme de couleurs (les Mac récents marquent leurs captures en Display P3) passe par une conversion de profil avant que ses pixels n’arrivent sur cette page, ce qui peut décaler un canal d’un ou deux points. Aucun des deux n’est un bug : ce sont des traces fidèles de ce que l’écran affichait. Quand l’exactitude compte, prélevez au milieu des aplats, sur des captures faites sur la même machine.
Le plus efficace reste une source propre. Sur Mac, la commande Prélever une couleur de Snapix (⌃⌥C) se passe complètement de fichier : elle lit n’importe quel pixel à l’écran sous une loupe grossissante et copie son code hexadécimal, sans export ni compression entre les deux.