var colors = [
  '#bf4040',
  '#40bf40',
  '#4040bf',
  '#ffffff',
];
var inputs = [];
var div = document.getElementById('demo');


 
var HextoRGB = function (hex){
  var rHex = hex.slice(1, 3);
  var gHex = hex.slice(3, 5);
  var bHex = hex.slice(5, 7);
  var rDec = parseInt(rHex, 16);
  var gDec = parseInt(gHex, 16);
  var bDec = parseInt(bHex, 16);
  return [rDec,gDec,bDec];
}

var rgba = function(hex){
  return `rgba(${HextoRGB(hex).join(',')}, .5)`;
}

colors.forEach(function(color, i){
  var input = document.createElement('input');
  input.type = 'color';
  input.value = color;//#000000 type only
  div.appendChild(input);
  inputs.push(input);
  input.addEventListener('change', function(){
    
    var gradient = `
linear-gradient(45deg,
${rgba(inputs[0].value)},
${rgba(inputs[1].value)}
),
linear-gradient(135deg,
${rgba(inputs[2].value)},
${rgba(inputs[3].value)}
)`;

    div.style.background = gradient;
    console.log(gradient);
  });
});

var evt = document.createEvent("HTMLEvents");
evt.initEvent('change', true, true );
inputs[0].dispatchEvent(evt);

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-color-gradient/