JSPM

  • Created
  • Published
  • Downloads 27632830
  • Score
    100M100P100Q226901F

Color conversion and manipulation with CSS string support

Package Exports

  • color

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

color

color is a JavaScript library for color conversion and manipulation with support for CSS color strings.

var color = Color("#7743CE");

color.red(120).lighten(.5);

console.log(color.hslString());  // "hsl(263, 59%, 81%)"
```	

## Install

### browser
Download the latest [color.js](http://github.com/harthur/color/downloads). The `Color` object is exported.

### node
For [node](http://nodejs.org) with [npm](http://npmjs.org):

```bash
npm install color

And use with var Color = require("color")

API

Setters

var color = Color("rgb(255, 255, 255)")

Pass any valid CSS string into Color(), like "#FFFFFF", "#fff", "white", "hsla(360, 100%, 100%, 0.5)"

var color = Color({r: 255, g: 255, b: 255})

You can also pass a hash of color values into Color(), keyed on r or red for example.

var color = Color().rgb(255, 255, 255)

Load in color values with rgb(), hsl(), hsv(),and cmyk(). The arguments can also be an array or hash.

color.red(120)

Set the values for individual channels with alpha, red, green, blue, hue, saturation (hsl), saturationv (hsv), lightness, cyan, magenta, yellow, black

Getters

color.rgb()       // {r: 255, g: 255, b: 255}

Get a hash of the rgb values with rgb(), similarly for hsl(), hsv(), and cmyk()

color.rgbArray()  // [255, 255, 255]

Get an array of the values with rgbArray(), hslArray(), hsvArray(), and cmykArray().

color.red()       // 255

Get the values for individual channels with alpha, red, green, blue, hue, saturation (hsl), saturationv (hsv), lightness, cyan, magenta, yellow, black

CSS Strings

color.hslString()  // "hsl(320, 50%, 100%)"

Different CSS String formats for the color are on hexString, rgbString, percentString, hslString, and keyword (undefined if it's not a keyword color). "rgba" and "hsla" are used if the current alpha value of the color isn't 1.

Manipulation

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.greyscale()      // #5CBF54 -> #969696

color.clearer(0.5)     // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.6)
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%)

// chaining
color.green(100).greyscale().lighten(0.6)

And more to come...

Propers

The API was inspired by color-js. Manipulation functions by CSS tools like Sass, LESS, and Stylus.