GithubHelp home page GithubHelp logo

adrianbrs / easy-color-parser Goto Github PK

View Code? Open in Web Editor NEW
3.0 2.0 1.0 882 KB

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

Home Page: https://cerbaro.dev/easy-color-parser/

License: MIT License

JavaScript 100.00%
convert-colors hex hsla cmyk color-parser colors rgb rgba color-formats

easy-color-parser's Introduction

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

easy-color-parser's People

Contributors

adrianbrs avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

salomaosnff

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.