hsla 컬러코드 확인 JavaScript 프로그램

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Color Change</title>
 <style>
  .row > div {
   float:left;
   width: 25%;
   text-align: center;
  }
  .colorbox {
   clear: both;
   margin-bottom: 20px;
   height: 100px;
   background-image: url(http://placeimg.com/1000/100/any);
   background-size: cover;
  }
  .colorview {
   height: 100px;
  }
 </style>
</head>
<body>
 <div class="colorbox"><div class="colorview"></div></div>
 <div class="row">
  <div>
   <h2>HUE</h2>
   <div>0 <input type="range" name="hue" id="hue" min="0" max="260"> 360</div>
   <div id="hue_value"></div>
  </div>
  <div>
   <h2>SATURATION</h2>
   <div>0% <input type="range" name="saturation" id="saturation" min="0" max="100"> 100%</div>
   <div id="saturation_value"></div>
  </div>
  <div>
   <h2>LIGHTNESS</h2>
   <div>0% <input type="range" name="lightness" id="lightness" min="0" max="100"> 100%</div>
   <div id="lightness_value"></div>
  </div>
  <div>
   <h2>ALPHA</h2>
   <div>0 <input type="range" name="alpha" id="alpha" min="0" max="1" step="0.1"> 1</div>
   <div id="alpha_value"></div>
  </div>
 </div>
 <script>
  var colorview = document.querySelector(".colorview");
  var hue = document.querySelector("#hue");
  var saturation = document.querySelector("#saturation");
  var lightness = document.querySelector("#lightness");
  var alpha = document.querySelector("#alpha");

  hue.addEventListener("input", function(){ setColors(); });
  saturation.addEventListener("input", function(){ setColors(); });
  lightness.addEventListener("input", function(){ setColors(); });
  alpha.addEventListener("input", function(){ setColors(); });

  function setColors() {
   var hueValue = hue.value;
   var saturationValue = saturation.value;
   var lightnessValue = lightness.value;
   var alphaValue = alpha.value;
   document.querySelector("#hue_value").innerHTML = hueValue;
   document.querySelector("#saturation_value").innerHTML = saturationValue + "%";
   document.querySelector("#lightness_value").innerHTML = lightnessValue + "%";
   document.querySelector("#alpha_value").innerHTML=alphaValue;
   colorview.style.backgroundColor = "hsla(" + hueValue + "," + saturationValue + "%," + lightnessValue + "%," + alphaValue + ")";
  }

  window.onload = function(){
   setColors();
  };
 </script>
</body>
</html>