Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

// 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]
  1. Build and publish
npm publish

About

A zero-dependency colour organisation, creation and manipulation library built for web developers. Built by: www.fundamental.shop

Topics

Resources

License

Packages

No packages published