HSL Overdrive

<!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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>

/* https://github.com/d3/d3-color Copyright 2015 Mike Bostock */
"undefined"==typeof Map&&(Map=function(){this.clear()},Map.prototype={set:function(t,e){return this._[t]=e,this},get:function(t){return this._[t]},has:function(t){return t in this._},"delete":function(t){return t in this._&&delete this._[t]},clear:function(){this._=Object.create(null)},get size(){var t=0;for(var e in this._)++t;return t},forEach:function(t){for(var e in this._)t(this._[e],e,this)}}),function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.color={})}(this,function(t){"use strict";function e(){}function s(t,e,s){this.r=Math.max(0,Math.min(255,Math.round(t))),this.g=Math.max(0,Math.min(255,Math.round(e))),this.b=Math.max(0,Math.min(255,Math.round(s)))}function n(t,e,s){return isNaN(t)&&(t=0),isNaN(e)&&(e=0),isNaN(s)&&(s=0),"#"+(16>t?"0"+t.toString(16):t.toString(16))+(16>e?"0"+e.toString(16):e.toString(16))+(16>s?"0"+s.toString(16):s.toString(16))}function r(t){return N(t>>16&255,t>>8&255,255&t)}function i(t,e,s){this.h=+t,this.s=Math.max(0,Math.min(1,+e)),this.l=Math.max(0,Math.min(1,+s))}function a(t,e,s){return 255*(60>t?e+(s-e)*t/60:180>t?s:240>t?e+(s-e)*(240-t)/60:e)}function o(t,e,s){this.l=+t,this.a=+e,this.b=+s}function h(t){return 255*(.0031308>=t?12.92*t:1.055*Math.pow(t,1/2.4)-.055)}function l(t){return t>j?t*t*t:L*(t-S)}function u(t){return t>$?Math.pow(t,1/3):t/L+S}function c(t){return(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function g(t,e,s){this.h=+t,this.c=+e,this.l=+s}function f(t,e,s){this.h=+t,this.s=+e,this.l=+s}e.prototype={toString:function(){return this.rgb()+""}};var d=s.prototype=new e,p=.7;d.darker=function(t){return t=null==t?p:Math.pow(p,t),new s(this.r*t,this.g*t,this.b*t)};var b=1/p;d.brighter=function(t){return t=null==t?b:Math.pow(b,t),new s(this.r*t,this.g*t,this.b*t)},d.rgb=function(){return this},d.toString=function(){return n(this.r,this.g,this.b)};var N=function(t,n,r){return 1===arguments.length&&(t instanceof e||(t=v(t)),t=t.rgb(),r=t.b,n=t.g,t=t.r),new s(t,n,r)},m=(new Map).set("aliceblue",15792383).set("antiquewhite",16444375).set("aqua",65535).set("aquamarine",8388564).set("azure",15794175).set("beige",16119260).set("bisque",16770244).set("black",0).set("blanchedalmond",16772045).set("blue",255).set("blueviolet",9055202).set("brown",10824234).set("burlywood",14596231).set("cadetblue",6266528).set("chartreuse",8388352).set("chocolate",13789470).set("coral",16744272).set("cornflowerblue",6591981).set("cornsilk",16775388).set("crimson",14423100).set("cyan",65535).set("darkblue",139).set("darkcyan",35723).set("darkgoldenrod",12092939).set("darkgray",11119017).set("darkgreen",25600).set("darkgrey",11119017).set("darkkhaki",12433259).set("darkmagenta",9109643).set("darkolivegreen",5597999).set("darkorange",16747520).set("darkorchid",10040012).set("darkred",9109504).set("darksalmon",15308410).set("darkseagreen",9419919).set("darkslateblue",4734347).set("darkslategray",3100495).set("darkslategrey",3100495).set("darkturquoise",52945).set("darkviolet",9699539).set("deeppink",16716947).set("deepskyblue",49151).set("dimgray",6908265).set("dimgrey",6908265).set("dodgerblue",2003199).set("firebrick",11674146).set("floralwhite",16775920).set("forestgreen",2263842).set("fuchsia",16711935).set("gainsboro",14474460).set("ghostwhite",16316671).set("gold",16766720).set("goldenrod",14329120).set("gray",8421504).set("green",32768).set("greenyellow",11403055).set("grey",8421504).set("honeydew",15794160).set("hotpink",16738740).set("indianred",13458524).set("indigo",4915330).set("ivory",16777200).set("khaki",15787660).set("lavender",15132410).set("lavenderblush",16773365).set("lawngreen",8190976).set("lemonchiffon",16775885).set("lightblue",11393254).set("lightcoral",15761536).set("lightcyan",14745599).set("lightgoldenrodyellow",16448210).set("lightgray",13882323).set("lightgreen",9498256).set("lightgrey",13882323).set("lightpink",16758465).set("lightsalmon",16752762).set("lightseagreen",2142890).set("lightskyblue",8900346).set("lightslategray",7833753).set("lightslategrey",7833753).set("lightsteelblue",11584734).set("lightyellow",16777184).set("lime",65280).set("limegreen",3329330).set("linen",16445670).set("magenta",16711935).set("maroon",8388608).set("mediumaquamarine",6737322).set("mediumblue",205).set("mediumorchid",12211667).set("mediumpurple",9662683).set("mediumseagreen",3978097).set("mediumslateblue",8087790).set("mediumspringgreen",64154).set("mediumturquoise",4772300).set("mediumvioletred",13047173).set("midnightblue",1644912).set("mintcream",16121850).set("mistyrose",16770273).set("moccasin",16770229).set("navajowhite",16768685).set("navy",128).set("oldlace",16643558).set("olive",8421376).set("olivedrab",7048739).set("orange",16753920).set("orangered",16729344).set("orchid",14315734).set("palegoldenrod",15657130).set("palegreen",10025880).set("paleturquoise",11529966).set("palevioletred",14381203).set("papayawhip",16773077).set("peachpuff",16767673).set("peru",13468991).set("pink",16761035).set("plum",14524637).set("powderblue",11591910).set("purple",8388736).set("rebeccapurple",6697881).set("red",16711680).set("rosybrown",12357519).set("royalblue",4286945).set("saddlebrown",9127187).set("salmon",16416882).set("sandybrown",16032864).set("seagreen",3050327).set("seashell",16774638).set("sienna",10506797).set("silver",12632256).set("skyblue",8900331).set("slateblue",6970061).set("slategray",7372944).set("slategrey",7372944).set("snow",16775930).set("springgreen",65407).set("steelblue",4620980).set("tan",13808780).set("teal",32896).set("thistle",14204888).set("tomato",16737095).set("turquoise",4251856).set("violet",15631086).set("wheat",16113331).set("white",16777215).set("whitesmoke",16119285).set("yellow",16776960).set("yellowgreen",10145074),w=i.prototype=new e;w.brighter=function(t){return t=null==t?b:Math.pow(b,t),new i(this.h,this.s,this.l*t)},w.darker=function(t){return t=null==t?p:Math.pow(p,t),new i(this.h,this.s,this.l*t)},w.rgb=function(){var t=this.h%360+360*(this.h<0),e=isNaN(t)||isNaN(this.s)?0:this.s,n=this.l,r=.5>=n?n*(1+e):n+e-n*e,i=2*n-r;return new s(a(t>=240?t-240:t+120,i,r),a(t,i,r),a(120>t?t+240:t-120,i,r))};var y=function(t,s,n){if(1===arguments.length)if(t instanceof i)n=t.l,s=t.s,t=t.h;else{if(t instanceof e||(t=v(t)),t instanceof i)return t;t=t.rgb();var r=t.r/255,a=t.g/255,o=t.b/255,h=Math.min(r,a,o),l=Math.max(r,a,o),u=l-h;n=(l+h)/2,u?(s=.5>n?u/(l+h):u/(2-l-h),t=r===l?(a-o)/u+6*(o>a):a===l?(o-r)/u+2:(r-a)/u+4,t*=60):(t=0/0,s=n>0&&1>n?0:t)}return new i(t,s,n)},v=function(t){var e;return t=(t+"").trim().toLowerCase(),(e=/^#([0-9a-f]{3})$/.exec(t))?(e=parseInt(e[1],16),N(e>>8&15|e>>4&240,e>>4&15|240&e,(15&e)<<4|15&e)):(e=/^#([0-9a-f]{6})$/.exec(t))?r(parseInt(e[1],16)):(e=/^rgb$\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*$$/.exec(t))?N(e[1],e[2],e[3]):(e=/^rgb$\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*$$/.exec(t))?N(255*e[1]/100,255*e[2]/100,255*e[3]/100):(e=/^hsl$\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*$$/.exec(t))?y(e[1],e[2]/100,e[3]/100):m.has(t)?r(m.get(t)):N(0/0,0/0,0/0)};v.prototype=e.prototype,N.prototype=s.prototype,y.prototype=i.prototype;var M=o.prototype=new e,k=18;M.brighter=function(t){return new o(this.l+k*(null==t?1:t),this.a,this.b)},M.darker=function(t){return new o(this.l-k*(null==t?1:t),this.a,this.b)};var x=.95047,q=1,_=1.08883,S=4/29,j=6/29,L=3*j*j,$=j*j*j;M.rgb=function(){var t=(this.l+16)/116,e=isNaN(this.a)?t:t+this.a/500,n=isNaN(this.b)?t:t-this.b/200;return t=q*l(t),e=x*l(e),n=_*l(n),new s(h(3.2404542*e-1.5371385*t-.4985314*n),h(-.969266*e+1.8760108*t+.041556*n),h(.0556434*e-.2040259*t+1.0572252*n))};var H=Math.PI/180,I=g.prototype=new e;I.brighter=function(t){return new g(this.h,this.c,this.l+k*(null==t?1:t))},I.darker=function(t){return new g(this.h,this.c,this.l-k*(null==t?1:t))},I.rgb=function(){return C(this).rgb()};var C=function(t,e,n){if(1===arguments.length)if(t instanceof o)n=t.b,e=t.a,t=t.l;else if(t instanceof g){var r=t.h*H;n=Math.sin(r)*t.c,e=Math.cos(r)*t.c,t=t.l}else{t instanceof s||(t=N(t));var i=c(t.r),a=c(t.g),n=c(t.b),h=u((.4124564*i+.3575761*a+.1804375*n)/x),l=u((.2126729*i+.7151522*a+.072175*n)/q),f=u((.0193339*i+.119192*a+.9503041*n)/_);n=200*(l-f),e=500*(h-l),t=116*l-16}return new o(t,e,n)};C.prototype=o.prototype;var O=180/Math.PI,P=function(t,e,s){return 1===arguments.length&&(t instanceof g?(s=t.l,e=t.c,t=t.h):(t instanceof o||(t=C(t)),s=t.l,e=Math.sqrt(t.a*t.a+t.b*t.b),t=Math.atan2(t.b,t.a)*O,0>t&&(t+=360))),new g(t,e,s)};P.prototype=g.prototype;var z=f.prototype=new e;z.brighter=function(t){return t=null==t?b:Math.pow(b,t),new f(this.h,this.s,this.l*t)},z.darker=function(t){return t=null==t?p:Math.pow(p,t),new f(this.h,this.s,this.l*t)};var E=1,R=-.14861,A=1.78277,B=-.29227,D=-.90649,F=1.97294,G=F*D,J=F*A,K=A*B-D*R,Q=function(t,e,n){if(1===arguments.length)if(t instanceof f)n=t.l,e=t.s,t=t.h;else{t instanceof s||(t=N(t));var r=t.r/255,i=t.g/255,a=t.b/255;n=(K*a+G*r-J*i)/(K+G-J);var o=a-n,h=(F*(i-n)-B*o)/D,l=Math.pow(n,E);e=Math.sqrt(h*h+o*o)/(F*l*(1-l)),t=e?Math.atan2(h,o)*O-120:0/0,0>t&&(t+=360)}return new f(t,e,n)};z.rgb=function(){var t=isNaN(this.h)?0:(this.h+120)*H,e=Math.pow(this.l,E),n=isNaN(this.s)?0:this.s*e*(1-e),r=Math.cos(t),i=Math.sin(t);return new s(255*(e+n*(R*r+A*i)),255*(e+n*(B*r+D*i)),255*(e+n*F*r))},Q.prototype=f.prototype;var T=function(t,e){t=Q(t),e=Q(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}},U=function(t,e){var s=(t-e)%360;return s+(s>180?-360:-180>s?360:0)},V=function(t,e){t=Q(t),e=Q(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:U(e.h,s),a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}},W=function(t,e){t=P(t),e=P(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.c)?e.c:t.c,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.c)?0:e.c-n,o=e.l-r;return function(e){return t.h=s+i*e,t.c=n+a*e,t.l=r+o*e,t+""}},X=function(t,e){t=P(t),e=P(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.c)?e.c:t.c,r=t.l,i=isNaN(e.h)?0:U(e.h,s),a=isNaN(e.c)?0:e.c-n,o=e.l-r;return function(e){return t.h=s+i*e,t.c=n+a*e,t.l=r+o*e,t+""}},Y=function(t,e){t=C(t),e=C(e);var s=t.l,n=t.a,r=t.b,i=e.l-s,a=e.a-n,o=e.b-r;return function(e){return t.l=s+i*e,t.a=n+a*e,t.b=r+o*e,t+""}},Z=function(t,e){t=y(t),e=y(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}},tt=function(t,e){t=y(t),e=y(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:U(e.h,s),a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}},et=function(t,e){t=N(t),e=N(e);var s=t.r,r=t.g,i=t.b,a=e.r-s,o=e.g-r,h=e.b-i;return function(t){return n(Math.round(s+a*t),Math.round(r+o*t),Math.round(i+h*t))}};t.color=v,t.rgb=N,t.hsl=y,t.lab=C,t.hcl=P,t.cubehelix=Q,t.interpolateRgb=et,t.interpolateHsl=tt,t.interpolateHslLong=Z,t.interpolateLab=Y,t.interpolateHcl=X,t.interpolateHclLong=W,t.interpolateCubehelix=V,t.interpolateCubehelixLong=T});

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([-100, 200]).range([0, width]), x: width / 2},
  l: {scale: d3.scale.linear().domain([-0.2, 1.2]).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 = color.cubehelix(
    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 = current.rgb();
    }
    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://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js