130

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.

  1. Click on the color picker.
  2. 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?

Skalár Wag
  • 2,247
  • 2
  • 18
  • 21
  • This is a useful one for copying and higher-level views: https://chrome.google.com/webstore/detail/eyedropper-color-pick/chdnpgmbehiidfgbemhcmmjcnkljfmfo?hl=en – austin_ce Oct 06 '17 at 16:42
  • Answered in the comments below as well; you can find it in the dev tools (on Elements tab, under that on "Styles" tab click on any "color" rule, there is a color picker on the popup) What i am looking for is a way without need of a color rule, like imagine you want to pick a color just from an image. – mdikici Feb 07 '19 at 23:09

3 Answers3

159

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

enter image description here

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.

Jaqen H'ghar
  • 16,186
  • 8
  • 49
  • 52
  • 6
    I'm currently using version 68.0.3440.106. You can no longer use the color palette to select a color – Caner Aug 25 '18 at 09:16
  • 2
    Chrome v72 here, it works just as described in the answer. – Dinei Feb 27 '19 at 00:38
  • 1
    I'm on v78 and cannot get this to work; even came here to figure out if I was forgetting some detail. – Herbert Van-Vliet Dec 01 '19 at 13:44
  • 1
    At least with Chrome v88, I've just noticed that the colour picker doesn't work within an `iframe`: it will pick colours from the main page, but not if you move the cursor inside an iframe. – TripeHound Feb 24 '21 at 11:07
  • I am using Chrome v103, color picker works fine (and had been working fine in every version of Chrome I'd used). However with the most recent update I've noticed the color picker doesn't start automatically after clicking a color box in DevTools. I need to click the color box first and then click the "Toggle color picker" button (1 more click). Is there any workaround to turn it on automatically? – Kristián Filo Jul 07 '22 at 12:32
34

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.

jaredwilli
  • 11,762
  • 6
  • 42
  • 41
5

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 :-)

SherylHohman
  • 16,580
  • 17
  • 88
  • 94
  • 1
    I though it wasn't working for me too, but apparently there is a limitation so that it works only when devtools are docked in browser window. – buzard Feb 27 '20 at 09:09