node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »

color-forge

Color Forge

A simple color system based on the work of https://github.com/dfcreative/color-space

npm install color-forge
var colorForge = require('color-forge');

See doc.md for full documentation.

Basic Usage

Creating a Color Instance

Colors can be made with the regular constructor pattern with the parameters values, alpha = 1, space = 'rgb'.

var color = new Color([255, 0, 0], 1, 'rgb');

or since the alpha defaults to 1, and the color space defaults to 'rgb', this can be written as follows.

var color = Color([255, 0, 0]);

To create a color in a specific space, you may also use the following shorthand, which accepts the parameters values, alpha = 1.

var color = Color.hsl([180, 100, 50], 1);
var color = Color.hsl([180, 100, 50]);

In addition, you can create a color from a hex code as follows, with the leading hash (#) being optional.

Color.hex('#123');
Color.hex('#112233');
Color.hex('#1234'); // has alpha of ~0.26 
Color.hex('#1223344'); // has alpha of ~0.26 
 
Color.hex('123');

You can also create a color from a css name.

Color.css('rebeccapurple');

See color-space for supported color spaces (it's pretty much all of them).

The format of a color object is as follows.

color {
    space,
    values,
    alpha,
    /* semi-private */ originalColor
}

Converting Colors

color.convert('lab');

The result is a new object, and does not affect the original object. Additionally, the new object will store the original color, meaning unlimited conversions without loss.

assert.deepEqual(
    color.convert('lab').convert('hsl').convert('rgb').convert('xyz').values,
    color.convert('xyz').values
);

Mixing Colors

Accepts the paremeters otherColor, amount = 0.5, mode = 'rgb'. Returns a new color object with the colors mixed according to amount (an amount of 0 gives color1, and 1 gives color2). Specifying a different mode will mix the color via that mode, allowing you to get even color spaces.

color1.mix(color2, 0.5, 'lab');

Color Operations

color1.add(color2);

All operations accept a color as the first and only argument. The available color operations are add, subtract, multiply, divide, screen, overlay, dodge, burn.

All operations are done via RGB.

Extra

color1.toString();     // Gives a string like 'hsl(180, 60, 20)' 
color1.toHex();        // Gives the hex code 
color1.toCss();        // Gives css value if exactly identical, else null 
color1.toClosestCss(); // Gives closest css 

Licence

MIT