Skip to content
spectrum logoSpectrum API Docs
GitHub

createPalette()

The createPalette function allows you to generate a palette of colors based on a given Spectrum instance. Each key in the palette object represents a lightness value from 0 to 100, and the corresponding value is a Spectrum object.

Usage

import Spectrum, { createPalette } from '@snipshot/spectrum';

const cyan = new Spectrum('hex', '#0ff');
console.log(cyan.hsl); // { h: 180, s: 1, l: 0.5, a: 1 }

const palette = createPalette(cyan);

console.log(palette[0].hsl); // { h: 180, s: 1, l: 0, a: 1 } - black
console.log(palette[44].hsl); // { h: 180, s: 1, l: 0.44, a: 1 }
console.log(palette[70].hsl); // { h: 180, s: 1, l: 0.7, a: 1 }
console.log(palette[100].hsl); // { h: 180, s: 1, l: 1, a: 1 } - white

Parameters

createPalette(colorObj)

ParameterTypeRequiredDescription
colorObjSpectrum instancetrueThe color from which will be generated a palette

Return Value

The colorMix function returns a palette object with lightness values from 0 to 100 as keys, where each key corresponds to a Spectrum instance representing a color with the specified lightness. The keys step is equal to 1, thus, there are 101 values inside the palette object.