在这篇文章中，我们将向您展示 如何使用内置的 Google Chrome 不带扩展的颜色选择器。 颜色选择器是一个方便的工具，用于从调色板或光谱中选择特定颜色。 虽然有多种颜色选择器工具和扩展程序可帮助您识别特定的颜色代码，但您可以使用 Chrome 的内置颜色选择器来选择吸引您眼球的颜色。
Chrome 的颜色选择器本质上是一个 吸管 工具 它允许用户在屏幕上的任何位置选择颜色并在设计中使用它。 它不是一个独立的工具，而是它的一部分 Chrome DevTools（允许 Web 开发人员分析和调试网站和 Web 应用程序的工具）。 但是，最终用户可以访问该工具 找出您在线发现的颜色的 Hex、RGBA 或 HSLA 值。
笔记： 因为内置颜色选择器是 Chrome 您不能在使用 WebTools 的网站之外使用它们。
如何使用内置 Google Chrome 没有扩展的颜色选择器？
在下面的部分中，我们将为您提供详细的概述 与内置的 Google Chrome 选色器。
1]启动Chrome颜色选择器
要启动颜色选择器，您需要打开它 Chrome首先是 DevTools。 为此， 右键点击 单击包含所需颜色的图像或网页部分，然后选择 查看。 检查选项允许用户查找有关网页的隐藏信息，包括 JavaScript/媒体文件、HEX/RGB 颜色代码等。您还可以使用 Ctrl + Shift + I 用于调出 DevTools 面板的键盘快捷键。
该面板显示在网页底部。 在 DevTools 面板的右侧，您应该看到以下内容 风格 默认情况下位于“样式”选项卡上（如果选择其他内容，请切换到“样式”选项卡）。 网站的 CSS 代码显示在此选项卡上。 滚动浏览代码并查找标记为的样本 background-color, color，或类似的东西。 你可以看到其中的很多。 单击任何一个框即可显示隐藏的颜色选择器 Chrome。
2]使用Chrome颜色选择器
在颜色选择器工具弹出窗口中，您将看到 吸管 象征。 单击它以激活该工具。
您的鼠标指针将变为 一个包含方格网格的大圆。 将鼠标悬停在网页上您想要的颜色所在的区域。 基本上，吸管可以让您通过在像素级别放大屏幕来准确显示您感兴趣的色调。
当阴影进入圆中心的正方形（具有较厚的外边缘）时，停止指针。 做一件事 鼠标左键单击 在颜色选择器弹出窗口中显示颜色代码。 默认情况下，该工具显示 十六进制代码 (HEX) 颜色。
您可以使用它来更改颜色值的格式 向上/向下箭头 颜色代码旁边的图标。 Chrome 的颜色选择器可让您看到 十六进制 代码RGBA 价值观高斯拉 价值观HWBA 价值观我一 与所选颜色相关的值和其他值。
笔记： 吸管充当切换开关，因此您可以单击该图标来打开或关闭该工具。
3]Chrome 颜色选择器的主要特点
以下是 Chrome 内置颜色选择器的一些主要功能：
- 颜色渐变： 在颜色选择器弹出窗口的顶部，有一个渐变窗格可帮助您导航所选颜色的相似色调。 只需将光标悬停在渐变上，然后单击所需的阴影即可。 颜色的十六进制代码（或其他值）将相应更新。
- 色调： 渐变区域下方是一个滑块，可用于调整色调。 当您更改色调时，所选颜色及其十六进制值也会相应更改。 您还可以使用鼠标指针从渐变区域选择不同的阴影。
- 不透明度： 色相滑块下方是不透明度滑块。 您可以使用它来更改所选颜色的不透明度。
- 复制到剪贴板： 吸管图标旁边是一个圆圈，显示所选的色调。 您只需单击该圆圈即可复制颜色的 RGB 值（到剪贴板）。
- 调色板： 颜色选择器弹出窗口的底部是一个调色板。 事实上，有多种调色板可供选择（材质、自定义、CSS 变量、页面颜色）。 使用调色板旁边的向上/向下箭头图标可查看所有其他调色板。 这些调色板显示网站上可用的不同颜色。 如果这些调色板之一具有您想要的颜色，您也可以在此处进行选择。
就这样！ 希望这个对你有帮助。
Chrome 开发工具的提示和技巧
如何启用颜色选择器？ Chrome？
右键单击该网页并选择“检查”。 在 DevTools 面板的右侧，导航到“样式”选项卡下的彩色方框。 单击该框可显示 Chrome 的内置颜色选择器工具。 使用吸管从网页中选取颜色。
为什么我的颜色选择器不工作？ Chrome？
确保单击颜色预览方块而不是方块旁边显示的 RGB 值。 接下来，确保在颜色选择器弹出窗口中选择吸管（吸管在活动时将变成蓝色）。 如果问题仍然存在，请尝试更改 DevTools 面板的停靠位置（如果面板停靠在屏幕右侧，则将面板停靠在网页底部，反之亦然）。
继续阅读： 如何使用颜色选择器模块 Windows 动力玩具。
