Comment utiliser le sélecteur de couleur (compte-gouttes pour les yeux)?

Il existe un outil très utile intégré à l'outil de développement chrome, que je viens de découvrir. Je ne connais même pas son nom et je n'arrive pas à le trouver sur google. Je dirais que c'est un outil d'inspection de pixels.

Je trouve la méthode suivante comment l'utiliser:

1a. Inspectez un élément html avec une couleur d'arrière-plan.

1b. Définissez la couleur d'arrière-plan d'un élément.

2. Cliquez sur le sélecteur de couleur.
3. Déplacez votre souris sur n'importe quel élément de la page (pas sur l'outil de développement)

Voir: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

Mes questions: quel est le nom de cet outil? Comment l'utiliser facilement? La plupart du temps, je me fiche de la couleur, mais je veux inspecter les pixels d'une icône. Existe-t-il un raccourci clavier de cet outil?

Pour ouvrir simplement le compte-gouttes:

1. Ouvrez DevTools F12
2. Aller à l'onglet Eléments
3. Sous la barre latérale Styles, cliquez sur n'importe quelle zone d'aperçu des couleurs

Sa fonctionnalité principale est d'inspecter les valeurs de couleur des pixels en cliquant dessus, mais avec ses nouvelles fonctionnalités, vous pouvez également voir la palette de couleurs ou la palette de conception matérielle existante de votre page en cliquant sur l'icône des deux flèches en bas. Cela peut être très pratique lors de la conception de votre page.

Il s'appelle simplement l'outil pipette. Il n'y a pas de touche de raccourci pour cela à ma connaissance. La seule façon de l'utiliser maintenant est de cliquer sur la boîte de sélection de couleur dans la barre latérale des styles, puis de cliquer sur la page comme vous l'avez déjà fait.

Actuellement, l'outil pipette ne fonctionne pas dans ma version de Chrome (comme décrit ci-dessus), bien que cela ait fonctionné pour moi dans le passé. J'entends qu'il est mis à jour dans la dernière version de Chrome.

Cependant, je suis capable de saisir facilement les couleurs dans Firefox.

1. Ouvrir la page dans Firefox
2. Menu Hamburger -> Développeur Web -> Pipette
3. Faites glisser l'outil Pipette sur l'image ... Cliquez sur .
   La couleur est copiée dans votre presse-papiers et l'outil Pipette disparaît.
4. Coller le code couleur

Si vous ne parvenez pas à faire fonctionner l'outil Pipette dans Chrome, c'est une bonne solution.
Je trouve également plus facile d'accéder :-)