Package Exports

pigmentjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pigmentjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PigmentJS 🐽 🍬

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.

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.