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