web-dev-qa-db-fra.com

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

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

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

1a. Inspectez un élément HTML avec la couleur de fond.

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

  1. Cliquez sur le sélecteur de couleur.
  2. 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, peu m'importe la couleur, mais je veux inspecter les pixels d'une icône. Existe-t-il un raccourci clavier de cet outil?

google-chrome-devtools
82
Skalár Wag

Pour ouvrir le compte-gouttes simplement:

  1. Ouvrez DevTools F12
  2. Aller à l'onglet Éléments
  3. Sous Barre latérale Styles, cliquez sur une zone d’aperçu couleur.

enter image description here

Sa principale fonctionnalité est d'inspecter les valeurs de couleur de pixel en cliquant dessus. Toutefois, grâce à ses nouvelles fonctionnalités, vous pouvez également visualiser la palette de couleurs existante ou la palette de conception de matériau de votre page en cliquant sur l'icône des deux flèches en bas. Cela peut être assez pratique lors de la conception de votre page.

82
Jaqen H'ghar

C'est simplement appelé l'outil Pipette. À ma connaissance, il n'y a pas de touche de raccourci pour cela. La seule façon de l’utiliser maintenant est de cliquer sur la zone de sélection des couleurs dans la barre latérale des styles, puis de cliquer sur la page comme vous l’avez déjà fait.

30
jaredwilli

Actuellement, l'outil Pipette ne fonctionne pas dans ma version de Chrome (comme décrit ci-dessus), même si cela a fonctionné pour moi dans le passé. J'ai entendu dire que cette mise à jour était en cours 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.
    La couleur est copiée dans le Presse-papiers et l'outil Pipette disparaît.
  4. Coller le code couleur

Si vous ne parvenez pas à utiliser l'outil Pipette pour fonctionner sous Chrome, cette opération est efficace.
Je trouve aussi plus facile d’accéder :-)

2
SherylHohman