How to use color picker (eye dropper)?

Solution 1:

To open the Eye Dropper simply:

1. Open DevTools F12
2. Go to Elements tab
3. 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.

Solution 2:

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.

Solution 3:

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.

1. Open page in Firefox
2. Hamburger Menu -> Web Developer -> Eyedropper
3. Drag eyedropper tool over the image... Click.
   Color is copied to your clipboard, and eyedropper tool goes away.
4. 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 :-)