Nulette NPM | npm.io

Nulette

A superslim color library.

Made to assist with p5 sketches.

Installation

Install using npm:

$ npm i nulette

const nulette = require('nulette');

let my_palette = nulette('#302626#5d5d75#608f82#cccba3');
console.log(my_palette.lightest.hex);

Using UNPKG cdn:

<script src="https://unpkg.com/nulette@latest"></script>

Using Skypack:

import nulette from 'https://cdn.skypack.dev/nulette';

Create a new Palette or Color

One size fits all:

nulette(args: string) => {( Color | Palette )}

Why ?
Because it's easy to go to lospec, pick a palette, copy the hex codes and paste them in a string

let color = nulette('#ffa500'); // returns `Color` Object
let palette = nulette('#302626#5d5d75#608f82#cccba3'); // returns `Palette` Object

Visual aid #302626 #5d5d75 #608f82 #cccba3

Color

Members

hex

Get the colors hex value (string)

console.log(color.hex);

#ffa500

rgb

Get the colors RGB value (Array)

console.log(color.rgb);

[ 255, 165, 0 ]

hsl

Get the colors HSL value (Array)

console.log(color.hsl);

[ 38.82352941176471, 1, 0.5 ]

Methods

darken

Darken color by value or 0.2

darken(value?: number)

Example

console.log(color.hex);

#ffa500

color.darken();
console.log(color.hex);

#996300

lighten

Lighten color by value or 0.2

lighten(value?: number)

saturate

Saturate color by value or 0.2

saturate(value?:number)

Example

let col = nulette('#5d5d75');
console.log(col.hex);

#5d5d75

col.lighten(0.1).saturate(0.4);
console.log(col.hex);

#4242c3

desaturate

Desaturate color by value or 0.2

desaturate(value?:number)

hueShift

Shift the colors' hue

hueShift(value: number)

Example

console.log(color.hex);

#ffa500

color.hueShift(120);
console.log(color.hex);

#00ffa5

reset

Reset the colors value to the original

reset() => void

Example

let z = nulette('#ffa500');
console.log(z.hex);

#ffa500

z.darken(0.3);
console.log(z.hex);

#664200

z.reset();
console.log(z.hex);

#ffa500

save

Overwrite the original value with the current one

save() => void

Example

let z = nulette('#ffa500');
console.log(z.hex);

#ffa500

z.darken(0.3);
console.log(z.hex);

#664200

z.save()
z.reset();
console.log(z.hex);

#664200

complementary

Get a complementary color

complementary() => {Color}

Example

let z = nulette('#ffa500')
let compl = z.complementary()
console.log(compl.hex)

#005aff

triadic

Get a triadic palette based on color

triadic() => {Palette}

Example

let z = nulette('#ffa500')
let t = z.triadic()
console.log(t.colors.map(v=> v.hex))

#ffa500, #00ffa5, #a500ff

tetradic

Get a tetradic palette based on color

tetradic() => {Palette}

Example
let z = nulette('#ffa500')
let t = z.tetradic()
console.log(t.colors.map(v=> v.hex))
#ffa500, #00ff25, #005aff, #ff00da

analogous

Get an analogous palette based on color

analogous() => {Palette}

Example

let z = nulette('#ffa500')
let t = z.analogous()
console.log(t.colors.map(v=> v.hex))

#ff2600, #ffa500, #d9ff00

mix

Mix color with another one by percentage

mix(color:string, amount:number) => {Color}

Example

let z = nulette('#ffa500')
let x = z.mix('#9a0467', 0.5)
console.log(x.hex)

#cd5534

Palette

Members

colors

Returns an Array of Color Objects

console.log(palette.colors)

[ Color { ... }, Color { ... }, ... ]

console.log(palette.colors.map((v) => v.hex));

[ '#cccba3', '#608f82', '#5d5d75', '#302626' ]

lightest

Get the lightest color

console.log(palette.lightest.hex);

#cccba3

darkest

Get the darkest color

console.log(palette.darkest.hex);

#302626

Methods

random

Get a random color

random() => {Color}

Example

console.log(palette.random().hex);

#302626

light

Get a random light color

light() => {Color}

Example

console.log(palette.light().hex);

#608f82

dark

Get a random dark color

dark() => {Color}

Example
console.log(palette.dark().hex);
#5d5d75

reset

Reset colors back to their last saved values

reset() => void

Example

palette.colors.map((v) => v.darken(0.3)); //  Darken every color by 0.3
console.log(palette.colors.map((v) => v.hex));

#8a884c, #23332f, #191920, #000000

palette.reset();
console.log(palette.colors.map((v) => v.hex)); //  Colors are back to their original values

#cccba3, #608f82, #5d5d75, #302626

nuke

Reset colors back to their original values

nuke() => void

Example
let pal = nulette("#ff0000#00ff00#0000ff")
#ff0000, #00ff00, #0000ff
pal.colors.map(c => c.darken(1).save())
#000000, #000000, #000000
pal.reset()
Since we saved the changes above, reset will now only reset back to that last saved point.
#000000, #000000, #000000
pal.nuke()
#ff0000, #00ff00, #0000ff