如何使用拾色器（滴管）？

我刚刚发现了一个内置于chrome dev工具中的非常有用的工具。我什至不知道它的名字，也无法在Google上找到它。我会说这是一个像素检查器工具。

我发现以下方法如何使用它：

1a。检查具有背景色的html元素。

1b。定义元素的背景色。

我的问题：该工具名称是什么？如何轻松使用？大多数时候，我不在乎颜色，但是我想检查图标的像素。该工具有热键吗？

google-chrome-devtools

— 斯卡拉拉·瓦格
source

这是复制和更高级别的观点有用的一个：chrome.google.com/webstore/detail/eyedropper-color-pick/...

— austin_ce

也在下面的评论中回答；您可以在开发工具中找到它（在“元素”选项卡上，在“样式”选项卡下，单击任何“颜色”规则，弹出窗口上都有一个颜色选择器）我正在寻找一种不需要颜色的方法规则，例如想象您只想从图像中选择一种颜色。

— mdikici，

Answers:

104

只需简单地打开滴管：

它的主要功能是通过单击来检查像素颜色值，尽管它具有新功能，但您也可以通过单击底部的两个箭头图标来查看页面的现有调色板或材料设计调色板。在设计页面时，它会非常方便。

— 贾钦·哈加尔
source

我目前正在使用68.0.3440.106版本。您将无法再使用调色板选择颜色

— caras

Chrome v72在这里，它的工作原理与答案中所述相同。

— Dinei

我使用的是v78，无法正常使用；甚至来这里弄清楚我是否忘记了一些细节。

— Herbert Van-Vliet

它仅称为吸管工具。我知道没有快捷键。现在，您唯一可以使用它的方法是，单击样式侧栏中的颜色选择器框，然后按照已经进行的操作单击页面。

— 贾里德威利
source

需要一种更简单的方法

— SuperUberDuper '18

@SuperUberDuper好吧，现在有。我的回答是几岁了。如今，您只需单击样式侧栏中颜色值旁边的小色样框，然后将鼠标移到页面上即可查看颜色选择器工具。现在要容易得多。

— jaredwilli

但是您需要首先设置颜色规则

— SuperUberDuper

@SuperUberDuper或使用var ... --c: red，这是将color属性添加到devtools面板中的最简单方法。

— 布兰迪托

您能解释更多吗

— SuperUberDuper

目前，吸管工具在我的Chrome版本（如上所述）中无法使用，尽管过去曾对我有用。我听说它正在最新版本的Chrome中更新。

但是，我可以在Firefox中轻松获取颜色。

如果您无法使吸管工具在Chrome中运行，则可以解决此问题。
我也发现更容易访问:-)

— 雪莉·霍曼（SherylHohman）
source

我虽然对我也不起作用，但是显然存在限制，因此仅当devtools停靠在浏览器窗口中时才起作用。

— buzard