caged/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
	<!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>