How to use color picker (eye dropper)?

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?

152197 次浏览
小开

这就是所谓的眼药水滴管工具。据我所知没有快捷键。现在使用它的唯一方法是点击样式侧边栏中的颜色选择框，然后像之前一样点击页面。

小开

简单地打开滴眼液:

  1. 打开 DevTools F12
  2. 转到“元素”选项卡
  3. 在样式边栏下，单击任意颜色预览框

enter image description here

它的主要功能是通过点击像素颜色值来检查像素颜色值，通过点击底部的两个箭头图标，你也可以看到页面现有的颜色调色板或材质设计调色板。在设计页面时，它可以变得非常方便。

小开

目前，眼药水滴管工具不能在我的 Chrome 版本中工作(如上所述) ，尽管它在过去对我有效。我听说它正在最新版本的 Chrome 中进行更新。

然而，我可以在 Firefox 中轻松地抓取颜色。

  1. Open page in Firefox
  2. Hamburger Menu -> Web Developer -> Eyedropper
  3. Drag eyedropper tool over the image... 咔嚓.
    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.
我还发现它更容易访问: -)


提交答案