Firefox : comment identifier une couleur spécifique dans une page Web

Si vous êtes un designer, vous faites probablement attention à la conception des choses que vous utilisez, à la recherche d'inspiration ou d'idées que vous aimeriez adopter. Les sites Web ne sont pas différents et l'un des éléments clés de la conception de sites Web est l'utilisation de la couleur. Si vous repérez un site Web avec la couleur parfaite pour un projet sur lequel vous travaillez ou auquel vous pensez, vous voudrez probablement déterminer exactement de quelle couleur il s'agit. Bien que vous puissiez prendre une capture d'écran, l'ouvrir dans un éditeur d'images, puis examiner les valeurs RVB, ce processus est lent. Firefox a en fait un outil de sélection de couleurs intégré afin que vous puissiez gagner du temps et obtenir la valeur exacte dans le format de couleur HTML hexadécimal utilisé sur le Web.

Comment utiliser le sélecteur de couleurs

Le sélecteur de couleurs de Firefox se trouve dans la barre d'outils du développeur. Pour y accéder, cliquez sur l'icône du menu burger dans le coin supérieur droit, puis cliquez sur "Développeur Web" qui se trouve en quatrième position à partir du bas.

Cliquez sur l'icône du menu burger dans le coin supérieur droit, puis cliquez sur « Développeur Web ».

Dans la liste des outils de développement Web, cliquez sur « Pipette » et l'outil Pipette s'ouvrira.

Astuce : L'outil Pipette ne peut pas être déplacé entre les onglets ou les fenêtres, alors assurez-vous de l'ouvrir dans l'onglet dans lequel vous souhaitez l'utiliser. Vous ne pourrez pas non plus faire défiler la page, alors assurez-vous que vous êtes dans au bon endroit sur la page. Bien que vous puissiez techniquement effectuer un zoom avant et arrière, cela entraînera la rupture du centrage du sélecteur de couleurs, ce qui le rendra beaucoup plus difficile à utiliser avec précision.

Dans la liste des outils de développement Web, sélectionnez « Pipette ».

L'outil Pipette suivra votre souris à travers la fenêtre, alors déplacez le carré central en surbrillance sur la couleur que vous souhaitez sélectionner. Le niveau de zoom est suffisamment précis pour vous permettre de voir et de choisir facilement la couleur d'un pixel spécifique.

Le code de couleur HTML du pixel est affiché dans la petite case sous l'outil de zoom mais sera également copié dans le presse-papiers si vous cliquez sur la couleur que vous aimez. Sachez simplement que cliquer fermera le sélecteur de couleurs, vous obligeant à le rouvrir à nouveau si vous vouliez choisir plusieurs couleurs.

Déplacez votre souris sur le pixel spécifique dont vous aimez la couleur, puis notez le code de couleur HTML ou cliquez pour le copier dans votre presse-papiers.