<label
  id="color-input"
  class="relative block m-3 w-12 h-12 bg-slate-300 rounded-full border-4 border-[#0004]"
>
  <input
    type="color"
    class="invisible absolute inset-0 w-auto h-auto"
  >
</label>
const label = document.querySelector('#color-input');
const input = label.querySelector('input');

input.onchange = () => {
  label.style.background = input.value;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com