Skip to content
Permalink
Browse files

Init some basic transforms

  • Loading branch information
dy committed Jun 10, 2015
1 parent 8997e8e commit ab740968e176c5af4ff499fdfa2e10c9d9ec29bb
Showing with 750 additions and 836 deletions.
  1. +0 −42 Gruntfile.js
  2. +0 −21 LICENSE
  3. +36 −100 README.md
  4. +0 −3 browser.js
  5. +420 −463 color.js
  6. +66 −0 index.js
  7. +13 −9 package.json
  8. +215 −0 test.js
  9. +0 −198 test/basic.js

This file was deleted.

21 LICENSE

This file was deleted.

136 README.md
@@ -1,127 +1,63 @@
# color
`color` is a JavaScript library for color conversion and manipulation with support for CSS color strings.
# color2 [![Build Status](https://travis-ci.org/dfcreative/color2.svg?branch=master)](https://travis-ci.org/dfcreative/color2) [![Code Climate](https://codeclimate.com/github/dfcreative/color2/badges/gpa.svg)](https://codeclimate.com/github/dfcreative/color2)

```javascript
var color = Color("#7743CE");
color.alpha(0.5).lighten(0.5);
A stateful implementation of [color](http://npmjs.org/package/color).

console.log(color.hslString()); // "hsla(262, 59%, 81%, 0.5)"
```
Basically:

## Install
* new color spaces
* new manipulation & measurement functions
* better parsing of input values
* increased performance
* normalized API

### browser
Download the latest [color.js](https://github.com/harthur/color/tree/gh-pages). The `Color` object is exported.

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

```bash
npm install color
```

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

## API

### Setters

```javascript
var color = Color("rgb(255, 255, 255)")
var color = Color({r: 255, g: 255, b: 255})
var color = Color().rgb(255, 255, 255)
var color = Color().rgb([255, 255, 255])
```
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()`.

```javascript
color.red(120)
```
Set the values for individual channels with `alpha`, `red`, `green`, `blue`, `hue`, `saturation` (hsl), `saturationv` (hsv), `lightness`, `whiteness`, `blackness`, `cyan`, `magenta`, `yellow`, `black`

### Getters


```javascript
color.rgb() // {r: 255, g: 255, b: 255}
```
Get a hash of the rgb values with `rgb()`, similarly for `hsl()`, `hsv()`, and `cmyk()`

```javascript
color.rgbArray() // [255, 255, 255]
```
Get an array of the values with `rgbArray()`, `hslArray()`, `hsvArray()`, and `cmykArray()`.

```javascript
color.red() // 255
npm install color2
```
Get the value for an individual channel.

### CSS Strings

```javascript
color.hslString() // "hsl(320, 50%, 100%)"
```
var Color = require('color2');
Different CSS String formats for the color are on `hexString`, `rgbString`, `percentString`, `hslString`, `hwbString`, 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`.
var color = new Color("#7743CE");
### Luminosity

```javascript
color.luminosity(); // 0.412
```
The [WCAG luminosity](http://www.w3.org/TR/WCAG20/#relativeluminancedef) of the color. 0 is black, 1 is white.

```javascript
color.contrast(Color("blue")) // 12
```
The [WCAG contrast ratio](http://www.w3.org/TR/WCAG20/#contrast-ratiodef) to another color, from 1 (same color) to 21 (contrast b/w white and black).
color.alpha(0.5).lighten(0.5);
```javascript
color.light(); // true
color.dark(); // false
console.log(color.hslString()); // "hsla(262, 59%, 81%, 0.5)"
```
Get whether the color is "light" or "dark", useful for deciding text color.

### Manipulation

```javascript
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%)
## API

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
### Setters

color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
### Getters

color.clearer(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)
### Measures

color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
color.rotate(-90) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
### Manipulations

color.mix(Color("yellow")) // cyan -> rgb(128, 255, 128)
color.mix(Color("yellow"), 0.3) // cyan -> rgb(77, 255, 179)

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

### Clone

You can can create a copy of an existing color object using `clone()`:
## Why not [color](https://github.com/harthur/color)?
//TODO: remove this

```javascript
color.clone() // -> New color object
```
_Color_ is great for basic color manipulations, but in practice it’s API might be confusing.

And more to come...
* `new Color([0,10,20])` - a natural way to create color from rgb array is not supported.
* `.setSpace()` with no arguments is factually a `.getSpace()`.
* `.setChannel()` with no arguments is factually a `.getChannel()`, but there’s no `.getChannel()` method.
* `.rgb()` can both get and set, but `.rgbArray()` can only get.
* `.rgbString()` - the same as `.rgbArray()`.
* `.mix()` cannot mix in HSL or any other space but rgb, so mixed colors may look unnatural.
* No `.toString`, `.fromString` methods.
* No `.toJSON`, `.fromJSON` methods.
* No `.toArray`, `.fromArray` methods.
* No `Color.parse` and `Color.stringify` methods.
* Quite slow `.clone()`.
* Limited set of spaces.
* Slow due to expensive operations. _Color_ recalculates the whole cache of spaces each time value is updated. Meantime, the common practice for color space conversions is to use XYZ as a basis, so for the most part it is enough to store only rgb/xyz caches.

## Propers

The API was inspired by [color-js](https://github.com/brehaut/color-js). Manipulation functions by CSS tools like Sass, LESS, and Stylus.
[![NPM](https://nodei.co/npm/color2.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/color2/)

This file was deleted.

0 comments on commit ab74096

Please sign in to comment.