如何使用颜色选择器(滴管)？

Question

我刚刚发现了一个用chrome build工具构建的非常有用的工具.我甚至不知道它的名字,我无法在谷歌上找到它.我会说这是一个像素检查工具.

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

1A.检查具有背景颜色的html元素.

1B.定义元素的背景颜色.

2. 单击颜色选择器.
3. 将鼠标移到页面上的任何元素上(而不是在开发工具上)

请参阅:http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

我的问题:这个工具名称是什么？如何轻松使用？大多数时候我不关心颜色,但我想检查图标的像素.这个工具有热键吗？

Answer 1

要打开滴管器,只需:

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

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

Answer 2

它被称为吸管工具.我不知道它没有快捷键.现在使用它的唯一方法是单击样式侧栏中的颜色选择器框,然后单击您已经在进行的页面.

Answer 3

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

不过，我可以在 Firefox 中轻松获取颜色。

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

如果您无法在 Chrome 中使用吸管工具，这是一个很好的解决方法。
我还发现它更容易访问:-)