https://github.com/moagrius/color

abstract Color management class for JavaScript; discreet component manipulation; output formatting; conversions.
https://github.com/moagrius/color

Last synced: about 1 year ago
JSON representation

abstract Color management class for JavaScript; discreet component manipulation; output formatting; conversions.

• Host: GitHub
• URL: https://github.com/moagrius/color
• Owner: moagrius
• License: mit
• Created: 2011-09-01T23:50:02.000Z (almost 15 years ago)
• Default Branch: master
• Last Pushed: 2019-09-11T18:34:08.000Z (almost 7 years ago)
• Last Synced: 2025-04-13T10:01:07.094Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://moagrius.github.io/Color/Color.html
• Size: 187 KB
• Stars: 21
• Watchers: 2
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
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