Testing out the Lab color space.
Each square represents a cross-section of the Lab color space with a different lightness value (from 5 to 100). The a and b values vary along the x and y dimensions, respectively (from -100 to 100).
These ranges capture most of the L, a, b combinations that map to valid RGB values (between 0 and 255).
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .square { | |
| position:absolute; | |
| border: 1px solid gray; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var lightness = d3.range(5, 101, 5), | |
| cols = 5, | |
| rows = Math.ceil(lightness.length / cols), | |
| margin = 10, | |
| side = (960 - margin) / cols - margin; | |
| var x = d3.scale.linear() | |
| .domain([0, cols-1]) | |
| .range([margin, margin + (side + margin) * (cols - 1)]); | |
| var y = d3.scale.linear() | |
| .domain([0, rows-1]) | |
| .range([margin, margin + (side + margin) * (rows - 1)]); | |
| var ab = d3.scale.linear() | |
| .domain([0, side]) | |
| .range([-100, 100]); | |
| var square = d3.select('body').selectAll('.square') | |
| .data(lightness) | |
| .enter().append('div') | |
| .attr('class', 'square') | |
| .style('width', side + 'px') | |
| .style('height', side + 'px') | |
| .style('left', function(d, i) {return x(i % cols) + 'px';}) | |
| .style('top', function(d, i) {return y(parseInt(i / cols)) + 'px';}) | |
| .attr('title', function(d) {return 'Lightness: ' + d;}); | |
| square.append('canvas') | |
| .attr('width', side) | |
| .attr('height', side) | |
| .style('width', side + 'px') | |
| .style('height', side + 'px') | |
| .each(render); | |
| function valid(c) { | |
| return (c.r >= 0 && c.r <= 255 && | |
| c.g >= 0 && c.g <= 255 && | |
| c.b >= 0 && c.b <= 255); | |
| } | |
| function render(d) { | |
| console.log(d); | |
| var context = this.getContext('2d'), | |
| image = context.createImageData(side, side), | |
| i, j, c, | |
| idx = 0; | |
| for (i = 0; i < side; i++) { | |
| for (j = 0; j < side; j++) { | |
| c = d3.lab(d, ab(j), -ab(i)).rgb(); | |
| if (valid(c)) { | |
| image.data[idx++] = c.r; | |
| image.data[idx++] = c.g; | |
| image.data[idx++] = c.b; | |
| image.data[idx++] = 255; | |
| } else { | |
| image.data[idx++] = 120; | |
| image.data[idx++] = 120; | |
| image.data[idx++] = 120; | |
| image.data[idx++] = 255; | |
| } | |
| } | |
| } | |
| context.putImageData(image, 0, 0); | |
| } | |
| d3.select(self.frameElement).style("height", (rows * (side + margin) + margin) + "px"); | |
| </script> | |
| </body> |