color-obj

A Color object to manage those pesky CSS color strings

Color

A Color object to manage those pesky CSS color strings.

Since CSS3 string tags becoming popular, Canvas rendering becoming viable, and SVG joining the embedded workspace, color matching has become increasingly difficult to get right when you start off with hsl, need to transfer to an rgb, but then need to display in hexadecimal in order to properly display it round circle.

Color is similar to the Date object used in JavaScript today, only tailored to CSS3 Colors.

  • UMD for Node, AMD, and global
  • EcmaScript 5 (getters & setters)
  • Supports translating hsl to rgb to hex
  • Automatically premultiplies alpha for RGB hex values
  • Changes when a color is updated
  • Tested on Chrome, Firefox, and Safari

Using the Color operates by creating your color, or editing an existing one.

var myColor = new Color('red');
// 255 
console.log(myColor.red);
// 0 
console.log(myColor.green);
// 0 
console.log(myColor.blue);

After creating your color, you can start changing your colors around.

// Update the dimensions 
myColor.red = 200;
myColor.green = 100;
myColor.blue = 22;

After adjusting your color to the right values (0-255 for rgb), you can translate it back for use with the DOM.

// rgb(200, 100, 22) 
myColor.toRGBString();

If you find yourself using Color and want to make updates:

  1. Use JSHint to stay within the style
  2. Add unit tests for any new features
  3. Test your code before committing
  4. Add or update comments to represent change

This project uses an MIT license. Please refer to the LICENSE file or source code doc block for reference.