<img src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="View from a meadow with flowers">

<div class="controls">
  <button type="button" aria-label="Select a color from the screen"></button>
  <span id="result">#6698cb</span>
</div>

body {
  font: 16px sans-serif;
  padding: 1rem;
}

img {
  display: block;
  border-radius: 4px;
  max-width: 50vw;
  max-height: 50vh;
  margin-bottom: 1.5rem;
}

button {
  width: 64px;
  height: 64px;
  background-color: #6698cb;
  border: solid 2px rgb(0 0 0 / 20%);
  border-radius: 50%;
  cursor: pointer;
}

.controls {
  display: flex;
  align-items: center;
}

#result {
  margin-left: 1rem;
}

const button = document.querySelector('button');
const result = document.querySelector('#result');

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();
  
  button.addEventListener('click', () => {
    eyeDropper
      .open()
      .then(colorSelectionResult => {
        // The user selected a color
        button.style.backgroundColor = colorSelectionResult.sRGBHex;
        result.textContent = colorSelectionResult.sRGBHex;
      })
      .catch(() => {
        // The user canceled
      });
  });   
  
} else {
  document.body.innerText = `Your browser doesn't support the EyeDropper API yet. Try Chrome or Edge 95 or higher.`; 
}