Function Signature

js

scale(startHex: string, endHex: string, steps?: number, options?: InterpolationOptions | InterpolationSpace): string[]

Parameters

startHex (string): The starting HEX color string.
endHex (string): The ending HEX color string.
steps (number, optional): Number of colors to generate, including start and end. Minimum is 2. Defaults to 5.
options.space ("rgb" | "hsl" | "lab" | "oklab" | "oklch", optional): Interpolation space. Defaults to "rgb".
options.hue ("shorter" | "longer" | "increasing" | "decreasing" | "raw", optional): Hue interpolation mode for HSL and OKLCH.
options.easing (function, optional): Maps t from 0-1 before interpolation.

Return Value

An array of HEX strings representing the interpolated colors between start and end.

js

scale("#ff0000", "#0000ff", 5);
// ["#ff0000", "#bf0040", "#800080", "#4000bf", "#0000ff"]

scale("#ff6600", "#0066ff", 3, { space: "oklch" });
// ["#ff6600", "#d144c3", "#0066ff"]

Examples

js

console.log(scale("#ff0000", "#0000ff"));
// ["#ff0000", "#bf0040", "#800080", "#4000bf", "#0000ff"]

console.log(scale("#ff6600", "#0066ff", 7, { space: "oklab" }));
// perceptual OKLab ramp

console.log(scale("#ff6600", "#0066ff", 7, { space: "oklch", hue: "longer" }));
// OKLCH ramp using the longer hue path

Implementation Details

Delegates each step to interpolate.
Steps are evenly distributed from 0 to 1 across the ramp.
Ensures at least 2 steps to always include both start and end colors.
Rounds steps to the nearest integer.
Defaults to RGB interpolation for backwards compatibility.

Usage Notes

The first element is always startHex, and the last element is always endHex.
Use oklab or oklch for smoother perceptual UI ramps.
Use RGB for exact legacy behavior or simple channel blending.