Angular ColorPicker

Angular ColorPicker is an input component to select a color.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {ColorPickerModule} from 'primeng/colorpicker';

Getting Started

ColorPicker uses ngModel directive to bind a value.

<p-colorPicker [(ngModel)]="color"></p-colorPicker>

export class MyComponent {

    color: string;

}

Formats

Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.

<p-colorPicker [(ngModel)]="color1"></p-colorPicker>
<p-colorPicker [(ngModel)]="color2" format="rgb"></p-colorPicker>
<p-colorPicker [(ngModel)]="color3" format="hsb"></p-colorPicker>

export class MyComponent {

    color1: string;

    color2: any = {
        r: 100, g: 130, b: 150
    };

    color3: any = {
        h: 100, s: 50, b: 50
    };

}

Overlay and Inline

ColorPicker can be displayed as inline or as an overlay (default) using the "inline" property.

<p-colorPicker [(ngModel)]="color1" ></p-colorPicker>
<p-colorPicker [(ngModel)]="color2" [inline]="true"></p-colorPicker>

Model Driven Forms

Colorpicker can be used in a model driven form as well.

<p-colorPicker formControlName="color"></p-colorPicker>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.

<p-colorPicker [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" formControlName="color"></p-colorPicker>

Theming

ColorPicker supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG ColorPicker showcase for demos and documentation.