/color-interpolate

Get interpolated color from a palette

Primary LanguageJavaScript

color-interpolate stable

For a given palette, return color by any float index. Useful for interpolating colormaps, color palettes or even gradients.

Usage

npm install color-interpolate

const interpolate = require('color-interpolate');

let colormap = interpolate(['black', 'gray', 'white']);
let black = colormap(0); // 'rgb(0, 0, 0)'
let white = colormap(1); // 'rgb(255, 255, 255)'
let gray = colormap(.5); // 'rgb(128, 128, 128)'

API

**`const interpolate = require('color-interpolate');`**

interpolate is a color interpolator constructor.

**`let palette = interpolate(colors);`**

Create interpolator from a list of colors. Colors can be in any format: css color string, array with rgb channel values, object with r, g, b or h, s, l channel values or even a number, see color-parse for reference.

Example:

const palettes = require('nice-color-palettes');
const interpolate = require('color-interpolate');

//pick random palette
let palette = interpolate(palettes[32]);

let activeColor = palette(.2); // 'rgb(51, 23 47)'
let background = palette(1); // 'rgb(255, 255, 255)'
let foreground = palette(0); // 'rgb(0, 0, 0)'
**`let color = palette(index, fn?);`**

Get interpolated color from palette by index value within 0..1 range. Pass optional fn interpolation function, by default lerp is used, but smoothstep can be used as an alternative.

Credits

Thanks to @mattdesl for interpolation functions and @mikkoh for API insight in interpolation-arrays.

In the wild

settings-panel
gl-waveform
gl-spectrogram
gl-spectrum

Related

colormap — collection of beautiful colormaps, a good source for palettes.
nice-color-palettes — collection of beautiful color palettes from colourlovers.
color-alpha — change alpha of a color string.