Nocturnal Prancing Mosquito

    color
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/color package

    4.2.3 • Public • Published

    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.

      This feature is exclusive to Teams

      Illustration of wombats

      The package file explorer is only available for Teams at the moment.

      We may support exploring this package in the future. Check back soon.

      Install

      npm i color

      DownloadsWeekly Downloads

      15,686,558

      Version

      4.2.3

      License

      MIT

      Unpacked Size

      16.8 kB

      Total Files

      4

      Last publish

      Collaborators

      • qix