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

Posted 2023-02-16

【中文标题】如何从我使用 Chrome DevTools 访问的任何网站中挑选颜色？

【英文标题】：How can I pick color from any website I visit using Chrome DevTools?

【发布时间】：2015-04-27 17:19:00

【问题描述】：

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

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

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

【问题讨论】：

您可以检查包含您感兴趣的颜色的元素并查看CSS。

k，谢谢，但是如果元素是图像呢？

如果是图片，不能用chrome检查颜色。您需要第三方应用。

【参考方案1】：

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

激活 CSS 概览

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

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

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

【参考方案2】：

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

【参考方案3】：

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

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

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

【参考方案4】：

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

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

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

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

2.2. 然后在点击上面的颜色选择框后，转到您要从中选择颜色的图像或背景图像（当您这样做时，您会注意到光标从指针变为chrome-color-picker 图标）。

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

【参考方案5】：

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