ngx-colors

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)

Usage no npm install needed!

<script type="module">
  import ngxColors from 'https://cdn.skypack.dev/ngx-colors';
</script>

README

ngx-colors

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)

Demo and documentation

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

Preview

example gif

Installation

Npm

npm install @angular/animations

Npm

npm install ngx-colors
Load the ngx-colors module in your app module:
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:
<ngx-colors ngx-colors-trigger [(ngModel)]="color"></ngx-colors>
Or with Reactive Forms:
<form class="example-form">
    <ngx-colors ngx-colors-trigger style="display: inline-block; margin:5px;" [formControl]="colorFormControl"></ngx-colors>
</form>