如何使用 Chrome DevTools 从我访问的任何网站中选择颜色?

How can I pick color from any website I visit using Chrome DevTools?

当我访问网站时,我想保存我在网站上发现的有趣颜色。

如何使用 Chrome DevTools 从我当前看到的页面中选择颜色代码?

注意:我不想使用第三方插件,比如 chrome 扩展插件。

您可以使用 google chrome

从任何元素中选择颜色

1. 从 HTML 元素中选取颜色:
如果颜色在简单的 html 元素上,如 buttontextspan 等,您可以检查该元素并复制其颜色,如评论中所述。

2. 从图像中选取颜色:
如果颜色在图像或背景图像上,或嵌套 html 元素的背景颜色,则可以使用 ff 策略。

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

2.2. 然后点击上面的颜色选择器框后,转到您要从中选择颜色的图像或背景图像(当您这样做时,您将请注意光标从指针变为 chrome-颜色选择器图标)。

事实上即使是案例 1,您也可以使用解决方案 2

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

只需使用 chrome 扩展。我已经尝试了其中的两个,它们非常易于使用,您可以立即获得各种格式的颜色。

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

这是link:https://chrome.google.com/webstore/search/color%20picker?hl=en

Colorzilla chrome 扩展是我最喜欢的,而且速度很快。

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

激活CSS概览

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

这将使 CSS 概览 选项卡在 DevTools

中可用

您可以点击任何颜色来列出相关元素