Widget:Color input

<input type="color" id="domeincolor" name="color" oninput="getColor(this)" value="" /> <input type="hidden" id="h-val" name="h-val" value="" /> <input type="hidden" id="s-val" name="s-val" value="" /> <input type="hidden" id="l-val" name="l-val" value="" /> <script>

var h_el = document.querySelector('#h-val'); var s_el = document.querySelector('#s-val'); var l_el = document.querySelector('#l-val');

function getColor(el) {

   let input = el;
   let color = HexToHSL(input.value);
 
  h_el.value = color.h;
  s_el.value = color.s;
  l_el.value = color.l;
 
 document.body.setAttribute('style', '--h-val:'+ color.h +';--s-val:' + color.s +';--l-val' + color.l)
   
   console.log('hsl(' + color.h + ', ' + color.s + '%, ' + color.l + '%)')

}

function HexToHSL(hex) {

   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

   var r = parseInt(result[1], 16);
   var g = parseInt(result[2], 16);
   var b = parseInt(result[3], 16);

   r /= 255, g /= 255, b /= 255;
   var max = Math.max(r, g, b), min = Math.min(r, g, b);
   var h, s, l = (max + min) / 2;

   if(max == min){
       h = s = 0; // achromatic
   } else {
       var d = max - min;
       s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
       switch(max) {
           case r: h = (g - b) / d + (g < b ? 6 : 0); break;
           case g: h = (b - r) / d + 2; break;
           case b: h = (r - g) / d + 4; break;
       }
       
       h /= 6;
   }

   s = s*100;
   s = Math.round(s);
   l = l*100;
   l = Math.round(l);
   h = Math.round(360*h);

   return {h, s, l};

} </script>