How to use color picker eye dropper

Question

There is a very useful tool built in chrome dev tool  that I have just discovered  I even don t know its name  and I am not able to find it on google  I would say it is a pixel inspector tool   I find the following method how to use it   1a  Inspect an html element with background color   1b  Define background color of an element    Click on the color picker  Move your mouse over any element on the page  not on the dev tool    See  http   skalar darkware hu skalkaz Chrome-Colorpicker gif  My questions  What is this tool name  How to use it easily  Most of the time I don t care the color  but I want to inspect the pixels of an icon  Is there a hotkey of this tool

User · Answer

It is just called the eyedropper tool  There is no shortcut key for it that I m aware of  The only way you can use it now is by clicking on the color picker box in styles sidebar and then clicking on the page as you have already been doing

User · Answer

Currently  the eyedropper tool is not working in my version of Chrome  as described above   though it worked for me in the past  I hear it is being updated in the latest version of Chrome     However  I m able to grab colors easily in Firefox      Open page in Firefox      Hamburger Menu -  Web Developer -  Eyedropper    Drag eyedropper tool over the image    Click        Color is copied to your clipboard  and eyedropper tool goes away    Paste color code   In case you cannot get the eyedropper tool to work in Chrome  this is a good work around  I also find it easier to access  -

User · Answer

To open the Eye Dropper simply    Open DevTools F12 Go to Elements tab Under Styles side bar click on any color preview box     Its main functionality is to inspect pixel color values by clicking them though with its new features you can also see your page s existing colors palette or material design palette by clicking on the two arrows icon at the bottom  It can get quite handy when designing your page

[google-chrome-devtools] How to use color picker (eye dropper)?

Examples related to google-chrome-devtools