Class: Color

Color

Instances of the Color class serve as abstract reprentations of the color itself, and don't need to be transformed from one format to another. A single Color instance can have any component (red, green, blue, hue, saturation, lightness, brightness, alpha) updated regardless of the source. Further, all other components will be normalized automatically. If a Color is instanced using a hex value, it can have it's lightness component updated directly despite lightness being a HSL component. Further, the same color instance can output it's component values in any format without any extra conversions. Conversion methods (getRGB, getHex) are provided just as helpers, and don't perform any actual transformations. They are not required for use or translation. The standard component parts are available as instance methods - passing a value argument to set, and each return the value as well (with or without setter arguments). These components perform transformations and dispatch events, and can be used without any sugar to manage the Color instance. Component methods include: .red() .green() .blue() .hue() .saturation() .lightness() .brightness() .hex() .decimal()

new Color(value)

Color instance - get, update and output a Color between structures.
Parameters:
Name Type Description
value mixed Accepts any valid CSS color value e.g., #FF9900, rgb(255, 153, 0), rgba(100%, 40%, 0%, 0.8); a hash with properties mapped to the Color instance e.g., red, green, saturation, brightness; another Color instance; a numeric color value; a named CSS color
Source:
Example
// instancing...
new Color();
new Color('#FF9900');
new Color(element.style.color);
new Color('pink');
new Color(123456);
new Color({ red : 255, green : 100, blue : 0 });
new Color(colorInstance);
// usage...
var color = new Color('#FF9900');
color.brightness(20);
element.style.backgroundColor = color;
console.log(color.getRGB());
console.log(color.saturation());

Members

output

Sets the format used by the native toString method Color.HEX outputs #FF9900 Color.RGB outputs rgb(255, 153, 0) Color.PRGB outputs rgb(100%, 50%, 0) Color.RGBA outputs rgba(255, 153, 0, 0.5) Color.PRGBA outputs rgba(100%, 50%, 0, 0.5) Color.HSL outputs hsl(360, 100%, 80%) Color.HSLA outputs hsla(360, 100%, 80%, 0.5)
Source:
Example
var color = new Color('#FF9900');
color.format = Color.RGB;
element.style.backgroundColor = color;
element.style.color = color;

Methods

<static> bind(object, property)

[static] Returns a Color instance bound to an object's property, set to the value of the property
Parameters:
Name Type Description
object object Object containing the property to update
property string Name of the property to update
Source:
Returns:
Color
Example
 
var color = Color.bind(someElement.style, 'backgroundColor');

<static> random()

[static] Returns a Color instance of a random color
Source:
Returns:
Color
Example
 
var gray = Color.interpolate('#FFFFFF', '#000000', 0.5);

alpha(value)

Set the opacity value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 1 opacity component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.alpha(0.5);

bind(object, property)

Binds the color to an object's property - whenever the Color is updated, the property will be set to the value of the Color instance's toString method
Parameters:
Name Type Description
object object Object containing the property to update
property string Name of the property to update
Source:
Example
 
var color = new Color('#FF9900');
color.bind(someElement.style, 'backgroundColor');

blue(value)

Set the blue component value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 255 blue component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.blue(125);

brightness(value)

Set the brightness component value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 100 brightness component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.brightness(80);

broadcast(type, params)

Parameters:
Name Type Description
type string Event type to dispatch
params array Array of arguments to pass to listener
Source:
Example
 
var color = new Color();
var handler = function(a, b){
  console.log('a=' + a, 'b=' + b);
});
color.subscribe('arbitraryEvent', handler);
color.broadcast('arbitraryEvent', ['A', 'B']);

clone()

Create a duplicate of this Color instance
Source:
Returns:
Color

copy(color)

Copy values from another Color instance
Parameters:
Name Type Description
color Color Color instance to copy values from
Source:
Returns:
this

decimal(value)

Set the decimal value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 (black) to 16777215 (white) - the decimal value to set
Source:
Returns:
Number
Example
var color = new Color();
color.decimal(123456);

format(string)

