Blog

Mesurer couleurs et espacements depuis une capture d’écran

Publié le 25 octobre 2026 · sélecteur de couleur, espacements, design, capture d’écran

Repérez une valeur hexadécimale, une bordure de 1 px ou l’écart exact entre deux éléments. La loupe, le sélecteur de couleur et la taille de sélection suffisent.

Une capture d’écran est souvent la seule source de vérité dont vous disposez : un rapport de bug d’un client, l’interface d’un concurrent, un design livré autrement que sur la maquette. Savoir y lire les couleurs et les distances exactes est une petite compétence, et InSnap place les outils dans l’écran de capture, là où se trouve déjà l’image.

Prélever la couleur sous le pointeur

Dans InSnap, activez le sélecteur de couleur dans Réglages › Capture d’écran, puis lancez une capture. Quand vous vous déplacez sur l’image figée, le panneau de couleur affiche la valeur sous le pointeur.

• Shift bascule entre RGB et HEX.
• C copie la valeur courante dans le presse-papiers.
• L’échantillon vient de la capture figée, pas de l’écran en direct : la valeur ne change donc pas si une vidéo ou une animation tourne en dessous.

Ce dernier point compte pour la revue de design : vous mesurez les pixels qui ont été capturés, exactement ce que contient le fichier.

Lire un pixel isolé avec la loupe

La loupe affiche une grille agrandie autour du pointeur, avec le pixel central marqué. Utilisez-la quand la question n’est pas « quelle est la couleur de cette zone » mais « que se passe-t-il à ce pixel précis » :

• Est-ce une bordure de 1 px ou une ombre ?
• Le séparateur fait-il un pixel ou deux ?
• L’icône est-elle alignée sur la ligne de base du texte ?
• Le rayon des coins est-il uniforme sur les quatre ?

À un zoom normal, ces détails disparaissent dans l’anticrénelage. La grille de pixels les rend comptables.

Mesurer un espacement avec une sélection

Il n’y a pas d’outil règle, mais la sélection en est une. Tracez un cadre sur l’écart à mesurer et lisez l’étiquette de taille :

1. Lancez la capture et faites glisser du bord d’un élément au bord du suivant.
2. Lisez la largeur ou la hauteur dans l’étiquette de taille. Elle indique des pixels physiques, ce que contient le fichier.
3. Appuyez sur Échap pour annuler, ou copiez la sélection si vous avez aussi besoin de l’image.

Deux remarques pratiques :

• Mesurez l’écart, pas l’élément entier. Une sélection du bord gauche d’un bouton au bord gauche du suivant donne le pas ; soustrayez la largeur du bouton si vous voulez l’écart.
• Tenez compte de l’échelle de l’écran. Sur un écran Retina, 20 pixels physiques font 10 points. Si la spécification est en points, divisez par le facteur d’échelle ; la capture, elle, est toujours en pixels.

Une courte liste de contrôle pour la revue de design

Quand une capture ne suffit pas

Les pixels montrent ce qui a été rendu, pas pourquoi. Si une couleur semble fausse, vérifiez le profil de l’écran et le thème de l’app avant d’ouvrir un bug ; si un écart paraît bizarre, confirmez le niveau de zoom de la page. Une capture prise à 90 % de zoom dans le navigateur donne des tailles qui ne correspondent pas au CSS.

Pour comparer, capturez les deux états séparément et épinglez-les tous les deux : les fenêtres épinglées restent au-dessus de l’app, vous pouvez passer de la maquette à la réalisation sans perdre le fil.

Questions fréquentes

Puis-je copier directement la valeur de la couleur ?

Oui. Activez le sélecteur de couleur, survolez le pixel, appuyez sur Shift pour choisir RGB ou HEX, puis sur C. La valeur part dans le presse-papiers, prête à coller dans un ticket ou un fichier de design.

Comment mesurer un écart en points plutôt qu’en pixels ?

Lisez la taille de la sélection en pixels physiques et divisez par l’échelle de l’écran : 2 sur un écran Retina, 1 sur un écran standard, ou la valeur indiquée dans les réglages d’écran du système pour un mode mis à l’échelle.

Le sélecteur de couleur lit-il l’écran en direct ou la capture ?

La capture. L’image est figée au moment où vous appuyez sur le raccourci, et le sélecteur échantillonne ces pixels : la valeur correspond au fichier que vous enregistrez ou partagez.

Autres articles du blog