Color interpolation

Interpolators for colors in various color spaces.

interpolateRgb(a, b)

d3.interpolateRgb("purple", "orange")

Examples · Source · Returns an RGB color space interpolator between the two colors a and b with a configurable gamma. If the gamma is not specified, it defaults to 1.0. The colors a and b need not be in RGB; they will be converted to RGB using d3.rgb. The return value of the interpolator is an RGB string.

interpolateRgbBasis(colors)

d3.interpolateRgbBasis(["purple", "green", "orange"])

Examples · Source · Returns a uniform nonrational B-spline interpolator through the specified array of colors, which are converted to RGB color space. Implicit control points are generated such that the interpolator returns colors[0] at t = 0 and colors[colors.length - 1] at t = 1. Opacity interpolation is not currently supported. See also d3.interpolateBasis, and see d3-scale-chromatic for examples.

interpolateRgbBasisClosed(colors)

d3.interpolateRgbBasisClosed(["purple", "green", "orange"])

Examples · Source · Returns a uniform nonrational B-spline interpolator through the specified array of colors, which are converted to RGB color space. The control points are implicitly repeated such that the resulting spline has cyclical C² continuity when repeated around t in [0,1]; this is useful, for example, to create cyclical color scales. Opacity interpolation is not currently supported. See also d3.interpolateBasisClosed, and see d3-scale-chromatic for examples.

interpolateHsl(a, b)

d3.interpolateHsl("purple", "orange")

Examples · Source · Returns an HSL color space interpolator between the two colors a and b. The colors a and b need not be in HSL; they will be converted to HSL using d3.hsl. If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.

interpolateHslLong(a, b)

d3.interpolateHslLong("purple", "orange")

Examples · Source · Like interpolateHsl, but does not use the shortest path between hues.

interpolateLab(a, b)

d3.interpolateLab("purple", "orange")

Examples · Source · Returns a CIELAB color space interpolator between the two colors a and b. The colors a and b need not be in CIELAB; they will be converted to CIELAB using d3.lab. The return value of the interpolator is an RGB string.

interpolateHcl(a, b)

d3.interpolateHcl("purple", "orange")

Examples · Source · Returns a CIELCh_ab color space interpolator between the two colors a and b. The colors a and b need not be in CIELCh_ab; they will be converted to CIELCh_ab using d3.hcl. If either color’s hue or chroma is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.

interpolateHclLong(a, b)

d3.interpolateHclLong("purple", "orange")

Examples · Source · Like interpolateHcl, but does not use the shortest path between hues.

interpolateCubehelix(a, b)

d3.interpolateCubehelix("purple", "orange")

d3.interpolateCubehelix.gamma(3)("purple", "orange")

Examples · Source · Returns a Cubehelix color space interpolator between the two colors a and b using a configurable gamma. If the gamma is not specified, it defaults to 1.0. The colors a and b need not be in Cubehelix; they will be converted to Cubehelix using d3.cubehelix. If either color’s hue or saturation is NaN, the opposing color’s channel value is used. The shortest path between hues is used. The return value of the interpolator is an RGB string.

interpolateCubehelixLong(a, b)

d3.interpolateCubehelixLong("purple", "orange")

d3.interpolateCubehelixLong.gamma(3)("purple", "orange")

Examples · Source · Like interpolateCubehelix, but does not use the shortest path between hues.

interpolateColor.gamma(gamma)

d3.interpolateRgb.gamma(2.2)("purple", "orange")

Given that interpolate is one of interpolateRgb, interpolateCubehelix or interpolateCubehelixLong, returns a new interpolator factory of the same type using the specified gamma. See Eric Brasseur’s article, Gamma error in picture scaling, for more on gamma correction.

interpolateHue(a, b)

d3.interpolateHue(20, 340)(0.5) // 0

Examples · Source · Returns an interpolator between the two hue angles a and b. If either hue is NaN, the opposing value is used. The shortest path between hues is used. The return value of the interpolator is a number in [0, 360).

Whereas standard interpolators blend from a starting value a at t = 0 to an ending value b at t = 1, spline interpolators smoothly blend multiple input values for t in [0,1] using piecewise polynomial functions. Only cubic uniform nonrational B-splines are currently supported, also known as basis splines.