block by mbostock 3014589

Lab and HCL Color Spaces

Full Screen

D3 supports CIELAB (Lab) and CIELCH (HCL) color spaces, which are designed for humans rather than computers.

Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called perceptual uniformity, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.

You can create Lab or HCL colors in D3 directly using d3.lab or d3.hcl. For example:

var steelblue = d3.lab(52, -4, -32);
var steelblue = d3.hcl(-97, 32, 52);

You can also convert from other color spaces, such as RGB or HSL. This is useful for creating brighter or darker colors with uniform changes in perception:

var lightsteelblue = d3.lab("#4682b4").brighter();
var darksteelblue = d3.hcl("hsl(207, 44%, 49%)").darker();

Most importantly, you can use d3.interpolateLab or d3.interpolateHcl in conjunction with quantitative scales and transitions:

var color = d3.scale.linear()
    .range(["steelblue", "brown"])
    .interpolate(d3.interpolateHcl);

By using Lab or HCL color interpolation, you can create custom color scales that are comparable in quality to Colorbrewer.

For more on this topic:

index.html