JSPM

color-interpolate

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12387
  • Score
    100M100P100Q129389F
  • License MIT

Pick color from a given color palette by index

Package Exports

  • color-interpolate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-interpolate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

color-interpolate stable

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

Usage

npm install color-interpolate

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

let colormap = interpolate(['black', '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 - pass it an array with colors in any format and it will return a function which by any float index will return color, just like a colormap.

**`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, mix?);`**

Get interpolated color from palette by index value within 0..1 range. Pass optional mix function to use custom interpolator, 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

colormap — collecting of beautiful colormaps for data, a good source for palettes.
nice-color-palettes — collection of beautiful color palettes, another good source of palettes.