Function interpolator

Returns a function to interpolate between colours, with results as a structured Colour object.

const i = interpolator([`orange`, `yellow`, `red`]);

// Get a random colour on the above spectrum
i(Math.random());
Copy

Results will vary depending on the colour space used, play with the options. When using a hue-based colour space, the hue option sets the logic for how hue values wrap.

interpolator([`orange`, `yellow`, `red`], { space: `hsl`, hue: `longer })
Copy

Example: Draw the interpolation as a spectrum on a canvas, where each pixel is one step

let v = 0;
let incrementBy = 0.01;
while (v <= 1) {
 // Get colour at this interpolation point 0..1
 const colour = fn(v);
 // Convert to a CSS string
 ctx.fillStyle = Colour.toCssColour(colour);
 // Draw a 1px wide rect, and shuffle along to the next x position
 ctx.fillRect(x, y, 1, h);
 x += 1;
 v += incrementBy;
}
Copy