Google Chrome开发人员工具，如何从我访问过的任何网站中挑选颜色

Question

当我访问网站时，我想保存我在其上找到的有趣颜色。

如何使用 Chrome开发者工具从我目前看到的页面中选择颜色代码？

注意：我不想使用Chrome扩展插件等第三方插件。

Answer 1

您可以使用谷歌浏览器

从任何元素中选择颜色

1。 从HTML元素中挑选颜色：
如果颜色位于简单的html元素上，例如button，text，span等，您可以检查元素并复制其颜色，如评论中所述。

2. 从图片中挑选颜色：
如果颜色位于图像或背景图像上，或嵌套html元素的背景颜色，则可以使用ff策略。

2.1。首先检查可以显示颜色选择器框的页面中的任何位置的简单元素。

2.2。然后在单击上面的颜色选择器框后，转到要从中选择颜色的图像或背景图像（执行此操作时，您将注意到光标从指针变为chrome-color-picker图标）。

事实上即使对于案例1也可以使用解决方案2 。

Answer 2

您现在也可以在DevTools中使用吸管工具http://paul.kinlan.me/eyedropper-chrome-dev-tools/

Answer 3

只需使用chrome扩展程序。我尝试了其中两种，它们非常易于使用，你可以立即获得各种格式的颜色。

检查页面html或css文件将花费太多时间。

以下是链接：https://chrome.google.com/webstore/search/color%20picker?hl=en

Answer 4

Colorzilla chrome扩展名是我最喜欢的快捷方式。

Answer 5

在 Chrome 中使用名为 CSS 概述的实验性功能。无需 Chrome 扩展程序或外部工具即可概览任何网站上使用的颜色

激活 CSS 概览

1. 打开DevTools
2. 转到DevTool 设置（齿轮图标或使用 F1 键）
3. 打开实验部分
4. 启用CSS 概览选项

这将使 CSS 概览 选项卡在 DevTools 中可用

您可以单击任意颜色以列出相关元素