color

css-color

css-color is a library for color conversion and manipulation with support for CSS color strings.

var color = Color("#77E4FE");

color.red(120).lighten(.5);

console.log(color.hslString());  // "hsl(192, 99%, 110%)"

Install

node

For node with npm:

npm install color

browser

Download the latest color.js. The Color object is exported.

API

Setters

var color = Color("rgb(255, 255, 255)")

Pass any valid CSS string into Color(), like "#FFFFFF", "#fff", "white", "hsla(360, 100%, 100%, 0.5)"

var color = Color({r: 255, g: 255, b: 255})

You can also pass a hash of color values into Color(), keyed on r or red for example.

var color = Color().rgb(255, 255, 255)

Load in color values with rgb(), hsl(), hsv(),and cmyk(). The arguments can also be an array or hash.

Getters

color.rgb()       // {r: 255, g: 255, b: 255}

Get a hash of the rgb values with rgb(), similarly for hsl(), hsv(), and cmyk()

color.rgbArray()  // [255, 255, 255]

Get an array of the values with rgbArray(), hslArray(), hsvArray(), and cmykArray().

color.red()       // 255

Get the values for individual channels with alpha, red, green, blue, hue, saturation (hsl), saturationv (hsv), lightness, cyan, magenta, yellow, black

color.red(100).alpha(0.6)

Also set the value of any channel.

CSS Strings

color.hslString()  // "hsl(320, 50%, 100%)"

Different CSS String formats for the color are on hexString, rgbString, percentString, hslString, and keyword (undefined if it's not a keyword color). "rgba" and "hsla" are used if the current alpha value of the color isn't 1.

Manipulation

color.greyscale()   // #5CBF54 -> #969696
color.negate()      // rgb(0, 100, 255) -> rgb(255, 155, 0)
color.lighten(0.5)  // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
color.darken(0.5)   // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)

// chaining
color.green(100).greyscale().lighten(0.6)

And more to come...