Color.js

abstract Color management class written in JavaScript

Documentation

This class allows a Color to be created in any format (RGB, hex, decimal, HSL, HSV, CSS, etc), while allowing any component to be manipulated.

• 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);

For example, you can create a color in RGB format, but then modify the lightness, or brightness, or saturation - it need not be converted between formats (although format output is also available).

Component methods include:

• .red()
• .green()
• .blue()
• .hue()
• .saturation()
• .lightness()
• .brightness()
• .hex()
• .decimal()

Component methods signatures are similar to jquery mutators - invoked without arguments, the method functions as a getter, and returns the current value; invoked with an argument, they function as setters, and update that value on the calling instance.

// usage...
var color = new Color('#FF9900');
color.brightness(20);
element.style.backgroundColor = color;
console.log(color.getRGB());
console.log(color.saturation());

The component is equipped to handle the vagaries of the DOM, and should be able to parse any CSS color output automatically.

A number of other convenience methods exist, such as .interpolate, which smoothly blends one color to another, and .bind that links a Color instance with an object (e.g., a DOM element's style property, like background-color or (text) color), so that when the Color instance is mutated, the bound object property will also be updated.

TypeScript support

This library is not a module, so to use it in a TypeScript project, add the following line at the top of the file you want to use it in:

/// <reference path="./path-to-color/Color.ts"/> 

It has been tested to be compatible with all of the following strict compiler options:

--strictNullChecks --noFallthroughCasesInSwitch --noImplicitReturns --noImplicitAny