@mapbox/to-color

Procedurally generate a deterministic, perceptually distributed color palette. Uses HSLuv internally for a uniform saturation between palattes.

install

npm install @mapbox/to-color

Usage

import toColor from '@mapbox/to-color'

const color = new toColor('tmcw');

// Or a number
// const color = new toColor(1234);
// Or with options
// const color = new toColor('tmcw', { brightness: 0.25, saturation: 1.1 });

color.getColor();

// Multiple calls return a new deterministic random color
color.getColor();

getColor can optionally take a seed to guarantee the same random color regardless of order.

import toColor from '@mapbox/to-color'

const color = new toColor('trees');

color.getColor('cedar'); // Returns a random color based on `trees`
color.getColor('birch'); 
color.getColor('cedar'); // Returns the same color for cedar
color.getColor('spruce');

Options

| Option | Value | Default | Description | | --- | --- | --- | --- | | brightness | Number | 0 | Adjusts brightness percentage from the derived min/max range. | | saturation | Number | 0 | Adjusts saturation percentage from the derived min/max range. | | limit | Array | [] | Limits the higher range of hues for a given color. Options can be red, orange, yellow, green, blue, purple, or pink. |

Developing

# Demo site
npm install & npm start

# Run tests
npm run test

Credit v2 is adapted from randomColor.