Color ramp maker

Easy tool for extract linear gradients. It uses d3.scaleLinear and jscolor for pickers.
Choose the colors and click on build to watch the color ramp.
If you want to copy the hexadecimal code just click on the color and the code will be copy to your clipboard.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  
  <script src="jscolor.js"></script>
  <style>
  body { font-family: sans-serif; }
  .entries { padding: 0.3rem 0.1rem; }
  .inputs label { display: block; }
  label, button { font-size: 1rem; color: rgb(80, 80, 80); }
  input { margin-bottom: 1rem; margin-top: 0.4rem; }
  label { width: 12rem; }
  input.copy,
  input.jscolor,
  input#entries,
  button { padding: 0.3rem 0.5rem; border-radius: .1rem; }
  .entries { cursor: pointer; padding-left: 0.5rem;}
  .msg { color: rgb(150,150,150); padding: 0 0.5rem; }
  input.jscolor, input#entries { margin: 8px 0; border: 1px solid #ccc; box-sizing: border-box; }
  input.copy { width: 3.5rem; margin-left: 0.5rem; height: 1.1rem; }  
  button,
  input.copy {
    background-color: white;
    border: 1px solid rgb(102, 102, 102);
    box-shadow: 1px 1px 1px rgba(100, 100, 100, .5);
    font-weight: bold;
  }
  .entries-group {
    letter-spacing: 0.05rem;
    padding: 0.3rem 0;
    color:  white;
    text-shadow: 1px 1px 3px rgba(50, 50, 50, .9), 1px -1px 3px rgba(50, 50, 50, .9), -1px 1px 3px rgba(50, 50, 50, .9), -1px -1px 3px rgba(50, 50, 50, .9);
  }
  </style>
</head>
<body>
  <div class="inputs">
    <label for="low_value">From<input id="low_value" class="jscolor" value="DD503C"></label>
    <label for="high_value">To<input id="high_value" class="jscolor" value="497B94"></label>
    <label for="entries">Number of entries<input id="entries" type="number" name="entries" value="10" max="200", min="0"></label>
    <button id="colorize" type="button" name="button">build</button><input type="text" class="copy" disabled><span class="msg"></span>
  </div>
  <script>

d3.select("#colorize").on("click", colorize);

function colorize () {

var low_color = "#" + document.getElementById("low_value").value,
    high_color = "#" + document.getElementById("high_value").value,

entries = +document.getElementById("entries").value,
    values = d3.range(0, entries, 1);

var color = d3.scaleLinear()
    .domain([0, entries - 1])
    .range([low_color,high_color])

d3.select("body").select(".entries-group").remove();

var group = d3.select("body").append("div").attr('class', 'entries-group');

group.selectAll("entries").data(values)
    .enter()
    .append("div")
    .attr('class', 'entries')
    .html(function(d){ return rgb2hex(color(d)) })
    .style("background-color", function(d){
      return color(d)
    })
    .on("click", copy)
  }
  function rgb2hex(rgb){
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
  }

function copy(d){
    var t = d3.transition().duration(1500).ease(d3.easeCubicOut);
    d3.select(".msg").interrupt()
    d3.select(".copy").attr('disabled', null);

// reset opacity
    d3.select(".msg").style("opacity", 1);

var colorString = this.innerText.slice(1);
    d3.select(".copy").attr('value', colorString)
    var inputColor = document.querySelector(".copy");
    inputColor.select();

// https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
    try {
      var successful = document.execCommand('copy');

d3.select(".msg").html('Copied!').transition(t).style("opacity", 0);
    } catch (err) {
      d3.select(".msg").html('Oops, unable to copy');
    }

d3.select(".copy").attr('disabled', true);

}

</script>
</body>

https://d3js.org/d3.v4.min.js

https://code.jquery.com/jquery-3.1.1.min.js