如何在Google Chrome开发者工具中提取页面颜色？

• 元素面板拾色器
  打开开发者工具（快捷键F12或Ctrl+Shift+I），进入「元素」面板，找到目标元素的样式区域，点击颜色值旁的颜色方块，弹出拾色器后，用吸管点选页面任意位置即可获取对应颜色，点击拾色器内的复制按钮就能拿到颜色代码。

• 快捷键快速拾取
  打开开发者工具后，按下Ctrl+Shift+C（Windows/Linux）或Cmd+Shift+C（Mac），鼠标会变成吸管形状，点击页面上的目标区域，开发者工具会自动定位到对应元素，样式区会显示该元素的颜色值，直接复制即可。

• 控制台自定义拾取（进阶）
  若需要批量或自定义拾取逻辑，可在控制台执行以下代码：

  document.addEventListener('click', function(e) {
    const color = getComputedStyle(e.target).backgroundColor;
    navigator.clipboard.writeText(color);
    console.log('已复制颜色：', color);
  });
  

  执行后点击页面元素，颜色值会自动复制到剪贴板，完成操作后可执行document.removeEventListener('click', arguments.callee)移除监听。

内容的提问来源于stack exchange，提问作者André