Comparing interpolation in Lab and LCh color spaces.

The above gradients compare interpolation in RGB, HSL, CIE Lab and CIE LCh color spaces. For more on color spaces, see Gregor Aisch’s post, How To Avoid Equidistant HSV Colors.

This example is built with D3. Code and documentation are available as the d3.cie plugin.

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

</style>
<body>
<script src="https://d3js.org/d3.v2.min.js?2.9.5"></script>
<script src="cie.js"></script>
<script>

var interpolators = {
  "HSL": d3.interpolateHsl,
  "LCH": d3.cie.interpolateLch,
  "Lab": d3.cie.interpolateLab,
  "RGB": d3.interpolateRgb
};

var width = 960,
    height = 500;

var y = d3.scale.ordinal()
    .domain(d3.keys(interpolators))
    .rangeRoundBands([0, height], .1);

var values = d3.range(960 - 28);

var x = d3.scale.ordinal()
    .domain(values)
    .rangeRoundBands([14, width - 14]);

var color = d3.scale.linear()
    .domain([0, values.length - 1])
    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.selectAll("g")
    .data(d3.entries(interpolators))
  .enter().append("g")
    .attr("transform", function(d) { return "translate(0," + y(d.key) + ")"; });

g.each(function(d) {
  color.interpolate(d.value);

d3.select(this).selectAll("rect")
    .data(values)
  .enter().append("rect")
    .attr("x", x)
    .attr("width", x.rangeBand())
    .attr("height", y.rangeBand)
    .style("fill", color);
});

g.append("text")
    .attr("x", 28)
    .attr("y", y.rangeBand() / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d.key; });

</script>

Modified http://d3js.org/d3.v2.min.js?2.9.5 to a secure url

https://d3js.org/d3.v2.min.js?2.9.5