Skip to content
This repository has been archived by the owner on Dec 22, 2023. It is now read-only.

Commit

Permalink
Init some basic transforms
Browse files Browse the repository at this point in the history
  • Loading branch information
dy committed Jun 10, 2015
1 parent 8997e8e commit ab74096
Show file tree
Hide file tree
Showing 9 changed files with 750 additions and 836 deletions.
42 changes: 0 additions & 42 deletions Gruntfile.js

This file was deleted.

21 changes: 0 additions & 21 deletions LICENSE

This file was deleted.

136 changes: 36 additions & 100 deletions README.md
Original file line number Diff line number Diff line change
@@ -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/)
3 changes: 0 additions & 3 deletions browser.js

This file was deleted.

Loading

0 comments on commit ab74096

Please sign in to comment.