Description
Pass any valid CSS color string into Color() or a hash of values. Also load in color values with rgb(), hsl(), hsv(), hwb(), and cmyk().
color alternatives and similar libraries
Based on the "Color" category.
Alternatively, view color alternatives based on common mentions on social networks and blogs.
-
nozaki-colors
Another node cli colors module. Done simply and with native syntax. It's ment to make sense to engineers, not script kiddies.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of color or a related project?
README
color
JavaScript library for immutable color conversion and manipulation with support for CSS color strings.
const 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
$ npm install color
Usage
const Color = require('color');
Constructors
const color = Color('rgb(255, 255, 255)')
const color = Color({r: 255, g: 255, b: 255})
const color = Color.rgb(255, 255, 255)
const 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
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() // #ffffff
Get the hex value. (NOTE: .hex() does not return alpha values; use .hexa() for an RGBA representation)
color.red() // 255
Get the value for an individual channel.
CSS Strings
color.hsl().string() // 'hsl(320, 50%, 100%)'
Calling .string() with a number rounds the numbers to that decimal place. It defaults to 1.
Luminosity
color.luminosity(); // 0.412
The WCAG luminosity of the color. 0 is black, 1 is white.
color.contrast(Color("blue")) // 12
The WCAG contrast ratio to another color, from 1 (same color) to 21 (contrast b/w white and black).
color.isLight(); // true
color.isDark(); // false
Get whether the color is "light" or "dark", useful for deciding text color.
Manipulation
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.