colorea v1.0.1

Colorea

English

Install

You can install colorea trough npm

$ npm install --save colorea

Usage

Javascript

const colorea = require('colorea');

• RGB (red, green, blue)

var red = colorea.rgb(255, 0, 0);

console.log(red.html());
// #FF0000

• HSL (hue, saturation, light)

var green = colorea.hsl(120, 100, 50);

console.log(green.array());
// [120, 120, 50]

console.log(green.html());
// #00FF00

• HSV (hue, saturation, value)

var blue = colorea.hsl(2/3, 1, 1);

console.log(blue.array());
// [0,666, 1, 1]
console.log(blue.rgb().array());
// [0, 0, 255]
console.log(blue.hsl().array());
// [240, 100, 50]

• change color

blue.html();  // #0000FF - blue

/**
 * set functions returns this
 */
blue.setHue(1/3).html(); // #00FF00 - green

blue.html(); // #00FF00 - green

blue.h = 1; // set hue to 1(red)

blue.html() // #FF0000 - red

• HTML Color String to RGB Color

  rgb() function can recieve an html string and return and RGB color

var htmlcolor1 = "#00FF00", // green
    htmlcolor2 = "#5D5D5D", // gray
    htmlcolor3 = "#0099FF"; // blue

var rgbcolor1 = rgb(htmlcolor1),
    // rgb(0, 255, 0) - green
    rgbcolor2 = rgb(htmlcolor2),
    // rgb(93, 93, 93) - gray
    rgbcolor3 = rgb(htmlcolor3);
    // rgb(0, 153, 255) - blue

Typescript

import { Color, RGB, HSL, HSV, rgb, hsl, hsv } from 'colorea';

• One type of color

/* Create color of type RGB */
var red: RGB = rgb(255, 0, 0); /* red */

console.log(red.html());
// #FF0000

red = hsl(0, 0, 100)/* white */
/****************************************
 * Error: Type 'HSL' is not assignable to 
 * type 'RGB'.
 */

• Changing type

var blue = colorea.hsl(2/3, 1, 1);

console.log(blue.array());
// [0,666, 1, 1]
console.log(blue.rgb().array());
// [0, 0, 255]
console.log(blue.hsl().array());
// [240, 100, 50]

• Two types of color

var white: HSL | HSV = hsl(0, 0, 100)

white; // hsl(0, 0, 100)

white = white.hsv(); /* Same color in hsv format */

white; // hsv(0, 0, 1)

white = white.rgb();
/****************************************
 * Error: Type 'HSL | HSV' is not assignable to 
 * type 'RGB'.
 */

• change color

var mycolor: HSV = hsv(2/3, 1, 1)

mycolor.html();  // #0000FF - blue

/* 'set' functions returns 'this' */
mycolor
    .setHue(1/3)/* hue = green */
    .html(); // #00FF00 - green

mycolor.html(); // #00FF00 - green

mycolor.h = 1; // set hue to 1(red)

mycolor.html() // #FF0000 - red

• Any type of color

  The class Color is the parent class of class RGB, HSL and HSV

var anycolor: Color = rgb(255, 0, 255) /* purple */

console.log(anycolor.html())
// #FF00FF

anycolor = hsv(2/3, 1, 1) /* blue */

console.log(anycolor.html())
// #0000FF - blue

• HTML Color String to RGB Color

  rgb() function can recieve an html string and return and RGB color

var htmlcolor1: string = "#00FF00", // green
    htmlcolor2: string = "#5D5D5D", // gray
    htmlcolor3: string = "#0099FF"; // blue

var rgbcolor1: RGB = rgb(htmlcolor1),
    // rgb(0, 255, 0) - green
    rgbcolor2: RGB = rgb(htmlcolor2),
    // rgb(93, 93, 93) - gray
    rgbcolor3: RGB = rgb(htmlcolor3);
    // rgb(0, 153, 255) - blue

Español

Instalación

Se puede instalar a traves de npm con el siguiente codigo

$ npm install --save colorea

¿Como se usa?

Javascript

const colorea = require('colorea');

• RGB (rojo, verde, azul)

var rojo = colorea.rgb(255, 0, 0);

console.log(rojo.html());
// #FF0000

