@xotic750/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 colorUsage
import Color from '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(); // 0xffffffGet the hex value.
color.red(); // 255Get 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.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(); // true
color.isDark(); // falseGet whether the color is "light" or "dark", useful for deciding text color.
Manipulation
Returns a new instance of Color.
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); // 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);