JSを使ってカラーシミュレーターを作ってみよう。

[実行例]
上部に色とカラーコード、下部にrgb成分を設定するスライダーが表示されている。

スライダーを設定すると色とカラーコードが表示される。

[作例]

●index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>カラーシミュレーター</title>
<style>
#box{
  height:50px;
  border:1px solid #000;
  width:200px;
  font-size:30px;
  line-height: 50px;
}
</style>
</head>
<body>
<h1 id="box">#ffffff</h1>
<p>
R:<input type="range" min="0" max="255" class="param" value="255"><span>255</span><br>
G:<input type="range" min="0" max="255" class="param" value="255"><span>255</span><br>
B:<input type="range" min="0" max="255" class="param" value="255"><span>255</span><br>
</p>
<script>
'use strict';
window.onload=function(){
  var box=document.getElementById("box");
  var params=document.getElementsByClassName("param");
  for(var i=0;i<params.length;i++){
    params[i].addEventListener('change',function(){
      var r=parseInt(params[0].value);
      var g=parseInt(params[1].value);
      var b=parseInt(params[2].value);
      var cCode="#"+hex(r)+hex(g)+hex(b);
      if(r+b+g < 380){
        box.style.color="white";
      }else{
        box.style.color="black";
      }
      box.style.backgroundColor=cCode;
      box.textContent=cCode;
      this.nextElementSibling.textContent=this.value;
    });
    function hex(num){
      var hex=num.toString(16);
      if(num<16){
        hex='0'+hex;
      }
      return hex;
    }
  }
};
</script>
</body>
</html>