ColorPicker ColorPicker is an input component to select a color.

Inline

Selected Color: {{color1}}

Overlay

Selected Color: {{color2}}

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

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


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

Properties

Name Type Default Description
style string null Inline style of the component.
styleClass string null Style class of the component.
inline boolean false Whether to display as an overlay or not.
format string hex Format to use in value binding, supported formats are "hex", "rgb" and "hsb".
appendTo any null Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
tabindex number null Index of the element in tabbing order.
disabled boolean false When present, it specifies that the component should be disabled.
inputId string null Identifier of the focus input to match a label defined for the dropdown.

Events

Name Parameters Description
onChange event.originalEvent: Browser event
event.value: Selected color 		Callback to invoke when a color is selected.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-colorpicker Container element.
ui-colorpicker-overlay Container element in overlay mode.
ui-colorpicker-preview Preview input in overlay mode.
ui-colorpicker-panel Panel element of the colorpicker.
ui-colorpicker-content Wrapper that contains color and hue sections.
ui-colorpicker-color-selector Color selector container.
ui-colorpicker-color Color element.
ui-colorpicker-color-handle Handle of the color element.
ui-colorpicker-hue Hue slider.
ui-colorpicker-hue-handle Handle of the hue slider.

Dependencies

None.

 View on GitHub 

<h3 class="first">Inline</h3>
<p-colorPicker [(ngModel)]="color1" inline="true"></p-colorPicker>

<p style="margin-top:.5em">Selected Color: <span style="display:inline-block;width:32px;height:32px;vertical-align:middle" [style.backgroundColor]="color1"></span> {{color1}} </p>    

<h3>Overlay</h3>
<p-colorPicker [(ngModel)]="color2"></p-colorPicker>

<p style="margin-top:.5em">Selected Color: <span [ngStyle]="{'color':color2}">{{color2}}</span></p> 



export class ColorPickerDemo {

    color1: string;
    
    color2: string = '#1976D2';
}