interpolate

function interpolate(
  color1: Color,
  color2: Color,
  t: number,
  options?: InterpolationOptions,
): Color;

Without options this interpolates OKLCH channels with the hue taking the shortest path around the wheel; achromatic endpoints (chroma at or below ACHROMATIC_CHROMA_THRESHOLD) borrow the other endpoint's hue, at t = 0 and t = 1 too, so the hue is continuous in t (with { space: 'oklch' } the endpoints are returned exactly instead). Option-less mix() gives identical results. Passing options switches to CSS Color 4 interpolation in the chosen space; see mix() for the option details.

Parameters

color1Color

Start color

color2Color

End color

tnumber

Interpolation position; values outside [0, 1] extrapolate

options?InterpolationOptions

Interpolation space, hue method, and alpha handling

Returns

Color

Example

import { interpolate, parse, toHex } from '@pbroom/color-kit';

const a = parse('#3b82f6');
const b = parse('#ef4444');
toHex(interpolate(a, b, 0.25)); // → '#8c6bf1'
toHex(interpolate(a, b, 0.25, { space: 'oklch', hue: 'longer' })); // → '#00a6b8'