README.md 9.02 KB
Newer Older
nextime's avatar
nextime committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217
[![Build Status](http://jenkins.jquery.com/job/jQuery%20Color/badge/icon)](http://jenkins.jquery.com/job/jQuery%20Color/)

# jQuery Color

## Using jQuery Color in Production
We release jQuery Color by itself, or in a bundle.  The extended names can be inclided as a jQuery Color plugin, or you can download the version of jQuery Color that includes the names.  Choose your build from the following list:

**Current version: 2.1.2**

* jQuery Color [Compressed](http://code.jquery.com/color/jquery.color-2.1.2.min.js) [Uncompressed](http://code.jquery.com/color/jquery.color-2.1.2.js)
* jQuery Color Extended Names [Compressed](http://code.jquery.com/color/jquery.color.svg-names-2.1.2.min.js) [Uncompressed](http://code.jquery.com/color/jquery.color.svg-names-2.1.2.js)
* jQuery Color & Extended Names(previous two combined) [Compressed](http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js) [Uncompressed](http://code.jquery.com/color/jquery.color.plus-names-2.1.2.js)

## How to build and test jQuery Color

First, get a copy of the git repo by running:

```shell
git clone git://github.com/jquery/jquery-color.git
```

Enter the directory and install the node dependencies:

```shell
cd jquery-color && npm install
```

Make sure you have `grunt` installed by testing:

```shell
grunt -version
```

If not, run:

```shell
npm install -g grunt
```

To run tests locally, run `grunt`, and this will run the tests in PhantomJS.

You can also run the tests in a browser by navigating to the `test/` directory, but first run `grunt` to install submodules.

## Animated colors

This plugins installs a [`cssHook`](http://api.jquery.com/jQuery.cssHooks/) which allows jQuery's [`.animate()`](http://api.jquery.com/animate) to animate between two colors.

## Supported properties
`backgroundColor`, `borderBottomColor`, `borderLeftColor`, `borderRightColor`, `borderTopColor`, `color`, `columnRuleColor`, `outlineColor`, `textDecorationColor`, `textEmphasisColor`

## Example use

```html
<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #bada55;
  width: 100px;
  border: 1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="jquery.color.min.js"></script>
</head>
<body>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="block">Hello!</div>
<script>
jQuery("#go").click(function(){
  jQuery("#block").animate({
      backgroundColor: "#abcdef"
  }, 1500 );
});
jQuery("#sat").click(function(){
  jQuery("#block").animate({
      backgroundColor: jQuery.Color({ saturation: 0 })
  }, 1500 );
});
</script>
</body>
</html>
```

## Supporting other properties
The `jQuery.Color.hook()` function can be called to support additional css properties as colors, and allow them to be animated.

## Example use
```javascript
// we want to animate SVG fill and stroke properties
jQuery.Color.hook( "fill stroke" );
```

## The jQuery.Color Factory

The `jQuery.Color()` function allows you to create and manipulate color objects that are accepted by jQuery's `.animate()` and `.css()` functions.

* Returns a new Color object, similar to `jQuery()` or `jQuery.Event`
* Accepts many formats to create a new Color object with a `jQuery.Color.fn` prototype

### Example uses:

```javascript
// Parsing String Colors:
jQuery.Color( "#abcdef" );
jQuery.Color( "rgb(100,200,255)" );
jQuery.Color( "rgba(100,200,255,0.5)" );
jQuery.Color( "aqua" );

// Creating Color Objects in Code:
// use null or undefined for values you wish to leave out
jQuery.Color( red, green, blue, alpha );
jQuery.Color([ red, green, blue, alpha ]);
jQuery.Color({ red: red, green: green, blue: blue, alpha: alpha });
jQuery.Color({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha });

// Helper to get value from CSS
jQuery.Color( element, cssProperty );
```
## jQuery.Color.fn / prototype / the Color Object methods

### Getters / Setters:

```javascript
red()             // returns the "red" component of the color ( Integer from 0 - 255 )
red( val )        // returns a copy of the color object with the red set to val
green()           // returns the "green" component of the color from ( Integer from 0 - 255 )
green( val )      // returns a copy of the color object with the green set to val
blue()            // returns the "blue" component of the color from ( Integer from 0 - 255 )
blue( val )       // returns a copy of the color object with the blue set to val
alpha()           // returns the "alpha" component of the color from ( Float from 0.0 - 1.0 )
alpha( val )      // returns a copy of the color object with the alpha set to val
hue()             // returns the "hue" component of the color ( Integer from 0 - 359 )
hue( val )        // returns a copy of the color object with the hue set to val
saturation()      // returns the "saturation" component of the color ( Float from 0.0 - 1.0 )
saturation( val ) // returns a copy of the color object with the saturation set to val
lightness()       // returns the "lightness" component of the color ( Float from 0.0 - 1.0 )
lightness( val )  // returns a copy of the color object with the lightness set to val
// all of the above values can also take strings in the format of "+=100" or "-=100"

rgba() // returns a rgba "tuple" [ red, green, blue, alpha ]
// rgba() setters: returns a copy of the color with any defined values set to the new value
rgba( red, green, blue, alpha )
rgba({ red: red, green: green, blue: blue, alpha: alpha })
rgba([ red, green, blue, alpha ])

hsla() // returns a HSL tuple [ hue, saturation, lightness, alpha ]
// much like the rgb setter - returns a copy with any defined values set
hsla( hue, saturation, lightness, alpha )
hsla({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha )
hsla([ hue, saturation, lightness, alpha ])
```

### String methods

```javascript
toRgbaString() // returns a css string "rgba(255, 255, 255, 0.4)"
toHslaString() // returns a css string "hsla(330, 75%, 25%, 0.4)"
toHexString( includeAlpha ) // returns a css string "#abcdef", with "includeAlpha" uses "#rrggbbaa" (alpha *= 255)
```

The `toRgbaString` and `toHslaString` methods will only include the alpha channel if it is not `1`. They will return `rgb(...)` and `hsl(...)` strings if the alpha is set to `1`. 
### Working with other colors:

```javascript
transition( othercolor, distance ) // the color distance ( 0.0 - 1.0 ) of the way between this color and othercolor
blend( othercolor ) // Will apply this color on top of the other color using alpha blending
is( othercolor ) // Will determine if this color is equal to all defined properties of othercolor
```

## jQuery.Color properties


## Internals on The Color Object
* Internally, RGBA values are stored as `color._rgba[0] = red, color._rgba[1] = green, color._rgba[2] = blue, color._rgba[3] = alpha`.  However, please remember there are nice convenient setters and getters for each of these properties.
* `undefined`/`null` values for colors indicate non-existence. This signals the `transition()` function to keep whatever value was set in the other end of the transition. For example, animating to `jQuery.Color([ 255, null, null, 1 ])` would only animate the red and alpha values of the color.

### `jQuery.Color.names`

A list of named colors is stored on the `jQuery.Color.names` object.  The value they contain should be parseable by `jQuery.Color()`. All names on this object should be lowercased.  I.E. `jQuery.Color("Red")` is the same as doing `jQuery.Color( jQuery.Color.names["red"] );`

There is also a named color `"_default"` which by default is white, this is used for situations where a color is unparseable.

### `"transparent"`

A special note about the color `"transparent"` - It returns `null` for red green and blue unless you specify colors for these values.

```javascript
jQuery.Color("#abcdef").transition("transparent", 0.5)
```

Animating to or from the value `"transparent"` will still use "#abcdef" for red green and blue.

## HSLA Support

If a color is created using any of the HSLA functions or parsers, it will keep the `_rgba` array up to date as well as having a `_hsla` array.  Once an RGBA operation is performed on HSLA, however, the `_hsla` cache is removed and all operations will continue based off of rgb (unless you go back into HSLA). The `._hsla` array follows the same format as `._rbga`, `[hue, saturation, lightness, alpha ]`.  If you need to build an HSLA color from an HSLA array, `jQuery.Color().hsla( array )` works for that purpose.

**Colors with 0 saturation, or 100%/0% lightness will be stored with a hue of 0**

## Extensibility

It is possible for you to add your own functions to the color object.  For instance, this function will tell you if its better to use black or white on a given background color.


```javascript
// method taken from https://gist.github.com/960189
jQuery.Color.fn.contrastColor = function() {
    var r = this._rgba[0], g = this._rgba[1], b = this._rgba[2];
    return (((r*299)+(g*587)+(b*144))/1000) >= 131.5 ? "black" : "white";
};

// usage examples:
jQuery.Color("#bada55").contrastColor(); // "black"
element.css( "color", jQuery.Color( element, "backgroundColor" ).contrastColor() );
```