Skip to content
A zero-dependency colour organisation, creation and manipulation library built for web developers. Built by: www.fundamental.shop
JavaScript
Branch: master
Clone or download
Latest commit e6515eb Jul 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
docs update docs version Jul 14, 2019
src
test
.babelrc
.eslintrc.json switchcase indentation fix Jul 4, 2019
.gitignore
.hound.yml
LICENSE
README.md
acknowledgements.md tidy up acknowledgements Jul 5, 2019
package-lock.json 0.1.11 Jul 14, 2019
package.json
webpack.config.js

README.md

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.

Params

Size [Int] (required)

  • How many new colours to return
const pigment = Pigment();
pigment.shades(3); // [Pigment(), Pigment(), Pigment()]

Dev README

You can’t perform that action at this time.