js-dome
/
使用系统取色器.html

<!DOCTYPE html>
<html>
<head>
  <title>使用系统取色器</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <button>打开取色器</button>
  <div class="box"></div>
  <br>
  <label></label>

  <script>
    const btn = document.querySelector('button');
    const box = document.querySelector('.box');
    const label = document.querySelector('label');

    btn.onclick = async () => {
      const dropper = new EyeDropper();

      try {
        const result = await dropper.open();
        console.log(result);
        box.style.backgroundColor = result.sRGBHex;
        label.textContent = result.sRGBHex;
      } catch {
        console.log('用户取消了操作');
      }
    }
  </script>
</body>
</html>