Inspired by the project of Stoyan Stefanov
bower install easy-color- HEX
- SHORT HEX
- RGB
- RGBA
- HSL
- HSLA
- CMYK
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 ...
// Converta
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 = EasyColorParser.fromRGB(0, 170, 255); // Values
var parser = EasyColorParser.fromRGB([0, 170, 255]); // Array of values
var parser = EasyColorParser.fromRGB({ r: 0, g: 170, b: 255 }); // Object of values
// RGBA
var parser = EasyColorParser.fromRGBA(0, 170, 255, 1); // Values
var parser = EasyColorParser.fromRGBA([0, 170, 255, 1]); // Array of values
var parser = EasyColorParser.fromRGBA({ r: 0, g: 170, b: 255, a: 1 }); // Object of values
// HSL
var parser = EasyColorParser.fromHSL(200, 100, 50); // Values
var parser = EasyColorParser.fromHSL([200, 100, 50]); // Array of values
var parser = EasyColorParser.fromHSL({ h: 200, s: 100, l: 50 }); // Object of values
// HSLA
var parser = EasyColorParser.fromHSLA(200, 100, 50, 1); // Values
var parser = EasyColorParser.fromHSLA([200, 100, 50, 1]); // Array of values
var parser = EasyColorParser.fromHSLA({ h: 200, s: 100, l: 50, a: 1 }); // Object of values
// CMYK
var parser = EasyColorParser.fromCMYK(100, 33, 0, 0); // Values
var parser = EasyColorParser.fromCMYK([100, 33, 0, 0]); // Array of values
var parser = 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)--
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--
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;