<input type="color" name = "color">
<div class="block"></div>
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
}
.block {
  height: 10rem;
  width: 10rem;
  border-radius: 4rem;
  background: #000;
  border: 5px solid #fff;
  box-shadow: 0 0 3px 0 #000;
} 
View Compiled
const input = document.querySelector("input"),
      div = document.querySelector(".block");

input.addEventListener("change", () => {
  div.style.backgroundColor = input.value;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.