color-palette-js

Tool for creating color palettes and gradiens.

Installation

$ npm install color-palette-js

or

$ yarn add color-palette-js

##API

new Palette(type, ...colors)

Creates new color palette: shade of one color, or gradient. Colors must be in their name-codes, hex-format, RGB, or RGBa.

const shadeOfBlue = new Palette('shade', 'blue'); // Creates shade of blue 
const blueRedYellow = new Palette('gradient', 'blue', 'red', 'yellow'); // Creates gradient

You can mix color codes:

const blueRedYellow = new Palette('gradient', 'blue', '#FF0000', 'rgb(255,255,0)'); // Creates gradient

setPointsRange(min, max)

Set range and interpolate colors.

const blueRedYellow = new Palette('gradient', 'blue', 'red'); // Creates gradient

blueRedYellow.setPointsRange(0, 25); // Interpolates 25 colors inbetween blue and red;

getColor(i)

Returns color in range.

const blueRedYellow = new Palette('gradient', 'blue', 'red'); // Creates gradient

blueRedYellow.setPointsRange(0, 25);

const color = blueRedYellow.getColor(10); // Returns 10th color in range.

const { rgb, rgba, hex } = color; // You can get color in this formats.

.colors

You can access array of colors directly.

const blueRedYellow = new Palette('gradient', 'blue', 'red'); // Creates gradient

blueRedYellow.setPointsRange(0, 25);

const colors = blueRedYellow.colors; // => [ Color {}, Color {} ... ] 

Example

  const shadeOfBlue = new Palette("shade", "blue");

  const gradient = new Palette("gradient", "#40cff7", "#d05ddd", "yellow");

  shadeOfBlue.setPointsRange(0, 22);

  gradient.setPointsRange(0, 45);

Result: