color-interpolate

color-interpolate

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

Usage

$ npm install color-interpolate

import interpolate from '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

let palette = interpolate(colors)

Create interpolator from a list of colors. Colors can be any string color-rgba recognizes — hex, keywords, rgb(), hsl(), lab(), oklch(), color(display-p3 …) etc. — or an array with channel values, or a number. An unrecognized color throws.

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.

Example:

import palettes from 'nice-color-palettes'
import interpolate from 'color-interpolate'

const 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)'

Credits

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

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.
color-spectrum — convert spectrum, like FFT result, to color.
color-space — collection of color space transforms, useful for custom interpolation modes.

Dmitry Iv. MIT License