如何使用Google Chrome颜色选择器？

google chrome自带了chrome devtools，这是一套网页开发工具集合。在所有可访问的工具中，chrome中的颜色选择器非常方便。

但是，如何访问它？如何使用它？该工具还提供了哪些功能？

在本文中，我们将探讨这个工具及其功能。

如何启动chrome颜色选择器？

您可以使用键盘快捷键或gui（图形用户界面）来访问颜色选择器chrome工具。

按下ctrl + shift + i（键盘）以获取devtools，然后转到颜色选择器。如果您使用的是mac，您需要按下command + option + i。

使用鼠标，您需要右键单击，然后点击“检查”来浏览devtools。

您还可以将chrome devtools设置为在每个新标签页中自动打开。因此，您可以快速访问浏览器上每个标签页的颜色选择器。

要实现这一点，您需要在命令行中使用以下标志启动chrome的新实例：

--auto-open-devtools-for-tabs

下面是在linux终端上使用自动打开devtools启动chrome的样子：

google-chrome-stable --auto-open-devtools-for-tabs

如何在chrome上使用颜色选择器？

启动devtools后，您将需要浏览工具以访问您想要处理的网页或设计上的颜色的工具。

默认情况下，您应该能够在devtools底部看到“样式”部分处于活动状态，如屏幕截图所示。

如果您选择了其他内容，请确保点击“样式”以访问网页的css代码。

在这里，您需要浏览可用的css代码并查找标有背景或颜色的颜色框，位于body部分下面。这就是您正在寻找的颜色选择器。

只需点击颜色框，它应该给您更多选项，如下面的屏幕截图所示。

就是这样！voilà，您的浏览器上有了颜色选择器，可以帮助您。

在这里，您应该找到颜色的十六进制代码或rgb值，并且可以选择其他css 元素进行探索和检查网页上的设计。

chrome颜色选择器的功能

chrome内置的颜色选择器除了十六进制代码外，还提供了各种信息来识别颜色。

以下是您可以期望的内容。一些关键功能包括：

调色板：您可以快速应用一些预定义的颜色调色板，而无需循环浏览许多色调。

颜色格式：您可以从十六进制代码切换到rgba值和hsla颜色值。

取色器：当您访问颜色选择器时，您可以浏览网页并选择任何元素以获取该颜色的十六进制代码。您可以点击颜色选择器切换以启用/禁用它。

您可以调整更多选项以获得所选颜色的精确值。以下是它们：

• 复制到剪贴板：您可以快速复制所识别颜色的代码到剪贴板。
• 颜色渐变：您可以调整颜色的阴影，并循环浏览您喜欢的颜色组合。
• 透明度控制：您可以调整透明度以使其看起来坚固或最小化。
• 背景颜色选择器：选择适合的背景颜色以获得完美的对比度。
• 对比度比例：调整对比度或更正对比度以使文本/元素可见。

注意：颜色选择器工具不仅限于google chrome，可以在任何基于chrome的浏览器上使用，如brave。

如何在google slides中使用chrome颜色选择器？

如果您在google slides网页的标题部分执行右键单击，可以导航访问颜色选择器工具。即使google slides没有内置的颜色选择器工具，这也足够了。

如果您不习惯在google slides中使用devtools，还可以尝试一些用于此任务的chrome扩展。

chrome扩展作为颜色选择器的替代方案

虽然扩展程序可以很方便，但应注意它们并未经过主动更新或维护。考虑到它们需要访问您的浏览器数据，因此在安装任何扩展程序时都应该谨慎，即使是这里推荐的扩展程序。

然而，有两个流行的扩展程序可能会引起您的兴趣：

#1. colorzilla

colorzilla扩展程序提供了与chrome内置颜色选择器相同的所有基本功能。作为额外功能，您还可以检查最后选择的颜色的历史记录。

因此，这对于每个用例都非常实用，不仅限于google slides。

#2. colorpick eyedropper

如果使用devtools的吸管工具遇到问题，您可以尝试使用colorpick eyedropper来获取一个可以不访问web工具的吸管。

当您选择一个颜色时，它将显示rgb值和生成颜色调色板的选项。与上述扩展程序类似，您还可以检查您选择的颜色的历史记录。

最后的话 🎨

chrome devtools颜色选择器是一个有用的工具。您不需要专业工具来帮助您识别颜色和相关的代码或值。chrome内置工具使此过程变得简单，无需第三方扩展程序。

从平面设计师到构建网站模板的web开发人员，每个人都应该发现它很有帮助。

当然，您也可以选择使用可用的第三方扩展程序。但是，除非您需要它，否则我们建议您探索devtools的所有功能。