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


Color Forge

A simple color system based on the work of

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

See 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('#1234'); // has alpha of ~0.26 
Color.hex('#1223344'); // has alpha of ~0.26 

You can also create a color from a css name.


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

The format of a color object is as follows.

color {
    /* semi-private */ originalColor

Converting Colors


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.


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


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.


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