Chrome 里想取个色，方法其实比想象中多。你可能会想到用开发者工具、装个扩展，甚至直接写一行 HTML 代码。下面这五种路子，基本覆盖了从初级到进阶的所有场景，关键看你在什么环境下干活。

如果你在网页里想快速获取某个像素的颜色值，但发现 Chrome 自带的功能没出现——别急。很可能是开发者工具里的吸管没激活，或者某个实验性开关没打开。以下就是开启并使用的详细步骤。

一、通过开发者工具启用内置吸色工具

Chrome 开发者工具自带了一个原生的 Eyedropper。它不需要额外装扩展，就能从当前页面的任何位置采样颜色。

不过它需要一个触发点：必须先选中一个有颜色属性的 CSS 元素。

操作步骤：

第一步： 在 Chrome 里打开目标网页。

第二步： 右键点击页面上任意可见区域，选择“检查”。或者直接按快捷键 Ctrl + Shift + I（Windows/Linux） 或 Cmd + Opt + I（macOS）。

第三步： 进入后，在 Elements 面板右侧的“Styles”区域里，找到任意一条带颜色定义的 CSS 属性——比如 color、background-color 或 border-color。

第四步： 把鼠标悬停在这个属性值右侧的小色块上。等到出现吸管图标后点击它。

第五步： 此时鼠标指针会变成吸管形状。自由移动到页面任意位置，单击即可把那个像素的 HEX 或 RGB 值自动填入当前的 CSS 属性中。

二、启用全局屏幕取色器实验性功能

Chrome 的实验性标志里藏着一个跨窗口取色的能力。它能让你从非活动标签页、地址栏，甚至桌面壁纸这类系统级界面里提取颜色。需要手动开启对应的实验选项。

开启步骤：

第一步： 在地址栏输入 chrome://flags 并回车，进入实验功能页面。

第二步： 在页面顶部的搜索框中输入 Global Eyedropper 或 EyeDropper。

第三步： 找到名为 Global Color Picker in EyeDropper 的选项。点击下拉菜单并选择 Enabled。

第四步： 点击页面底部的 Relaunch 按钮重启浏览器。

第五步： 重启后，重复第一种方法的操作。在颜色选择器里就能体验到全屏范围取色模式了。

三、安装第三方取色扩展程序

如果你需要更直观的操作入口、快捷键支持，或者想要历史记录管理，第三方扩展是个不错的选择。尤其适合那些没有启用实验功能、又不想折腾 flags 的稳定版用户。

安装与使用：

安装： 访问 Chrome 网上应用店。搜索 ColorPick Eyedropper 或 Eye Dropper。点击扩展卡片上的“添加至 Chrome”完成安装。

固定到工具栏： 安装后，点击浏览器右上角扩展图标区域。找到图钉按钮，把扩展固定到工具栏，方便随时调用。

使用： 点击扩展图标启动取色器。页面进入取色模式，鼠标指针通常会变成放大镜或吸管形状。移动鼠标到任意位置单击，颜色 HEX 值就复制到剪贴板了。部分扩展还支持一键插入到编辑器，或者导出整个调色板。

四、使用原生 input[type="color"] 触发系统级取色器

HTML5 原生的 color 输入控件，在 Chrome 里会调用操作系统级别的颜色选择器，并且附带吸管工具。对于前端开发调试或者快速验证颜色值来说，这是一个非常轻量的手段。

操作步骤：

第一步： 新建一个空白的 HTML 文件。写入一行代码：。

第二步： 用 Chrome 打开这个文件。点击输入框右侧的色块区域。

第三步： 在弹出的颜色选择器里，点击左上角的吸管图标（如果没看到，请确保系统是 Windows 10/11 或 macOS Monterey 及以上版本）。

第四步： 吸管激活后，鼠标可以在整个屏幕范围内移动——包括其他应用程序的窗口。单击即完成取色。

五、通过计算样式面板提取最终渲染颜色

有时候，目标元素的颜色是通过继承、层叠或者 JavaScript 动态生成的。它的真实颜色并不会直接出现在“Styles”面板里。这时候需要借助“Computed”面板来定位实际生效的值。

操作步骤：

第一步： 右键点击目标元素并选择“检查”，打开开发者工具。

第二步： 切换到右侧的 Computed 标签页。

第三步： 在搜索框中输入 color 或 background，定位到对应的属性行。

第四步： 点击该属性值右侧的小色块，再点击吸管图标启动取色模式。

第五步： 移动鼠标到页面任意位置单击。当前显示的颜色值就会被覆盖，同时同步更新到该属性的实时渲染效果中。

《夸克》非常好用的免费AI浏览器

下载APP查看