color.js

Version 0.2.1.2

Create and manipulate colors with ease.

Examples

Making violet (#EE82EE):

Color.get("violet")
Color(0xEE82EE)
Color("#EE82EE")
Color("EE82EE")
Color(0xEE, 0x82, 0xEE)
Color("EE", "82", "EE")
Color(238, 130, 238)
Color.rgb(238, 130, 238)
Color.hsl(0.8333333333333334, 0.7605633802816902, 0.7215686274509804)
// 300°, 75.88652482269505%, 72.35294117647058%

Shorthand color notation:

Color("#ABC") // "#AABBCC"
Color("ABC")  // "#AABBCC"

Convert a hex color to RGBA:

var c = new Color('#ABC123', 0.6);
c.getRGBA(); // rgba(171,193,35,0.6)

setValue and channels

var myColor = new Color;
myColor.setValue(0xAA7F00);
myColor.hexTriplet() === "#aa7f00";
myColor.channels[0] = 0xFF;
myColor.hexTriplet() === "#ff7f00"; // orange

Defining a custom color:

Color.define("rind", [92, 163, 16])
Color.get("rind").hexTriplet() === "#5ca310"

Get a random color between green and blue

Color.random("green", "blue");

Parsing CSS color values

red   = Color.parse("rgb(255, 0, 0)");
green = Color.parse("rgb ,128"); // shorthand
blue  = Color.parse("hsl(240, 100%, 50%)");

red.hexTriplet()   === "#ff0000";
green.hexTriplet() === "#008000";
blue.hexTriplet()  === "#0000ff";

Supported Browsers

• Firefox 1+
• Safari 2+
• IE 6+
• Opera 7+
• Google Chrome 0.1+

Usage

color.js can be used in any ECMAScript environment as it does not make use of the DOM. color.js is very useful on the server-side and the client-side.

color.js CSS Module

The color.js CSS module defines all of the standard CSS colors for use in color.js.

API

Note: HSL values are in the form of fractions (0 to 1). A hue value of 0.5 is equivalent to a hue of 180°.

Instantiation

Color objects can be instantiated in any of the following ways:

color = [new ]Color(color:int | string, [, alpha:float])
color = [new ]Color(red:int | string, green:int | string, blue:int | string [, alpha:float | string])
color = Color.rgb(red:int, green:int, blue:int [, alpha:float])
color = Color.hsl(hue:float, saturation:float, lightness:float [, alpha:float])

Instance methods and properties

channels : array

An array containing a color's red, green, blue, and alpha channels in that order.

rgb()

Returns a CSS rgb() function representing the color.

rgba()

Returns a CSS rgba() function representing the color.

hsl()

Returns a CSS hsl() function representing the color.

hsla()

Returns a CSS hsla() function representing the color.

css()

If the alpha channel is 1, this returns hexTriplet(). Otherwise, this returns rgba().

getValue() and valueOf()

Returns an integer representation of the color.

setValue(value:int)

Sets the to value.

hexTriplet()

Returns the hex triplet (#RRGGBB) representation of the color.

rgbData()

Returns an array containing the color's red, green, and blue channels in that order.

hslData()

Returns an array containing the color's hue, saturation, and lightness channels in that order.

toString()

Returns this[Color.TO_STRING_METHOD]().

Constructor methods

Color names are case-insensitive.

Color.define(colorName:string, RGB:array | string)

Saves the specified RGB color under colorName, for later retrieval.

Color.get(colorName:string)

Returns a new color instance instance using the RGB data from a previously defined color with the name, colorName.

Color.del(colorName:string)

Deletes a previously defined color with the name of colorName.

Color.clearColors()

Clears all color definitions.

Color.parse(cssFunction:string)

Returns the color represented by a CSS function (eg. hsl(0, 100%, 50%)) or hex triplet. If no color could be parsed, this returns null. This function intentionally allows invalid syntax when parsing css functions. As long as the first three non-whitespace characters (case-insensitive) are "rgb" or "hsl" and the arguments (which are all optional and default to zero) are separated by commas, this function will be able to parse the CSS function.

Color.random([rangeStart:int | string] [, rangeEnd:int | string])

Returns a random color from rangeStart to rangeEnd. If rangeStart is not specified, this returns a random color from #000000 to #FFFFFF. rangeStart and rangeEnd can also be color names.

Color.rgb(red:int, green:int, blue:int [, alpha:float])

Returns a color constructed from the specified RGB values.

Color.hsl(hue:float, saturation:float, lightness:float [, alpha:float])

Returns a color constructed from the specified HSL values.

Color.RGBtoHSL(rgb:array)

Returns the array of RGB values converted to HSL values.

Color.HSLtoRGB(hsl:array)

Returns the array of HSL values converted to RGB values.

Configuration properties

Color.TO_STRING_METHOD : string

The method name of which to call when a color instance's toString() method is called. This defaults to hexTriplet.