Skip to content

Latest commit

 

History

History
210 lines (167 loc) · 4.58 KB

README.md

File metadata and controls

210 lines (167 loc) · 4.58 KB
Raw

Kolorz

A Node.js library to convert colors into different color systems.

Install

npm i kolorz

Overview

  Documentation is also provided in Typescript, so Intellisense will give you more information of how to use on VS Code.

Kolorz

kolorz
  hex(color: string): toRGB | toHSL | <HSLMethods>;
  rgb(color: string): toHex | toHSL | <HSLMethods>;
  hsl(color: string): toRGB | toHex | <HSLMethods>;
  css(color: string): toRGB | toHSL | toHex | <HSLMethods>;
  hexa(color: string): toRGBA | toHSLA | <HSLMethods> & alpha();
  rgba(color: string): toHEXA | toHSLA | <HSLMethods> & alpha();
  hsla(color: string): toRGBA | toHEXA | <HSLMethods> & alpha();

  The color parameter is a valid correspondent color pattern with some tolerances:

hex

'#DAD'      // #DDAADD
'A1D'       // #AA11DD
'#C00FEE'   // #C00FEE
'F1A5C0'    // #F1A5C0

hexa

'#FACE'       // #FFAACCEE
'AC1D'        // #AACC11DD
'#BA5EC0DE'   // #BA5EC0DE
'BEAD5BED'    // #BEAD5BED

rgb

'rgb(255, 30, 6)'   // rgb(255, 30, 6)
'(255, 30, 6)'      // rgb(255, 30, 6)
'255, 30, 6'        // rgb(255, 30, 6)
'255,30,6'          // rgb(255, 30, 6)

rgba

'rgba(255, 30, 6, .3)'  // rgba(255, 30, 6, 0.3)
'(255, 30, 6, .3)'      // rgba(255, 30, 6, 0.3)
'255, 30, 6, 1'         // rgba(255, 30, 6, 1)
'255,30,6,.4'           // rgba(255, 30, 6, 0.4)

hsl

'hsl(255, 30, 6)'   // hsl(255, 30%, 6%)
'(315, 30, 6)'      // hsl(315, 30%, 6%)
'25, 30, 6'         // hsl(25, 30%, 6%)
'25,100,6'          // hsl(25, 100%, 6%)

hsla

'hsla(255, 30, 6, .453)'  // hsla(255, 30%, 6%, 0.453)
'(315, 30, 6, .453)'      // hsla(315, 30%, 6%, 0.453)
'25, 30, 6, .453'         // hsla(25, 30%, 6%, 0.453)
'25,100,6,.453'           // hsla(25, 100%, 6%, 0.453)

 

First layer properties

<FirstLayerProperties> 
  toHex: string
  toRGB: string
  toHSL: string
  toHexa: string
  toRGBA: string
  toHSLA: string

 

HSL methods

Hue

  Increase or decrease the hue value of the color pattern.

hue(degree: number): <FirstLayerProperties> | value

  degree - A number between 0 and 360.

Saturation

  Increase or decrease the saturation value of the color pattern.

saturation(percentage: number): <FirstLayerProperties> | value

  percentage - A number between 0 and 1.

Lightness

  Increase or decrease the lightness value of the color pattern.

lightness(percentage: number): <FirstLayerProperties> | value

  percentage - A number between 0 and 1.

 

Alpha

  Increase or decrease the alpha value of the color pattern.

alpha(percentage: number): <FirstLayerProperties> | value

  percentage - A number between 0 and 1.

 

Value

  Returns the color pattern string in the same color system.

value: string

 

Examples

Simple convertion

Hexadecimal to RGB and HSL

const kolorz = require('kolorz');
const color = '#28ee00';

console.log(kolorz.hex(color).toRGB);
// rgb(40, 238, 0)

console.log(kolorz.hex(color).toHSL);
// hsl(110, 100%, 47%)

 

Hexadecimal-alpha to RGBA and HSLA

const kolorz = require('kolorz');
const color = '#28ee0001';

console.log(kolorz.hexa(color).toRGBA);
// rgba(40, 238, 0, 0.004)

console.log(kolorz.hexa(color).toHSLA); 
// hsla(110, 100%, 47%, 0.004)

Adjusting alpha

console.log(kolorz.hexa(color).alpha(.5).toRGBA);
// rgba(40, 240, 0, 0.506)

console.log(kolorz.hexa(color).alpha(.5).toHSLA);
// hsla(110, 100%, 47%, 0.506)

HSL adjusting

saturation

const kolorz = require('kolorz');
const color = '#28ee00ff';

console.log(kolorz.hexa(color).saturation(.5).toRGBA);
// rgba(40, 240, 0, 1)

console.log(kolorz.hexa(color).saturation(.5).toHSLA);
// hsla(110, 100%, 47%, 1)

lightness

console.log(kolorz.hexa(color).lightness(.5).toRGBA);
// rgba(242, 255, 240, 1)

console.log(kolorz.hexa(color).lightness(.5).toHSLA);
// hsla(112, 100%, 97%, 1)

hue

console.log(kolorz.hexa(color).hue(120).toRGBA);
// rgba(0, 40, 240, 1)

console.log(kolorz.hexa(color).hue(120).toHSLA);
// hsla(230, 100%, 47%, 1)

 

Made with ❤️ by me.

Josélio Júnior (Lunatic Fox) - 2022