# 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.
Latest version **3.0.22** (published 2026-05-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install ngx-color-converter
pnpm add ngx-color-converter
yarn add ngx-color-converter
bun add ngx-color-converter
```
## Health
**Score 55/100 (C)** — status: active.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 3.0.22 |
| Published | 2026-05-17 |
| First published | 2021-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 122.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Manojkumar Muthukumar |
| Maintainers | manoj10101996 |
| Keywords | angular, ngx, color, rgb, red, green, blue, cyan, magenta, yellow, black, hue, saturation, lightness, blackness, rgba, hex, ngx-color-converter, color-converter, ncol, hsl, cymk, hsla, hslToRgb, hueToRgb, hwbToRgb, cmykToRgb, ncolToRgb, hueToNcol, ncsToRgb, rgbToHsl, rgbToHwb, rgbToCmyk, manoj10101996, uiconfig, colord, colors, color, colour, color-wheel, picker, color-picker |
## Links
- npm: https://www.npmjs.com/package/ngx-color-converter
- Repository: https://github.com/manoj10101996/ngx-packages
- Homepage: https://www.beforepost.com/package/ngx/ngx-color-converter
- Issues: https://github.com/manoj10101996/ngx-packages/issues
- npm.io page: https://npm.io/package/ngx-color-converter
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.8.1
## Alternatives
- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads
## Recent versions
- 3.0.22 (latest) — 2026-05-17
- 3.0.20 — 2026-05-17
- 3.0.17 — 2025-02-17
- 3.0.14 — 2024-12-01
- 3.0.12 — 2024-08-11
- 3.0.11 — 2024-08-11
- 3.0.10 — 2024-08-11
- 3.0.9 — 2024-08-06
- 3.0.8 — 2024-08-06
- 3.0.7 — 2024-05-13
- 3.0.6 — 2024-04-20
- 3.0.5 — 2024-01-12
- 3.0.4 — 2023-08-24
- 3.0.3 — 2023-08-22
- 3.0.2 — 2023-08-17
- … 20 more at https://npm.io/package/ngx-color-converter/versions
## README
# 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)
---
---
_Source: https://npm.io/package/ngx-color-converter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._