Skip to content

Latest commit

 

History

History
125 lines (107 loc) · 4.31 KB

README.md

File metadata and controls

125 lines (107 loc) · 4.31 KB
Raw

Build Status npm downloads

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 ...

// 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)

--

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;

Links