3.0.17 • Published 5 months ago

ngx-color-converter v3.0.17

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Welcome to ngx-color-converter!

ngx-color-converter npm version npm.io ngx-color-converter

Convert your color value to different variants. Color is the aspect of things that is caused by differing qualities of light being reflected or emitted by them.


Import

Import the module on your app.module.ts file as follow.

import { NgxColorConverterService, COLOROBJECT } from 'ngx-color-converter';

...

export class YourComponent {

  protected colors = inject(NgxColorConverterService);

  (or)

  constructor(private colors: NgxColorConverterService) {
    let colorObject:COLOROBJECT = this.colors.toColorObject('#000fff');
    console.log(colorObject);

    // Sample Output
    // {
    //   "red": 234,
    //   "green": 155,
    //   "blue": 36,
    //   "hue": 36,
    //   "sat": 0.82,
    //   "lightness": 0.53,
    //   "whiteness": 0.14,
    //   "blackness": 0.08,
    //   "cyan": 0,
    //   "magenta": 0.34,
    //   "yellow": 0.85,
    //   "black": 0.08,
    //   "ncol": "R60",
    //   "opacity": 1,
    //   "valid": true,
    // }
  }

}

Then import the module as follow on imports array

NgxColorConverterModule

Service

import { NgxColorConverterService, COLOROBJECT } from 'ngx-color-converter';

constructor(private colors: NgxColorConverterService) { }

Use reference for logs service in constructor and import it respectively at any component

Methods

You can use below methods as part of service by following

let colorObject:COLOROBJECT = this.colors.toColorObject('#000fff');
color:any - (hex - name - rgb - hsl - hwb - cmyk - ncol)
import { COLOROBJECT } from 'ngx-color-converter';

...

constructor(private colors: NgxColorConverterService) {
  let colorObject:COLOROBJECT = this.colors.toColorObject('#000fff');
  console.log(this.colors.toColorObject('#000fff'));
  console.log(this.colors.toColorObject('crimson'));
  console.log(this.colors.toColorObject('rgb(0,0,0)'));
  console.log(this.colors.toColorObject('hsl(100,2,4)'));
  console.log(this.colors.toColorObject('cymk(1,2,3,4)'));
}

Which will return converted color object.

With these converted values you can play any method given below. Happy Coding <3

MethodArgumentsusage
toColorObject(color)color:any - (hex - name - rgb - hsl - hwb - cmyk - ncol)COLOROBJECT
hslToRgb(hue, sat, light)hue, sat, light
hwbToRgb(hue, white, black)hue, white, black
cmykToRgb(c, m, y, k)c, m, y, k
ncolToRgb(ncol, white, black)ncol, white, black
hueToNcol(hue)hue
ncsToRgb(ncs)ncs
rgbToHsl(r , g , b )r, g, b
rgbToHwb(r , g , b )r, g, b
rgbToCmyk(red , green , blue )red,green,blue
------
toRgbString(red , green , blue )
toRgbaString(red , green , blue , alpha )
toHwbString(hue , whiteness , blackness )
toHwbStringDecimal(hue , whiteness , blackness )
toHwbaString(hue , whiteness , blackness , alpha )
toHslString(hue , sat , lightness )
toHslStringDecimal(hue , sat , lightness )
toHslaString(hue , sat , lightness , alpha )
toCmykString(cyan , magenta , yellow , black )
toCmykStringDecimal(cyan , magenta , yellow , black )
toNcolString(ncol , whiteness , blackness )
toNcolStringDecimal(ncol , whiteness , blackness )
toNcolaString(ncol , whiteness , blackness , alpha )
toHexString(red , green , blue )
toRgb(red , green , blue , alpha )
toHsl(hue , sat , lightness , alpha )
toHwb(hue , whiteness , blackness , alpha )
toCmyk(cyan , magenta , yellow , black , alpha )
toNcol(ncol , whiteness , blackness , alpha )

This are the methods available with ngx-color-converter use it as per your requirement:

Code integration

To use this package as a service npm i ngx-color-converter install this on the root angular project .

Note: Don't forget to run this commend npm i ngx-color-converter on root folder or else it will throw error.



3.0.17

5 months ago

3.0.14

7 months ago

3.0.9

11 months ago

3.0.12

11 months ago

3.0.10

11 months ago

3.0.11

11 months ago

3.0.8

11 months ago

3.0.7

1 year ago

3.0.6

1 year ago

3.0.5

1 year ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.0

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago