chrome提供四种原生取色方式：一、开发者工具样式面板点击颜色小方块启用吸管；二、启用chrome://flags中global color picker实验功能实现全屏取色；三、执行js插入color输入框调用系统吸管；四、控制台运行eyedropper api代码直接启动吸管。
如果您在进行网页前端设计或调试时需要快速获取页面任意像素的精确颜色值，谷歌浏览器提供了多种原生支持的色彩拾取器（吸色）方式。以下是开启并使用这些功能的具体操作路径：
一、通过开发者工具样式面板启用内置吸管工具
该方法利用 Chrome 元素检查器中 CSS 属性旁的颜色预览小方块触发 Eyedropper，可直接从当前标签页任意可见区域采样颜色，无需额外安装组件，适用于实时调试与微调。
1、在 Chrome 浏览器中打开目标网页。
2、右键单击页面中需取色的任意位置，选择“检查”以打开开发者工具；或按 F12 快捷键直接唤出。
3、在“Elements”面板中确认已选中目标元素，右侧“Styles”区域将显示其 CSS 样式。
4、查找任一含颜色定义的属性（如 color、background-color 或 border-color），定位其值右侧的小色块图标。
5、点击该色块，弹出颜色选择浮层。
6、在浮层左上角点击 吸管形状图标（Eyedropper），鼠标指针立即变为十字准星。
7、将准星移至页面任意位置（包括其他标签页缩略图、地址栏背景等），单击即可将该像素颜色写入当前属性，并自动更新为 HEX 或 RGB 格式。
二、启用 chrome://flags 中的全局吸管实验功能
此方案解锁系统级屏幕范围取色能力，允许从非活动窗口、桌面壁纸、甚至其他应用程序界面中吸取颜色，依赖 Chrome 实验性标志，重启后生效。
1、在地址栏输入 chrome://flags 并回车访问实验功能页面。
2、在页面顶部搜索框中输入 Global Eyedropper 或 Global Color Picker。
3、找到名为 Global Color Picker in EyeDropper 的选项（状态显示为 “Default” 或 “Disabled”）。
4、点击其右侧下拉菜单，选择 Enabled。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
5、页面底部点击 Relaunch 重启浏览器。
6、重启后，重复“一”中步骤 1–6，在颜色选择浮层中启用吸管时，鼠标将可跨整个屏幕区域取色。
三、使用原生 HTML input[type="color"] 触发系统级吸管
该方法不依赖开发者工具，而是通过网页中标准的 color 输入控件直接调用操作系统原生颜色选择器，包含吸管功能，支持全屏采样且响应极快，但仅适用于可编辑的 input 元素上下文。
1、在任意网页的开发者工具控制台（Console）中执行以下代码：
document.body.innerHTML = ''; document.getElementById("picker").click();
2、此时页面将插入一个 color 输入框，并自动聚焦触发系统颜色选择器。
3、在弹出的原生调色面板中，点击左上角 吸管图标（macOS 显示为 eyedropper，Windows 显示为 dropper）。
4、鼠标变为系统级吸管，可自由移动至屏幕任意可见区域，单击完成取色，所选颜色将自动填入 input 框并返回 HEX 值。
四、通过 EyeDropper API 在控制台直接调用吸管
该方法面向开发者，使用浏览器原生 EyeDropper 接口在 DevTools 控制台中一键启动全屏吸管，返回 Promise 形式的颜色对象，适合快速验证或脚本化取色流程。
1、确保浏览器版本为 Chrome 111 或更高版本。
2、打开目标网页，按 F12 打开开发者工具，切换至 Console 标签页。
3、输入并执行以下 JavaScript 代码：
if ('EyeDropper' in window) { new EyeDropper().open().then(result => console.log('取色结果:', result.sRGBHex)); } else { console.error('当前浏览器不支持 EyeDropper API'); }
4、按下回车后，吸管工具立即激活，鼠标变为十字准星。
5、在屏幕任意位置单击，控制台将输出类似 "#4A90E2" 的 sRGB 十六进制颜色值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
