# Welcome to ngx-color-converter!
[](https://npmjs.org/package/ngx-color-converter)
[](https://badge.fury.io/js/ngx-color-converter)
[](https://www.jsdelivr.com/package/npm/ngx-color-converter)
[](https://snyk.io//advisor/npm-package/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.
---
## [
](https://www.beforepost.com/package/ngx/ngx-color-converter)
## Import
Import the module on your `app.module.ts` file as follow.
```TS
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
```TS
let colorObject:COLOROBJECT = this.colors.toColorObject('#000fff');
```
```TS
color:any - (hex - name - rgb - hsl - hwb - cmyk - ncol)
```
```TS
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
| Method | Arguments | usage |
| ----------------------------------------------------- | -------------------------------------------------------- | ----------- |
| 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.
---
## [](https://www.beforepost.com/package/ngx/ngx-color-converter)
---