<button class="hide" id="colorPickerTrigger">Open Color Picker</button>
<p id="message"></p>
<div id="colorPreview"></div>
#colorPreview {
  width: 75px;
  height: 75px;
}

.hide {
  display: none;
}
// index.js

const message = document.getElementById('message');

// Check for EyeDropper compatibility
if ("EyeDropper" in window) {
  // instantiate the eyedropper object
	const dropper = new EyeDropper()
  const trigger = document.getElementById('colorPickerTrigger');
  const preview = document.getElementById('colorPreview');
  
  // reveal the color picker button if browser compatible
  trigger.classList.remove('hide');
  
  trigger.addEventListener('click', (_e) => {
    dropper.open()
      .then(result => {
        // get the hex code from `result.sRGBHex`
        const hexCode = result.sRGBHex;
        message.innerText = hexCode;
        preview.style.backgroundColor = hexCode;
      })
      .catch(err => {
        console.warn('Color picker closed:', err.message);   
      })
  })
} else {
  // display a message if browser is incompatible
  message.innerText = 'EyeDropper API not supported in this browser.';
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.