<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.';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.