rgba 컬러코드 확인 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>RED</h2>
   <div>0 <input type="range" name="red" id="red" min="0" max="255"> 255</div>
   <div id="red_value"></div>
  </div>
  <div>
   <h2>GREEN</h2>
   <div>0 <input type="range" name="green" id="green" min="0" max="255"> 255</div>
   <div id="green_value"></div>
  </div>
  <div>
   <h2>BLUE</h2>
   <div>0 <input type="range" name="blue" id="blue" min="0" max="255"> 255</div>
   <div id="blue_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 red = document.querySelector("#red");
  var green = document.querySelector("#green");
  var blue = document.querySelector("#blue");
  var alpha = document.querySelector("#alpha");

  red.addEventListener("input", function(){ setColors(); });
  green.addEventListener("input", function(){ setColors(); });
  blue.addEventListener("input", function(){ setColors(); });
  alpha.addEventListener("input", function(){ setColors(); });

  function setColors() {
   var redValue = red.value;
   var greenValue = green.value;
   var blueValue = blue.value;
   var alphaValue = alpha.value;
   document.querySelector("#red_value").innerHTML = redValue + "(#" + toHex(redValue) + ")";
   document.querySelector("#green_value").innerHTML = greenValue + "(#" + toHex(greenValue) + ")";
   document.querySelector("#blue_value").innerHTML = blueValue + "(#" + toHex(blueValue) + ")";
   document.querySelector("#alpha_value").innerHTML=alphaValue;
   colorview.style.backgroundColor = "rgba(" + redValue + "," + greenValue + "," + blueValue + "," + alphaValue + ")";
  }

  window.onload = function(){
   setColors();
  };

  //0~255 정수를 HEX 코드로 변환하는 함수
  //함수 출처
  //http://www.javascripter.net/faq/rgbtohex.htm
  function toHex(n) {
   n = parseInt(n,10);
   if (isNaN(n)) return "00";
   n = Math.max(0,Math.min(n,255));
   return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
  }

 </script>
</body>
</html>