Interpolate gradients based on common palettes. See a demo.

Inspired by D3 colour scales, with maps from colormap.

yarn add hue-map

import { createPalette } from 'hue-map'

const myPalette = createPalette({
  map: 'viridis',
  steps: 3,
})

console.log(myPalette.format('cssHex'))
// --> ['#440154FF', '#21908DFF', '#FDE725FF']

hue-map exports a createPalette function which takes an options object and returns a palette object.

Call .format() on a palette object to get an array of colours. Pass a format argument to control the format that the colors are returned as.

There are several built-in colour maps available to use:

jet, hsv, hot, spring, summer, autumn, winter, bone, copper, greys, yignbu, greens, yiorrd, bluered, rdbu, picnic, rainbow, portland, blackbody, earth, electric, alpha, viridis, inferno, magma, plasma, warm, cool, rainbow-soft, bathymetry, cdom, chlorophyll, density, freesurface-blue, freesurface-red, oxygen, par, phase, salinity, temperature, turbidity, velocity-blue, velocity-green, cubehelix

Visit the demo page to see a list with examples.

You can also provide a custom colour map to the map option, with a type of [number, number | RGBA][]. This is an array of tuples, where each tuple has an index of where that colour appears in the gradient (from 0 to 1), and the colour at that point, as a HEX number or an RGBA tuple. Note that all HEX numbers need to include alpha.

import { createPalette } from 'hue-map'

// 3 colour points, using HEX values
const myHexPalette = createPalette({
  map: [
    [0, 0xFEAC5EFF],
    [0.5, 0xC779D0FF],
    [1, 0x4BC0C8FF],
  ]
})

// 5 colour points, using RGBA values
const myHexPalette = createPalette({
  map: [
    [0, [38, 83, 43, 255]],
    [0.25, [57, 158, 90, 255]],
    [0.5, [90, 188, 185, 255]],
    [0.75, [99, 226, 198, 255]],
    [1, [110, 249, 245, 255]],
  ]
})

1. Clone the repo onto your machine
2. Run yarn to install dependencies
3. Run yarn dev to test palettes with a demo page

Build the library to dist using yarn build.

Issue contributions and PRs are greatly welcomed and appreciated!

This library uses changesets, if the changes you've made would constitute a version bump, run yarn changeset and follow the prompts to document the changes you've made. Changesets are consumed on releases, and used to generate a changelog and bump version number.

hue-map is licensed under MIT