index.html

## index.html
<!doctype html>
<head>
  <meta charset="utf-8">
  <style>
  body {
    font-family: OpenSans, Helvetica;
  }

  .title {
    margin: 0;
    padding: 0;
    font-size: 20px;
  }

  .color-picker {
    width: 500px;
    height: 500px;
    position: relative;
  }

  .label {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 11px;
    color: #fff;
  }
  </style>
</head>
<body>
<h1 class="title">HCL Color</h1>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" charset="utf-8">
var rect = 500

function valid(rgb) {
  var r = rgb.r, g = rgb.g, b = rgb.b

  return [r, g, b].some(function(v) {
    return !(v >= 0 && v <= 255)
  })
}

function render() {
  var ctx = this.getContext('2d'),
      img = ctx.createImageData(rect, rect), x, y, idx, c

  var hscale = d3.scale.linear()
    .domain([0, rect])
    .range([360, 0])

  var lscale = d3.scale.linear()
    .domain([0, rect])
    .range([0, 100])

  for (y = 0; y < rect; y++) {
    for(x = 0; x < rect; x++) {
      idx = (x + y * img.width) * 4
      c = d3.hcl(hscale(x), 35, lscale(y)).rgb()

      // if(valid(c)) {
        img.data[idx]     = c.r
        img.data[idx + 1] = c.g
        img.data[idx + 2] = c.b
        img.data[idx + 3] = 255
      // } else {
      //   img.data[idx + 3] = 0
      // }
    }
  }

  ctx.putImageData(img, 0, 0);
}


var el = d3.select('body').append('div')
  .attr('class', 'color-picker')

var canvas = el.append('canvas')
  .attr('width', rect)
  .attr('height', rect)
  .style('width', rect + 'px')
  .style('height', rect + 'px')

var ctx = canvas.node().getContext('2d')

var text = el.append('div')
  .attr('class', 'label')

canvas.on('mousemove', function(d) {
    var x = d3.event.layerX,
        y = d3.event.layerY
        pixel = ctx.getImageData(x, y, 1, 1),
        data = pixel.data

    text.text(d3.rgb(data[0], data[1], data[2]).toString())
  }).each(render)
</script>
</body>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png