HSL Color Picker

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  font: 10px sans-serif;
}

#s .tick:last-of-type text,
#l .tick:last-of-type text {
  display: none;
}

.channel canvas {
  float: left;
  margin: 40px 30px 0 30px;
  width: 900px;
  height: 90px;
}

</style>
<div class="channel" id="h">
  <canvas width="900" height="1"></canvas>
  <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
</div>
<div class="channel" id="s">
  <canvas width="900" height="1"></canvas>
  <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
</div>
<div class="channel" id="l">
  <canvas width="900" height="1"></canvas>
  <svg width="960" height="20"><g class="axis" transform="translate(30,.5)"></g></svg>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var white = d3.rgb("white"),
    black = d3.rgb("black"),
    width = d3.select("canvas").property("width");

var channels = {
  h: {scale: d3.scale.linear().domain([0, 360]).range([0, width]), x: width / 2},
  s: {scale: d3.scale.linear().domain([0, 1]).range([0, width]), x: width / 2},
  l: {scale: d3.scale.linear().domain([0, 1]).range([0, width]), x: width / 2}
};

var channel = d3.selectAll(".channel")
    .data(d3.entries(channels));

channel.select(".axis")
    .each(function(d) { d3.select(this).call(d3.svg.axis().scale(d.value.scale).orient("bottom")); })
  .append("text")
    .attr("x", width)
    .attr("y", 9)
    .attr("dy", ".72em")
    .style("text-anchor", "middle")
    .style("text-transform", "uppercase")
    .text(function(d) { return d.key; });

var canvas = channel.select("canvas")
    .call(d3.behavior.drag().on("drag", dragged))
    .each(render);

function dragged(d) {
  d.value.x = Math.max(0, Math.min(this.width - 1, d3.mouse(this)[0]));
  canvas.each(render);
}

function render(d) {
  var width = this.width,
      context = this.getContext("2d"),
      image = context.createImageData(width, 1),
      i = -1;

var current = d3.hsl(
    channels.h.scale.invert(channels.h.x),
    channels.s.scale.invert(channels.s.x),
    channels.l.scale.invert(channels.l.x)
  );

for (var x = 0, v, c; x < width; ++x) {
    if (x === d.value.x) {
      c = white;
    } else if (x === d.value.x - 1) {
      c = black;
    } else {
      current[d.key] = d.value.scale.invert(x);
      c = d3.rgb(current);
    }
    image.data[++i] = c.r;
    image.data[++i] = c.g;
    image.data[++i] = c.b;
    image.data[++i] = 255;
  }

context.putImageData(image, 0, 0);
}

</script>

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