Function Signature

js

interpolate(startHex: string, endHex: string, t?: number, options?: InterpolationOptions | InterpolationSpace): string

Parameters

startHex (string): Starting HEX color.
endHex (string): Ending HEX color.
t (number, optional): Interpolation amount from 0 to 1. Defaults to 0.5 and is clamped.
options.space ("rgb" | "hsl" | "lab" | "oklab" | "oklch", optional): Interpolation color space. Defaults to "rgb".
options.hue ("shorter" | "longer" | "increasing" | "decreasing" | "raw", optional): Hue path for HSL and OKLCH interpolation.
options.easing (function, optional): Maps the interpolation amount before blending.

Return Value

A HEX color string in the format #rrggbb.

js

interpolate("#000000", "#ffffff", 0.5);
// "#808080"

interpolate("#ff6600", "#0066ff", 0.5, { space: "oklab" });
// perceptual midpoint

interpolate("#ff6600", "#0066ff", 0.5, "oklch");
// shorthand for { space: "oklch" }

Usage Notes

Use rgb for simple channel interpolation and backwards-compatible ramps.
Use oklab or oklch for smoother perceptual gradients.
Hue interpolation options only affect HSL and OKLCH.