<button type="button">Select a color</button>
const button = document.querySelector('button');

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  
  button.addEventListener('click', () => {
    eyeDropper
      .open()
      .then(colorSelectionResult => {
        document.body.style.backgroundColor = colorSelectionResult.sRGBHex;
      })
      .catch(() => {
        // The user canceled selection
      });
  });
} else {
  // The EyeDropper API isn't supported
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.