Returns a tokenized string from the Color's component values
Parameters:
Name Type Description
string string The string to return, with tokens expressed as %token% that are replaced with component values. Tokens are as follows: r : red g : green b : blue h : hue s : saturation l : lightness v : brightness a : alpha x : hex i : value
Source:
Returns:
String
Example
var color = new Color('#FF9900');
console.log(color.format('red=%r%, green=%g%, blue=%b%));

getHex()

Returns a CSS-formatted hex string [e.g., #FF9900] from the Color's component values
Source:
Returns:
String
Example
var color = new Color();
element.style.backgroundColor = color.getHex();

getHSL()

Returns a CSS-formatted HSL string [e.g., hsl(360, 100%, 100%)] from the Color's component values
Source:
Returns:
String
Example
var color = new Color();
element.style.backgroundColor = color.getHSL();

getHSLA()

Returns a CSS-formatted HSLA string [e.g., hsl(360, 100%, 100%, 0.5)] from the Color's component values
Source:
Returns:
String
Example
var color = new Color();
element.style.backgroundColor = color.getHSLA();

getPRGB()

Returns a CSS-formatted percentile RGB string [e.g., rgb(100%, 50%, 0)] from the Color's component values
Source:
Returns:
String
Example
var color = new Color();
element.style.backgroundColor = color.getPRGB();

getPRGBA()

Returns a CSS-formatted percentile RGBA string [e.g., rgba(100%, 50%, 0%, 0.5)] from the Color's component values
Source:
Returns:
String
Example
var color = new Color();
element.style.backgroundColor = color.getPRGBA();

getRGB()

Returns a CSS-formatted RGB string [e.g., rgb(255, 153, 0)] from the Color's component values
Source:
Returns:
String
Example
var color = new Color();
element.style.backgroundColor = color.getRGB();

getRGBA()

Returns a CSS-formatted RGBA string [e.g., rgba(255, 153, 0, 0.5)] from the Color's component values
Source:
Returns:
String
Example
var color = new Color();
element.style.backgroundColor = color.getRGBA();

green(value)

Set the green component value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 255 green component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.green(125);

hex(value)

Set the hex value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value string Hex value to be set
Source:
Returns:
String
Example
var color = new Color();
color.hex('#FF9900');
color.hex('#CCC');

hue(value)

Set the hue component value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 360 hue component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.hue(280);

interpolate(destination, factor)

sets the invoking Color instance component values to a point between the original value and the destination Color instance component value, multiplied by the factor
Parameters:
Name Type Description
destination Color Color instance to serve as the termination of the interpolation
factor number 0-1, where 0 is the origin Color and 1 is the destination Color, and 0.5 is halfway between. This method will "blend" the colors.
Source:
Returns:
this
Example
var orange = new Color('#FF9900');
var white = new Color('#FFFFFF');
orange.interpolate(white, 0.5);

lightness(value)

Set the lightness component value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 100 lightness component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.lightness(80);

parse(value)

Convert mixed variable to Color component properties, and adopt those properties.
Parameters:
Name Type Description
value mixed Accepts any valid CSS color value e.g., #FF9900, rgb(255, 153, 0), rgba(100%, 40%, 0%, 0.8); a hash with properties mapped to the Color instance e.g., red, green, saturation, brightness; another Color instance; a numeric color value; a named CSS color
Source:
Returns:
this
Example
var color = new Color();
color.parse();
color.parse('#FF9900');
color.parse(element.style.color);
color.parse('pink');
color.parse(123456);
color.parse({ red : 255, green : 100, blue : 0 });
color.parse(colorInstance);

red(value)

Set the red component value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 255 red component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.red(125);

saturation(value)

Set the saturation component value of the color, updates all other components, and dispatches Event.UPDATED
Parameters:
Name Type Description
value number 0 - 100 saturation component value to set
Source:
Returns:
Number
Example
var color = new Color();
color.saturation(280);

set(key, value)

Set a color component value
Parameters:
Name Type Description
key string | object | number Name of the color component to defined, or a hash of key:value pairs, or a single numeric value
value string | number Value of the color component to be set
Source:
Returns:
this
Example
var color = new Color();
color.set('lightness', 100);
color.set({ red : 255, green : 100 });
color.set(123456);

subscribe(type, callback)

Parameters:
Name Type Description
type string Event type to listen for
callback function listener to register to the event
Source:
Example
 
var color = new Color();
color.subscribe(Color.Event.UPDATED, function(){
  alert('this color has been updated');
});
color.red(255);

tween(duration, color)

Blends the color from it's current state to the target Color over the duration
Parameters:
Name Type Description
duration number duration of tween in millisecond
color Color destination color
Source:
Returns:
number
Example
 
var color = new Color('#FF9900');
color.tween(2000, '#FFFFFF');

unsubscribe(type, callback)

Parameters:
Name Type Description
type string Event type to remove the listener from
callback function listener to unregister from the event
Source:
Example
 
var color = new Color();
var handler = function(){
  console.log('this color has been updated');
});
color.subscribe(Color.Event.UPDATED, handler);
color.red(255);
color.unsubscribe(Color.Event.UPDATED, handler);
color.red(0);