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

nr7wwzry  于 2022-12-06  发布在  Go
关注(0)|答案(6)|浏览(214)

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

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

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

t1rydlwq

t1rydlwq1#

你可以使用谷歌浏览器从任何元素中挑选颜色

**1.**从HTML元素中选取颜色

如果颜色是在简单的html元素上,如buttontextspan等,你可以检查元素并复制它的颜色,正如评论中提到的。

**2.**从图像中挑选颜色

如果颜色在图像或背景图像上,或者嵌套html元素的background-color上,则可以使用ff策略。

  • 2.1.* 从检查页面中任何可以显示颜色选择器框的简单元素开始。

  • 2.2.* 点击上面的颜色选择器框后,后藤您要从中选择颜色的图像或背景图像(* 当您这样做时,您会注意到光标从指针变为色度颜色选择器图标 *)。

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

disbfnqx

disbfnqx3#

使用Chrome中名为CSS概述的实验性功能。无需Chrome扩展或外部工具即可获得任何网站上使用的颜色概述
激活CSS概述
1.打开开发工具
1.转到DevTool设置(齿轮图标或使用F1键)
1.打开实验部分
1.启用CSS概览选项

这将使CSS概述选项卡在DevTools中可用
您可以单击任何颜色以列出相关元素

vsnjm48y

vsnjm48y4#

简单地使用chrome扩展。我已经尝试了其中的两个,它们非常容易使用,你可以得到各种格式的颜色instatly。
检查页面html或css文件将花费太多时间。
以下是链接:https://chrome.google.com/webstore/search/color%20picker?hl=en

2o7dmzc5

2o7dmzc55#

Colorzilla chrome扩展是我的最爱和快速。

yv5phkfx

yv5phkfx6#

Chrome发布了EyeDropper API到一个稳定的版本。你现在可以直接从你的网站上挑选颜色,而不是打开开发工具。

https://pickcoloronline.com/tutorials/pick-color-from-website/是一个可以实现此目的的工具
目前您只能在Edge、Chrome和Opera中使用此功能。其他浏览器支持可能会在未来推出:https://caniuse.com/mdn-api_eyedropper

相关问题