PigmentJS :pig_nose: :candy:

PigmentJS is a very, very simple zero-dependency colour library built for web developers to easily create beautiful, legible, and accessible colour palettes.

Quick Start

Install

npm i --save pigmentjs

Use Pigment

Instantiate PigmentJS to generate a random colour, or use a 3 or 6 character Hex string.

// Require
const {Pigment} = require('pigmentjs');
// OR
// Import
import Pigment from 'pigmentjs'


Pigment(); // Random colour
Pigment('#FFFFFF');
Pigment('#F3C');

Create colours

const pigment = Pigment('#22FF09');
const complementary = pigment.complementary().hex; // '#E609FF'
const triad = pigment.triad(); // [Pigment(), Pigment(), Pigment()];

Pigment()

API

Getters

Pigment().rgb

Pigment().rgb; // [239, 56, 230]

Pigment().rgbString

Pigment().rgbString; // '239, 56, 230'

Pigment().hex

Pigment().hex; // '#EF38E6'

Pigment().hsl

Pigment().hsl; // [302, 85.1, 57.8]

Pigment().hslString

Pigment().hslString; // '302, 85.1, 57.8'

Pigment().hue

Pigment().hue; // 302

Pigment().saturation

Pigment().saturation; // 85.1

Pigment().lightness

Pigment().lightness; // 57.8

Pigment().relativeLuminance

Pigment().relativeLuminance; // 0.56

Pigment().textColourHex

Returns black or white, whichever will have a higher contrast relative to the primary colour.

Pigment().textColourHex; // '#FFFFFF'

Methods

Always returns a new Pigment instance or an array of Pigment instances.

Pigment().complementary()

Converts colour to HSL, rotates Hue by 180 degrees.

Pigment().complementary(); // Pigment() (complementary colour)

Pigment().triad()

Converts colour to HSL, rotates Hue by 120 degrees either side.

const pigment = Pigment();
pigment.triad(); // [colour (itself), Pigment(), Pigment()]

Pigment().monochrome(5)

Returns an array of colours with a monochromatic relationship to the input colour (i.e. an almost identical Hue).

Params

Size [Int] (required)

• How many new colours to return

const pigment = Pigment();
pigment.monochrome(3); // [Pigment(), Pigment(), Pigment()]

Pigment().shades(5)

Returns an array of colours with black mixed progressively.

Params

Size [Int] (required)

• How many new colours to return

const pigment = Pigment();
pigment.shades(3); // [Pigment(), Pigment(), Pigment()]

Deploying

1. Bump verion number

npm version [major|minor|patch]

2. Build and publish

npm publish