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.

Cliquez sur le sélecteur de couleur.
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?

google-chrome-devtools

— Skalár Wag
source

Ceci est utile pour la copie et les vues de niveau supérieur: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Répondu également dans les commentaires ci-dessous; vous pouvez le trouver dans les outils de développement (sur l'onglet Eléments, sous l'onglet "Styles", cliquez sur n'importe quelle règle de "couleur", il y a un sélecteur de couleur sur la fenêtre contextuelle) Ce que je recherche est un moyen sans besoin de couleur règle, comme imaginez que vous voulez choisir une couleur uniquement à partir d'une image.

— mdikici

Réponses:

105

Pour ouvrir simplement le compte-gouttes:

Ouvrez DevTools F12
Aller à l'onglet Eléments
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.

— Jaqen H'ghar
source

J'utilise actuellement la version 68.0.3440.106. Vous ne pouvez plus utiliser la palette de couleurs pour sélectionner une couleur

— caras

Chrome v72 ici, cela fonctionne comme décrit dans la réponse.

— Dinei

Je suis sur v78 et je ne peux pas faire fonctionner cela; même venu ici pour savoir si j'oubliais un détail.

— Herbert Van-Vliet

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.

— Jaredwilli
source

il doit y avoir un moyen plus simple

— SuperUberDuper

@SuperUberDuper Eh bien, il y en a maintenant. Ma réponse remonte à quelques années. De nos jours, vous pouvez simplement cliquer sur la petite boîte d'échantillons de couleur à côté des valeurs de couleur dans la barre latérale des styles, puis déplacer votre souris sur la page pour voir l'outil de sélection de couleur. C'est beaucoup plus facile maintenant.

— jaredwilli

mais vous devez d'abord avoir une règle de couleur

— SuperUberDuper

@SuperUberDuper ou utilisez un var ... --c: red, le moyen le plus simple d'obtenir une propriété de couleur dans votre panneau devtools.

— Brandito

pouvez-vous expliquer plus

— SuperUberDuper

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.

Ouvrir la page dans Firefox
Menu Hamburger -> Développeur Web -> Pipette
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.
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 :-)

— SherylHohman
source

Je pensais que cela ne fonctionnait pas non plus pour moi, mais apparemment, il y a une limitation pour que cela ne fonctionne que lorsque les outils de développement sont ancrés dans la fenêtre du navigateur.

— buzard le