color

What is color?

The 'color' npm package is a library for immutable color conversion and manipulation with support for CSS color strings.

What are color's main functionalities?

Color Parsing

Parse a CSS string to create a Color object.

const Color = require('color');
const color = Color('rgb(255, 255, 255)');

Color Manipulation

Manipulate colors by lightening, darkening, saturating, desaturating, etc., and then output as a string in a specified format.

const Color = require('color');
const color = Color('blue');
const lighterColor = color.lighten(0.5).hex();

Color Conversion

Convert colors between different models like RGB, HSL, HEX, etc.

const Color = require('color');
const color = Color('blue');
const rgbString = color.rgb().string();

Other packages similar to color

chroma-js

chroma-js is a powerful library for all kinds of color conversions and color scales. It offers more complex color scale functions and color blending capabilities compared to 'color'.

tinycolor2

tinycolor2 is a small, fast library for color manipulation and conversion in JavaScript. It provides similar functionality to 'color' but with a different API design and additional functions for color analysis.

color-convert

color-convert is a library that handles the conversion between different color models. It is more focused on conversion than manipulation, unlike 'color' which offers both.

README

color

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

browser

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

node

For node with npm:

npm install color

And use with var Color = require("color")

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.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%)

color.saturate(0.5)
color.desaturate(0.5)  // #5CBF54 -> #969696
color.greyscale()    // #5CBF54 -> #969696

color.clearer(0.5)
color.opaquer(0.5)

color.mix(Color("blue"))  // 

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

And more to come...

Propers