• HSL (tono, saturación, brillo)

  El metodo "array" devuelve un array con los 3 valores del color y el metodo "html" un codigo con el color en formato html(#XXYYZZ)

var verde = colorea.hsl(120, 100, 50);

console.log(verde.array());
// [120, 120, 50]

console.log(verde.html());
// #00FF00

• HSV (tono, saturación, valor)

  El metodo "rgb" convierte a formato RGB, "hsl" a HSL y "hsv" a HSV

var azul = colorea.hsl(2/3, 1, 1);

console.log(azul.array());
// [0,666, 1, 1]
console.log(azul.rgb().array());
// [0, 0, 255]
console.log(azul.hsl().array());
// [240, 100, 50]

• Cambiar color

azul.html();  // #0000FF - azul

/**
 * los metodos que empiezan por "set"
 * cambian el valor de la propiedad.
 * setHue(valor) - cambia el valor del 
 * tono
 */
azul.setHue(1/3).html(); // #00FF00 - verde

azul.html(); // #00FF00 - verde

azul.h = 1; // valor de tono = 1(rojo)

azul.html() // #FF0000 - rojo

• Color HTML a RGB

  La funcion rgb() puede convertir un texto que contenga un color html a RGB, la cadena de texto debe tener un 'numeral'(#) y 6 letras o numeros(RRGGBB).

Aunque luego se agregara compatibilidad con cadenas #RGB, #RGBA, #RRGGBBAA

var htmlcolor1 = "#00FF00", // verde
    htmlcolor2 = "#5D5D5D", // gris
    htmlcolor3 = "#0099FF"; // azul

var rgbcolor1 = rgb(htmlcolor1),
    // rgb(0, 255, 0) - verde
    rgbcolor2 = rgb(htmlcolor2),
    // rgb(93, 93, 93) - gris
    rgbcolor3 = rgb(htmlcolor3);
    // rgb(0, 153, 255) - azul

Typescript

import { Color, RGB, HSL, HSV, rgb, hsl, hsv } from 'colorea';

• Un tipo de color

/* Crea un color de tipo RGB */
var rojo: RGB = rgb(255, 0, 0); /* rojo */

console.log(rojo.html());
// #FF0000

rojo = hsl(0, 0, 100)/* blanco */
/****************************************
 * Error: Type 'HSL' is not assignable to 
 * type 'RGB'.
 */

• Cambiando tipo de color

var azul = colorea.hsl(2/3, 1, 1);

console.log(azul.array());
// [0,666, 1, 1]
console.log(azul.rgb().array());
// [0, 0, 255]
console.log(azul.hsl().array());
// [240, 100, 50]

• Dos tipos de color

var white: HSL | HSV = hsl(0, 0, 100)

white; // hsl(0, 0, 100)

white = white.hsv(); /* Mismo color en HSV */

white; // hsv(0, 0, 1)

white = white.rgb();
/****************************************
 * Error: Type 'HSL | HSV' is not assignable to 
 * type 'RGB'.
 */

• Cambiarndo el color

var mycolor: HSV = hsv(2/3, 1, 1)

mycolor.html();  // #0000FF - azul

/**
 * los metodos que empiezan por "set"
 * cambian el valor de la propiedad.
 * setHue(valor) - cambia el valor del 
 * tono
 */
mycolor
    .setHue(1/3)/* hue = verde */
    .html(); // #00FF00 - verde

mycolor.html(); // #00FF00 - verde

mycolor.h = 1; // set hue to 1(rojo)

mycolor.html() // #FF0000 - rojo

• Cualquier tipo de color

  La clase Color es la clase madre de RGB, HSL y HSV

var unColor: Color = rgb(255, 0, 255) /* purple */

console.log(unColor.html())
// #FF00FF

unColor = hsv(2/3, 1, 1) /* azul */

console.log(unColor.html())
// #0000FF - azul

• Color HTML a RGB

  La funcion rgb() puede convertir un texto que contenga un color html a RGB, la cadena de texto debe tener un 'numeral'(#) y 6 letras o numeros(RRGGBB).

Aunque luego se agregara compatibilidad con cadenas #RGB, #RGBA, #RRGGBBAA

var htmlcolor1: string = "#00FF00", // verde
    htmlcolor2: string = "#5D5D5D", // gris
    htmlcolor3: string = "#0099FF"; // azul

var rgbcolor1: RGB = rgb(htmlcolor1),
    // rgb(0, 255, 0) - verde
    rgbcolor2: RGB = rgb(htmlcolor2),
    // rgb(93, 93, 93) - gris
    rgbcolor3: RGB = rgb(htmlcolor3);
    // rgb(0, 153, 255) - azul