Interpolation

Below we use Colour.interpolator to interpolate two colours. Calling interpolator returns a function which you can then pass the interpolation amount (0..1) and get back a colour string.

import { Colour } from "https://unpkg.com/@ixfx/visual/bundle";
const interpolate = Colour.interpolator(startColour, targetColour);

interpolate(0.5); // Get the colour at 50% between start and target

When interpolating colour you may want to play with whether the ‘travel’ between the colours is longer or shorter, and choose a colour space. This only applies to the HSL and OkLCH colour spaces which use an angle for hue.

By default, colour interpolation uses ‘shorter’ travel and OkLCH colourspace, which is generally the most visually pleasing.

const interpolate = Colour.interpolator(`blue`, `red`, {
  direction: `shorter`,
  space: `oklch`
});

Stepped scale

Colour.createSteps produces a stepped scaled of colours between two colours. Under-the-hood it uses the interpolator.

const steps = Colour.createSteps(`red`, `green`, { steps: 10, space: `oklch` });
for (const step of steps) {
  // 'step' will be a CSS colour string
}

There’s also Colour.scale to interpolate between an arbitrary number of colours.