EasyColorParser

Converts colors between formats hex, rgb, rgba, hsl, hsla e cmyk.

Inspired by the project of Stoyan Stefanov

Bower install

bower install easy-color

Supported color formats

HEX
SHORT HEX
RGB
RGBA
HSL
HSLA
CMYK

How to use

Create an instance of the constructor by placing the color you want to convert

You can put in any supported format

Example:


// Instance
var parser = new EasyColorParser("#00AAFF"); // You can also add: # 0af, rgb (0, 170, 255), hsl (..., etc ...

// Convert
parser.toHEX();  // Converts to HEX format   (Hexadecimal)
parser.toRGB();  // Converts to RGB format  (Red, Green, Blue)
parser.toRGBA(); // Converts to RGBA format (Red, Green, Blue, Alpha)
parser.toHSL();  // Converts to HSL format  (Hue, Saturation, Lightness)
parser.toHSLA(); // Converts to HSLA format (Hue, Saturation, Lightness, Alpha)
parser.toCMYK(); // Converts to CMYK format (Cyan, Magenta, Yellow, Key)

To convert the values of a color separately use:


// RGB
var parser = new EasyColorParser().fromRGB(0, 170, 255); // Values
var parser = new EasyColorParser().fromRGB([0, 170, 255]); // Array of values
var parser = new EasyColorParser().fromRGB({ r: 0, g: 170, b: 255 }); // Object of values

// RGBA
var parser = new EasyColorParser().fromRGBA(0, 170, 255, 1); // Values
var parser = new EasyColorParser().fromRGBA([0, 170, 255, 1]); // Array of values
var parser = new EasyColorParser().fromRGBA({ r: 0, g: 170, b: 255, a: 1 }); // Object of values

// HSL
var parser = new EasyColorParser().fromHSL(200, 100, 50); // Values
var parser = new EasyColorParser().fromHSL([200, 100, 50]); // Array of values
var parser = new EasyColorParser().fromHSL({ h: 200, s: 100, l: 50 }); // Object of values

// HSLA
var parser = new EasyColorParser().fromHSLA(200, 100, 50, 1); // Values
var parser = new EasyColorParser().fromHSLA([200, 100, 50, 1]); // Array of values
var parser = new EasyColorParser().fromHSLA({ h: 200, s: 100, l: 50, a: 1 }); // Object of values

// CMYK
var parser = new EasyColorParser().fromCMYK(100, 33, 0, 0); // Values
var parser = new EasyColorParser().fromCMYK([100, 33, 0, 0]); // Array of values
var parser = new EasyColorParser().fromCMYK({ c: 100, m: 33, y: 0, k: 0 }); // Object of values

You can also get the name of the color format that you have set to make it easier in some cases

parser.colorType(); // Returns the color format defined

So you can also convert a color to a format from the format name

parser.to("RGBA") // In this case it will return the color value in RGBA format, eg rgba (0, 170, 255, 1)

CSS Color Table

You can pick up the CSS color table used to convert the color name to HEX, eg: white -> #FFFFFF

Read about CSS Color Table

To get the array of this table use:

var table = parser.CSSColorTable;

With this table you can convert colors just by name too

For example:

var parser = new EasyColorParser("aqua"); // Creates the instance from the css color name
parser.toHex(); // #00FFFF

Values

To get the separate values for each format use:

var rgb = parser.rgb,     // Returns an array with the RGB values  ->  {r:Number, g:Number, b:Number}
    hsl = parser.hsl,     // Returns an array with the HSL valuesL ->  {h:Number, s:Number, l:Number}
    cmyk = parser.cmyk,   // Returns an array with the CMYK values ->  ...
    alpha = parser.alpha; // Returns color transparency            ->  1

// RGB
var red = rgb.r;
var green = rgb.g;
var blue = rgb.b;

// HSL
var hue = hsl.h;
var saturation = hsl.s;
var lightness = hsl.l;

// CMYK
var cyan = cmyk.c;
var magenta = cmyk.m;
var yellow = cmyk.y;
var key = cmyk.k;