npmpackage.info

ngx-colors

Simple yet elegant Material color picker for Angular

3.6.0

MIT

TypeScript

11.49 kB

2,000,493 2.6

Installations

npm install ngx-colors

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

16.14.2

NPM Version

8.19.2 Score

89.9

Supply Chain

97.1

Quality

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

1

Total

46

Closed

20

Merged

25

Issues

Open

23

Total

79

Closed

56

Releases

v3.5.0

Updated on Mar 08, 2023

v3.3.0

Updated on Jan 30, 2023

v3.1.4

Updated on Sep 22, 2022

v3.1.3

Updated on Sep 18, 2022

v3.0.5

Updated on Mar 24, 2022

v3.0.1

Updated on Feb 09, 2022

View All 6 releases

Contributors

Unable to fetch Contributors

View All 7 Contributors

Languages

TypeScript

HTML

SCSS

JavaScript

TypeScript (67.97%)

HTML (16.06%)

SCSS (13.63%)

JavaScript (2.34%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

KroneCorylus

Download Statistics

Total Downloads

2,000,493

Last Day

643

Last Week

17,856

Last Month

77,223

Last Year

860,010

GitHub Statistics

MIT License

94 Stars

288 Commits

25 Forks

3 Watchers

3 Branches

7 Contributors

Updated on Feb 13, 2025

Bundle Size

56.40 kB

Minified

11.49 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

3.6.0

Package Id

ngx-colors@3.6.0

Unpacked Size

742.63 kB

Size

258.88 kB

File Count

NPM Version

8.19.2

Node Version

16.14.2

Published on

May 12, 2024

Total Downloads

Cumulative downloads

Total Downloads

2,000,493

Last Day

56.1%

643

Compared to previous day

Last Week

-3.6%

17,856

Compared to previous week

Last Month

34.3%

77,223

Compared to previous month

Last Year

56.3%

860,010

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

@angular/common @angular/core @angular/animations @angular/forms

ngx-colors

ngx-colors is a colorpicker component of angular with a material design style, allows users to select a color via text input (hexadecimal, rgba, hsla), choosing a preset color from the palette, or a color picker using the Hue, Lightness, and Alpha sliders.

Demo and documentation

https://ngx-colors.web.app/

Preview

example gif

Installation

Compatibility

Angular	Latest ngx-colors compatible
15	Latest
14	3.1.4
13	3.1.4
12	3.0.5
11	3.0.5
10	3.0.5

Npm

1npm install ngx-colors

Load the ngx-colors module in your app module:

1import { NgxColorsModule } from 'ngx-colors';
2
3@NgModule({
4  ...
5  imports: [
6    ...
7    NgxColorsModule
8  ]
9})

Overview and usage

This library is composed of two parts:

ngx-colors-trigger: This directive can be applied to any html element turning it into a trigger that when clicked will open the color picker
ngx-colors: This component is a premade button that will display the selected color.

Use it in your HTML template with ngModel:

1<ngx-colors 
2  ngx-colors-trigger 
3  [(ngModel)]="color"
4></ngx-colors>

You can select just one format:

1<ngx-colors 
2  ngx-colors-trigger 
3  [(ngModel)]="color"
4  [format] = "'hex'"
5></ngx-colors>

Or you can choise some formats

1<ngx-colors 
2  ngx-colors-trigger 
3  [(ngModel)]="color"
4  [formats]="['hex','cmyk']"
5></ngx-colors>

Or with Reactive Forms:

1<form class="example-form">
2  <ngx-colors
3    ngx-colors-trigger
4    style="display: inline-block; margin:5px;"
5    [formControl]="colorFormControl"
6  ></ngx-colors>
7</form>

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.6

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to ngx-colors

ngx-colors-v

3.6.5

A beautiful color picker for angular that let you choose from a color palette, using sliders (Hue, Lightness, Alpha sliders) or through text input(hex, rgba, hsla)

@kartik181197/ngx-colors

0.0.1

A beautiful color picker for angular that let you choose from a color palette, using sliders (Hue, Lightness, Alpha sliders) or through text input(hex, rgba, hsla)

ngx-pretty-checkbox

18.0.0

Quickly integrate pretty checkbox Components (checkbox, switch, radio button) with Angular

ngx-http-loader

16.0.0

Angular Loader or Spinner. Supports http interceptor, custom loader, complete custom template, title subtitle, colors, font size, filters urls, methods etc.