ColorPicker is an input component to select a color.
import { ColorPickerModule } from 'primeng/colorpicker';
ColorPicker is used as a controlled input with ngModel property.
<p-colorPicker [(ngModel)]="color"></p-colorPicker>
ColorPicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-colorPicker formControlName="color"></p-colorPicker>
</form>
ColorPicker is displayed as a popup by default, add inline property to customize this behavior.
<p-colorPicker [(ngModel)]="color1" [inline]="true"></p-colorPicker>
Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property.
<p-colorPicker [(ngModel)]="color"></p-colorPicker>
<p-colorPicker [(ngModel)]="colorRGB" format="rgb"></p-colorPicker>
<p-colorPicker [(ngModel)]="colorHSB" format="hsb"></p-colorPicker>
When disabled is present, the element cannot be edited and focused.
<p-colorPicker [(ngModel)]="color" [disabled]="true"></p-colorPicker>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-colorpicker | Container element. |
| p-colorpicker-overlay | Container element in overlay mode. |
| p-colorpicker-preview | Preview input in overlay mode. |
| p-colorpicker-panel | Panel element of the colorpicker. |
| p-colorpicker-content | Wrapper that contains color and hue sections. |
| p-colorpicker-color-selector | Color selector container. |
| p-colorpicker-color | Color element. |
| p-colorpicker-color-handle | Handle of the color element. |
| p-colorpicker-hue | Hue slider. |
| p-colorpicker-hue-handle | Handle of the hue slider. |
Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
| Key | Function |
|---|---|
| tab | Moves focus to the color picker button. |
| space | Opens the popup and moves focus to the color slider. |
| Key | Function |
|---|---|
| enter | Selects the color and closes the popup. |
| space | Selects the color and closes the popup. |
| escape | Closes the popup, moves focus to the input. |
| Key | Function |
|---|---|
| arrow keys | Changes color. |
| Key | Function |
|---|---|
| up arrowdown arrow | Changes hue. |
API defines helper props, events and others for the PrimeNG ColorPicker module.
ColorPicker groups a collection of contents in tabs.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onChange | event : ColorPickerChangeEvent | Callback to invoke on value change. | |
| onShow | value : any | Callback to invoke on panel is shown. | |
| onHide | value : any | Callback to invoke on panel is hidden. |
Defines the custom events used by the component's emitters.
Custom change event.