Simple Color Shades

by Adi Jaya

HTML

<div id="div"></div>

CSS

.box {
    display: inline-block;
    width: 50px;
    height: 50px;
}

JavaScript

function colorShade(col, amt){
  col = col.replace(/^#/, '')
  if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2]

  let [r, g, b] = col.match(/.{2}/g);
  ([r, g, b] = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt])

  r = Math.max(Math.min(255, r), 0).toString(16)
  g = Math.max(Math.min(255, g), 0).toString(16)
  b = Math.max(Math.min(255, b), 0).toString(16)

  let rr = (r.length < 2 ? '0' : '') + r
  let gg = (g.length < 2 ? '0' : '') + g
  let bb = (b.length < 2 ? '0' : '') + b

  return `#${rr}${gg}${bb}`
}

console.log( colorShade("#000000", 100) );

//demo

var hexColor = "#3f51b5"
var el = document.querySelector("#div");
var arr = [0,10,20,30,40,50,60,70,80,90,100];

arr.forEach(function( v ){
	let color = colorShade( hexColor, v )
	let div = document.createElement( "div" );
  		div.className = "box";
      div.style.backgroundColor = color;
      div.setAttribute( "data-color", color );
      el.appendChild( div )
})