如何使用颜色选择器（滴管）？

Posted 2023-03-07

【中文标题】如何使用颜色选择器（滴管）？

【英文标题】：How to use color picker (eye dropper)?

【发布时间】：2015-04-27 07:32:40

【问题描述】：

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

我找到以下方法如何使用它：

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

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

点击颜色选择器。 将鼠标移到页面上的任何元素上（而不是在开发工具上）

见：http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

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

【问题讨论】：

这对于复制和更高级别的视图很有用：chrome.google.com/webstore/detail/eyedropper-color-pick/…

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

【参考方案1】：

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

【讨论】：

需要一种更简单的方法

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

但是你需要先有一个颜色规则

@SuperUberDuper 或使用 var...--c: red，将颜色属性放入开发工具面板的最简单方法。

你能解释一下吗

【参考方案2】：

简单地打开滴管：

打开开发工具 F12 转到元素选项卡 在样式侧栏下单击任何颜色预览框

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

【讨论】：

我目前使用的是 68.0.3440.106 版本。您不能再使用调色板来选择颜色

Chrome v72 在这里，它的工作原理与答案中描述的一样。

我在 v78 上，无法让它工作；甚至来这里看看我是否忘记了一些细节。

至少在 Chrome v88 中，我刚刚注意到颜色选择器在 iframe 中不起作用：它会从主页中选择颜色，但如果你将光标移到里面则不会一个 iframe。

【参考方案3】：

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

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

在 Firefox 中打开页面 汉堡菜单 -> Web 开发人员 -> 吸管 将吸管工具拖到图像上...单击。 颜色被复制到剪贴板，吸管工具消失。 粘贴颜色代码

如果您无法让滴管工具在 Chrome 中运行，这是一个很好的解决方法。 我也发现它更容易访问:-)

【讨论】：

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