JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 191
  • Score
    100M100P100Q83263F
  • License MIT

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.

Package Exports

  • ngx-color-converter

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-color-converter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Welcome to 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.

Preview demo

This preview was generated with CODESANDBOX

Visit for Live preview

CDN

CDN Link for ngx-color-converter - https://unpkg.com/ngx-color-converter@0.0.3/bundles/ngx-color-converter.umd.js

Import

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

import { NgxColorConverterModule } from "ngx-color-converter";

Then import the module as follow on imports array

NgxColorConverterModule

Using

After importing this library with npm install ngx-color-converter, go to the component which is declared under app.module.ts and integrate as below.

MODULE

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

this.colors.toColorObject(color);

color:any - (hex - name - rgb - hsl - hwb - cmyk - ncol)

this.colors.toColorObject('#000fff'); this.colors.toColorObject('crimson'); this.colors.toColorObject('rgb(0,0,0)'); this.colors.toColorObject('hsl(100,2,4)'); this.colors.toColorObject('cymk(1,2,3,4)');

{
"red": 0,
"green": 15,
"blue": 255,
"hue": 236,
"sat": 1,
"lightness": 0.5,
"whiteness": 0,
"blackness": 0,
"cyan": 1,
"magenta": 0.94,
"yellow": 0,
"black": 0,
"ncol": "C94",
"opacity": 1,
"valid": true
}

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) Returns color object of converted values
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:

Angular version

This library was generated with Angular CLI version 9.1.9.

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.

Author

Thanks in advance

Manojkumar Muthukumar

Coimbatore