Specialized color interpolators for different color spaces with perceptual blending and gamma correction support.
Linear RGB interpolation with optional gamma correction.
/**
* Returns an RGB color space interpolator with configurable gamma correction.
* Default gamma is 1.0. Colors are converted to RGB if needed.
* @param a - Starting color (string or d3.color object)
* @param b - Ending color (string or d3.color object)
* @returns Interpolator function returning RGB color string
*/
function interpolateRgb(a: string | Color, b: string | Color): (t: number) => string;
/**
* Returns a new RGB interpolator factory with specified gamma correction
* @param gamma - Gamma correction value (typically 2.2 for displays)
* @returns RGB interpolator factory with gamma correction
*/
interpolateRgb.gamma(gamma: number): typeof interpolateRgb;Usage Examples:
import { interpolateRgb } from "d3-interpolate";
// Basic RGB interpolation
const rgbInterp = interpolateRgb("red", "blue");
console.log(rgbInterp(0.0)); // "rgb(255, 0, 0)"
console.log(rgbInterp(0.5)); // "rgb(128, 0, 128)"
console.log(rgbInterp(1.0)); // "rgb(0, 0, 255)"
// Gamma-corrected interpolation (more perceptually accurate)
const gammaRgb = interpolateRgb.gamma(2.2)("red", "blue");
console.log(gammaRgb(0.5)); // "rgb(188, 0, 67)"
// Works with hex colors
const hexInterp = interpolateRgb("#ff0000", "#0000ff");
console.log(hexInterp(0.5)); // "rgb(128, 0, 128)"
// Works with named colors
const namedInterp = interpolateRgb("steelblue", "brown");
console.log(namedInterp(0.5)); // "rgb(142, 92, 109)"
// Handles opacity
const opacityInterp = interpolateRgb("rgba(255,0,0,0.5)", "rgba(0,0,255,0.8)");
console.log(opacityInterp(0.5)); // "rgba(128, 0, 128, 0.65)"B-spline interpolation through multiple RGB colors.
/**
* Returns a uniform nonrational B-spline interpolator through RGB colors.
* Returns colors[0] at t=0 and colors[colors.length-1] at t=1.
* @param colors - Array of color strings to interpolate through
* @returns Interpolator function returning RGB color string
*/
function interpolateRgbBasis(colors: string[]): (t: number) => string;
/**
* Returns a cyclical B-spline interpolator through RGB colors.
* Has cyclical C² continuity when repeated around t in [0,1].
* @param colors - Array of color strings to interpolate through
* @returns Interpolator function returning RGB color string
*/
function interpolateRgbBasisClosed(colors: string[]): (t: number) => string;Usage Examples:
import { interpolateRgbBasis, interpolateRgbBasisClosed } from "d3-interpolate";
// Rainbow progression
const rainbow = interpolateRgbBasis(["red", "orange", "yellow", "green", "blue", "purple"]);
console.log(rainbow(0.0)); // "rgb(255, 0, 0)" (red)
console.log(rainbow(0.2)); // smooth transition through orange
console.log(rainbow(0.5)); // smooth transition through yellow/green
console.log(rainbow(1.0)); // "rgb(128, 0, 128)" (purple)
// Cyclical color wheel
const wheel = interpolateRgbBasisClosed(["red", "yellow", "blue"]);
console.log(wheel(0.0)); // red
console.log(wheel(0.33)); // yellow
console.log(wheel(0.66)); // blue
console.log(wheel(1.0)); // back to red (cyclical)HSL (Hue, Saturation, Lightness) interpolation with hue path options.
/**
* Returns an HSL color space interpolator using the shortest path between hues.
* Colors are converted to HSL if needed.
* @param a - Starting color
* @param b - Ending color
* @returns Interpolator function returning RGB color string
*/
function interpolateHsl(a: string | Color, b: string | Color): (t: number) => string;
/**
* Returns an HSL color space interpolator without shortest path optimization.
* @param a - Starting color
* @param b - Ending color
* @returns Interpolator function returning RGB color string
*/
function interpolateHslLong(a: string | Color, b: string | Color): (t: number) => string;Usage Examples:
import { interpolateHsl, interpolateHslLong } from "d3-interpolate";
// Shortest path (default)
const hslShort = interpolateHsl("hsl(10, 50%, 50%)", "hsl(350, 50%, 50%)");
console.log(hslShort(0.5)); // Hue ~0° (takes shorter 20° path)
// Long path (full circle)
const hslLong = interpolateHslLong("hsl(10, 50%, 50%)", "hsl(350, 50%, 50%)");
console.log(hslLong(0.5)); // Hue ~180° (takes longer 340° path)
// Rainbow with HSL
const hslRainbow = interpolateHsl("hsl(0, 100%, 50%)", "hsl(300, 100%, 50%)");
console.log(hslRainbow(0.5)); // "rgb(0, 255, 128)" (hue ~150°)CIELAB perceptually uniform color space interpolation.
/**
* Returns a CIELAB color space interpolator.
* Colors are converted to CIELAB if needed. More perceptually uniform than RGB.
* @param a - Starting color
* @param b - Ending color
* @returns Interpolator function returning RGB color string
*/
function interpolateLab(a: string | Color, b: string | Color): (t: number) => string;Usage Examples:
import { interpolateLab } from "d3-interpolate";
// Perceptually uniform interpolation
const labInterp = interpolateLab("steelblue", "brown");
console.log(labInterp(0.5)); // More perceptually accurate midpoint
// Better for gradients
const labGradient = interpolateLab("#000000", "#ffffff");
console.log(labGradient(0.5)); // Perceptually middle grayCIELCh (Hue, Chroma, Lightness) cylindrical representation of CIELAB.
/**
* Returns a CIELCh color space interpolator using shortest path between hues.
* @param a - Starting color
* @param b - Ending color
* @returns Interpolator function returning RGB color string
*/
function interpolateHcl(a: string | Color, b: string | Color): (t: number) => string;
/**
* Returns a CIELCh color space interpolator without shortest path optimization.
* @param a - Starting color
* @param b - Ending color
* @returns Interpolator function returning RGB color string
*/
function interpolateHclLong(a: string | Color, b: string | Color): (t: number) => string;Usage Examples:
import { interpolateHcl, interpolateHclLong } from "d3-interpolate";
// Perceptually uniform with hue control
const hclInterp = interpolateHcl("purple", "orange");
console.log(hclInterp(0.5)); // Perceptually accurate intermediate
// Long path for creative effects
const hclRainbow = interpolateHclLong("red", "red"); // Full hue circleCubehelix color space designed for scientific visualization.
/**
* Returns a Cubehelix color space interpolator with configurable gamma.
* Designed for scientific data visualization with monotonic lightness.
* @param a - Starting color
* @param b - Ending color
* @returns Interpolator function returning RGB color string
*/
function interpolateCubehelix(a: string | Color, b: string | Color): (t: number) => string;
/**
* Returns a Cubehelix color space interpolator without shortest path optimization.
* @param a - Starting color
* @param b - Ending color
* @returns Interpolator function returning RGB color string
*/
function interpolateCubehelixLong(a: string | Color, b: string | Color): (t: number) => string;
/**
* Returns a new Cubehelix interpolator factory with specified gamma
* @param gamma - Gamma correction value
* @returns Cubehelix interpolator factory with gamma correction
*/
interpolateCubehelix.gamma(gamma: number): typeof interpolateCubehelix;
interpolateCubehelixLong.gamma(gamma: number): typeof interpolateCubehelixLong;Usage Examples:
import { interpolateCubehelix } from "d3-interpolate";
// Scientific visualization (monotonic lightness)
const sciInterp = interpolateCubehelix("black", "white");
console.log(sciInterp(0.5)); // Perceptually middle brightness
// Gamma correction for displays
const gammaHelix = interpolateCubehelix.gamma(3.0)("purple", "green");
console.log(gammaHelix(0.5)); // Emphasizes high-intensity valuesDirect hue angle interpolation for HSL/HCL color construction.
/**
* Returns an interpolator between two hue angles using shortest path.
* If either hue is NaN, uses the opposing value.
* @param a - Starting hue angle (degrees)
* @param b - Ending hue angle (degrees)
* @returns Interpolator function returning hue angle in [0, 360)
*/
function interpolateHue(a: number, b: number): (t: number) => number;Usage Examples:
import { interpolateHue } from "d3-interpolate";
// Shortest path hue interpolation
const hueInterp = interpolateHue(10, 350);
console.log(hueInterp(0.5)); // 0 (takes 20° path, not 340°)
// Full circle interpolation
const fullCircle = interpolateHue(0, 360);
console.log(fullCircle(0.25)); // 90
console.log(fullCircle(0.5)); // 180
console.log(fullCircle(0.75)); // 270
// Handle NaN values
const nanHue = interpolateHue(NaN, 180);
console.log(nanHue(0.5)); // 180 (uses opposing value)RGB and Cubehelix interpolators support gamma correction for more accurate display rendering:
// Standard display gamma
const displayRgb = interpolateRgb.gamma(2.2)("red", "green");
// Emphasize high-intensity values
const brightCubehelix = interpolateCubehelix.gamma(3.0)("blue", "yellow");
// Gamma correction also works with CubehelixLong
const gammaCubehelixLong = interpolateCubehelixLong.gamma(2.2)("purple", "green");