JavaScript library for immutable color conversion and manipulation with support for CSS color strings.
constcolor=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 }npm install colorimportColorfrom'color';// string constructorconstcolor=Color('rgb(255, 255, 255)')// { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }constcolor=Color('hsl(194, 53%, 79%)')// { model: 'hsl', color: [ 195, 53, 79 ], valpha: 1 }constcolor=Color('hsl(194, 53%, 79%, 0.5)')// { model: 'hsl', color: [ 195, 53, 79 ], valpha: 0.5 }constcolor=Color('#FF0000')// { model: 'rgb', color: [ 255, 0, 0 ], valpha: 1 }constcolor=Color('#FF000033')// { model: 'rgb', color: [ 255, 0, 0 ], valpha: 0.2 }constcolor=Color('lightblue')// { model: 'rgb', color: [ 173, 216, 230 ], valpha: 1 }constcolor=Color('purple')// { model: 'rgb', color: [ 128, 0, 128 ], valpha: 1 }// rgbconstcolor=Color({r: 255,g: 255,b: 255})// { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }constcolor=Color({r: 255,g: 255,b: 255,alpha: 0.5})// { model: 'rgb', color: [ 255, 255, 255 ], valpha: 0.5 }constcolor=Color.rgb(255,255,255)// { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }constcolor=Color.rgb(255,255,255,0.5)// { model: 'rgb', color: [ 255, 255, 255 ], valpha: 0.5 }constcolor=Color.rgb(0xFF,0x00,0x00,0.5)// { model: 'rgb', color: [ 255, 0, 0 ], valpha: 0.5 }constcolor=Color.rgb([255,255,255])// { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }constcolor=Color.rgb([0xFF,0x00,0x00,0.5])// { model: 'rgb', color: [ 255, 0, 0 ], valpha: 0.5 }// hslconstcolor=Color({h: 194,s: 53,l: 79})// { model: 'hsl', color: [ 195, 53, 79 ], valpha: 1 }constcolor=Color({h: 194,s: 53,l: 79,alpha: 0.5})// { model: 'hsl', color: [ 195, 53, 79 ], valpha: 0.5 }constcolor=Color.hsl(194,53,79)// { model: 'hsl', color: [ 195, 53, 79 ], valpha: 1 }// hsvconstcolor=Color({h: 195,s: 25,v: 99})// { model: 'hsv', color: [ 195, 25, 99 ], valpha: 1 }constcolor=Color({h: 195,s: 25,v: 99,alpha: 0.5})// { model: 'hsv', color: [ 195, 25, 99 ], valpha: 0.5 }constcolor=Color.hsv(195,25,99)// { model: 'hsv', color: [ 195, 25, 99 ], valpha: 1 }constcolor=Color.hsv([195,25,99])// { model: 'hsv', color: [ 195, 25, 99 ], valpha: 1 }// cmykconstcolor=Color({c: 0,m: 100,y: 100,k: 0})// { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 1 }constcolor=Color({c: 0,m: 100,y: 100,k: 0,alpha: 0.5})// { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 0.5 }constcolor=Color.cmyk(0,100,100,0)// { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 1 }constcolor=Color.cmyk(0,100,100,0,0.5)// { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 0.5 }// hwbconstcolor=Color({h: 180,w: 0,b: 0})// { model: 'hwb', color: [ 180, 0, 0 ], valpha: 1 }constcolor=Color.hwb(180,0,0)// { model: 'hwb', color: [ 180, 0, 0 ], valpha: 1 }// lchconstcolor=Color({l: 53,c: 105,h: 40})// { model: 'lch', color: [ 53, 105, 40 ], valpha: 1 }constcolor=Color.lch(53,105,40)// { model: 'lch', color: [ 53, 105, 40 ], valpha: 1 }// labconstcolor=Color({l: 53,a: 80,b: 67})// { model: 'lab', color: [ 53, 80, 67 ], valpha: 1 }constcolor=Color.lab(53,80,67)// { model: 'lab', color: [ 53, 80, 67 ], valpha: 1 }// hcgconstcolor=Color({h: 0,c: 100,g: 0})// { model: 'hcg', color: [ 0, 100, 0 ], valpha: 1 }constcolor=Color.hcg(0,100,0)// { model: 'hcg', color: [ 0, 100, 0 ], valpha: 1 }// ansi16constcolor=Color.ansi16(91)// { model: 'ansi16', color: [ 91 ], valpha: 1 }constcolor=Color.ansi16(91,0.5)// { model: 'ansi16', color: [ 91 ], valpha: 0.5 }// ansi256constcolor=Color.ansi256(196)// { model: 'ansi256', color: [ 196 ], valpha: 1 }constcolor=Color.ansi256(196,0.5)// { model: 'ansi256', color: [ 196 ], valpha: 0.5 }// appleconstcolor=Color.apple(65535,65535,65535)// { model: 'apple', color: [ 65535, 65535, 65535 ], valpha: 1 }constcolor=Color.apple([65535,65535,65535])// { model: 'apple', color: [ 65535, 65535, 65535 ], valpha: 1 }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
color.hsl()Convert a color to a different space (hsl(), cmyk(), etc.).
color.object()// {r: 255, g: 255, b: 255}Get a hash of the color value. Reflects the color's current model (see above).
color.rgb().array()// [255, 255, 255]Get an array of the values with array(). Reflects the color's current model (see above).
color.rgbNumber()// 16777215 (0xffffff)Get the rgb number value.
color.hex()// #ffffffGet the hex value. (NOTE:.hex() does not return alpha values; use .hexa() for an RGBA representation)
color.red()// 255Get the value for an individual channel.
color.hsl().string()// 'hsl(320, 50%, 100%)'Calling .string() with a number rounds the numbers to that decimal place. It defaults to 1.
color.luminosity();// 0.412The WCAG luminosity of the color. 0 is black, 1 is white.
color.contrast(Color("blue"))// 12The WCAG contrast ratio to another color, from 1 (same color) to 21 (contrast b/w white and black).
color.isLight()// truecolor.isDark()// falseGet whether the color is "light" or "dark", useful for deciding text color.
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 -> #969696color.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)// chainingcolor.green(100).grayscale().lighten(0.6)The API was inspired by color-js. Manipulation functions by CSS tools like Sass, LESS, and Stylus.