JavaScript library for immutable color conversion and manipulation with support for CSS color strings.
Copy var color = Color ( '#7743CE' ) .alpha ( 0.5 ) .lighten ( 0.5 );
console .log ( color .hsl () .string ()); // 'hsla(262, 59%, 81%, 0.5)'
console .log ( color .cmyk () .round () .array ()); // [ 16, 25, 0, 8, 0.5 ]
console .log ( color .ansi256 () .object ()); // { ansi256: 183, alpha: 0.5 }
Install
Usage
Copy var Color = require ( 'color' );
Constructors
Copy var color = Color ( 'rgb(255, 255, 255)' )
var color = Color ({r : 255 , g : 255 , b : 255 })
var color = Color .rgb ( 255 , 255 , 255 )
var color = Color .rgb ([ 255 , 255 , 255 ])
Set the values for individual channels with alpha
, red
, green
, blue
, hue
, saturationl
(hsl), saturationv
(hsv), lightness
, whiteness
, blackness
, cyan
, magenta
, yellow
, black
String constructors are handled by color-string
Getters
Convert a color to a different space (hsl()
, cmyk()
, etc.).
Copy color .object (); // {r: 255, g: 255, b: 255}
Get a hash of the color value. Reflects the color's current model (see above).
Copy color .rgb () .array () // [255, 255, 255]
Get an array of the values with array()
. Reflects the color's current model (see above).
Copy color .rgbNumber () // 16777215 (0xffffff)
Get the rgb number value.
Copy color .hex () // #ffffff
Get the hex value.
Get the value for an individual channel.
CSS Strings
Copy color .hsl () .string () // 'hsl(320, 50%, 100%)'
Calling .string()
with a number rounds the numbers to that decimal place. It defaults to 1.
Luminosity
Copy color .luminosity (); // 0.412
The WCAG luminosity of the color. 0 is black, 1 is white.
Copy color .contrast ( Color ( "blue" )) // 12
The WCAG contrast ratio to another color, from 1 (same color) to 21 (contrast b/w white and black).
Copy color .isLight (); // true
color .isDark (); // false
Get whether the color is "light" or "dark", useful for deciding text color.
Manipulation
Copy color .negate () // rgb(0, 100, 255) -> rgb(255, 155, 0)
color .lighten ( 0.5 ) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
color .lighten ( 0.5 ) // hsl(100, 50%, 0) -> hsl(100, 50%, 0)
color .darken ( 0.5 ) // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
color .darken ( 0.5 ) // hsl(100, 50%, 0) -> hsl(100, 50%, 0)
color .lightness ( 50 ) // hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)
color .saturate ( 0.5 ) // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
color .desaturate ( 0.5 ) // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
color .grayscale () // #5CBF54 -> #969696
color .whiten ( 0.5 ) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color .blacken ( 0.5 ) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
color .fade ( 0.5 ) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color .opaquer ( 0.5 ) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
color .rotate ( 180 ) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
color .rotate ( - 90 ) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
color .mix ( Color ( "yellow" )) // cyan -> rgb(128, 255, 128)
color .mix ( Color ( "yellow" ) , 0.3 ) // cyan -> rgb(77, 255, 179)
// chaining
color .green ( 100 ) .grayscale () .lighten ( 0.6 )
Propers
The API was inspired by color-js . Manipulation functions by CSS tools like Sass, LESS, and Stylus.