How to choose background color through a color picker?

<label for="clr"> Background Color </label>
<input type="color" id="clr" class="form-control mt-2">

<div id="background" style="height:50px; width:100px"></div>

<script>

        
         const bgclr = document.getElementById("clr"); // color selector
         const headingg = document.getElementById("background");

         bgclr.addEventListener("input", () => {
               document.body.style.backgroundColor = bgclr.value;
               headingg.style.background = bgclr.value;
                
          });

 </script>