Linear Color Picker

Color Picker using JS and CSS

by vikikamath

HTML

<div id="slider">
  <input type="range" min="0" max="16777215" value="255" width="100%">
</div>
<div id="colorbox"></div>
<div id="name">

</div>

CSS

#colorbox {
  height: 200px;
  width: 200px;
  border: solid 1px rgba(0,0,0,0.3);
}

input {
  width: 95%;
  padding: 0.3rem;
}
#slider {
  background: linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));
}

div {
  margin: 2rem;
}

JavaScript

document.querySelector("input").addEventListener('input', function(e) {
  var color = prefixZeros(Number(e.target.value).toString(16))
  document.querySelector("#colorbox").style.background = '#' + color
  document.querySelector("#name").textContent = '#' + color
})


function prefixZeros( hexStr ) {
	var len = 6 - hexStr.length
  
  for(var i = 0; i < len ; i++){
  	hexStr = '0' + hexStr
  }
  
  console.log(hexStr)
  return hexStr
}