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

``shell npm install ngx-colors`

##### Load the ngx-colors module in your app module:

`javascript import { NgxColorsModule } from 'ngx-colors';

@NgModule({ ... imports: [ ... NgxColorsModule ] })`

`Overview and usage`

This library is composed of two parts:

1. 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 2. ngx-colors: This component is a premade button that will display the selected color.

##### Use it in your HTML template with ngModel:

`html ngx-colors-trigger [(ngModel)]="color" >`

You can select just one format:

`html ngx-colors-trigger [(ngModel)]="color" [format] = "'hex'" >`

Or you can choise some formats

`html ngx-colors-trigger [(ngModel)]="color" [formats]="['hex','cmyk']" >`

##### Or with Reactive Forms:

`html


      ngx-colors-trigger
    style="display: inline-block; margin:5px;"
    [formControl]="colorFormControl"
  >

!size
!download