jpalette

Small Javascript library to generate a color palette.

Usage no npm install needed!

<script type="module">
  import jpalette from 'https://cdn.skypack.dev/jpalette';
</script>

README

jPalette

A small javascript library to generate a color palette.

Demo

How to install

Node.js

npm install jpalette --save

Download

Just download from here.

How to import

ES6 module

Use Webpack and/or Babel to bundle.

import * as jPalette from 'jpalette';

HTML script tag

<script src="jpalette.min.js"></script>

How to use

There are two types of objects: Color and ColorMap.

A Color object is defined in RGBA format.

A ColorMap object is an array of Color.

You can retrieve a color with a normalized index between 0 and 1.

Manual palette

Here we generate a palette in 100 steps from red to green to blue.

let colorMap = new jPalette.ColorMap(100, [
  new jPalette.Color(255, 0, 0, 255),
  new jPalette.Color(0, 255, 0, 255),
  new jPalette.Color(0, 0, 255, 255),
]);

// Normalized index between 0 and 1
let color = colorMap.getColor(0.3);

console.log(color);
// Color {r: 105, g: 149, b: 0, a: 255}
console.log(color.rgb());
// Return string for css use:
// rgb(0,206,48)

Predefined palette

let colorMap = jPalette.ColorMap.get('sky')(1000);

Available palettes:

  • whitetoblack
  • blacknwhite
  • rgb
  • fire
  • night
  • sky
  • rainbow

Predefined colors

let color = jPalette.Color.get('cyan')(255); // Alpha transparancy set to 255

Available palettes:

  • white
  • black
  • red
  • green
  • blue
  • yellow
  • cyan
  • magenta
  • indigo
  • pink
  • orange
  • apple
  • manganese
  • guppie
  • purple
  • teal
  • olive
  • coral

How to build

npm run build