ColorPicker

ColorPicker is an input component to select a color.

Import #


import { ColorPickerModule } from 'primeng/colorpicker';

Basic #

ColorPicker is used as a controlled input with ngModel property.


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

Reactive Forms #

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>

Inline #

ColorPicker is displayed as a popup by default, add inline property to customize this behavior.


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

Format #

Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property.

HEX

#6466f1

RGB

r:100 g:102 b:241

HSB

h:239 s:59 b:95


<p-colorPicker [(ngModel)]="color"></p-colorPicker>
<p-colorPicker [(ngModel)]="colorRGB" format="rgb"></p-colorPicker>
<p-colorPicker [(ngModel)]="colorHSB" format="hsb"></p-colorPicker>

Disabled #

When disabled is present, the element cannot be edited and focused.


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

Style #

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.

Accessibility #

Screen Reader

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.

Closed State Keyboard Support of Popup ColorPicker

Key	Function
tab	Moves focus to the color picker button.
space	Opens the popup and moves focus to the color slider.

Popup Keyboard Support

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.

Color Picker Slider

Key	Function
arrow keys	Changes color.

Hue Slider

Key	Function
up arrowdown arrow	Changes hue.

ColorPicker API

API defines helper props, events and others for the PrimeNG ColorPicker module.

ColorPicker #

ColorPicker groups a collection of contents in tabs.

Properties #

Defines the input properties of the component.

name	type	default	description
style	Object	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	"rgb" \| "hex" \| "hsb"	hex	Format to use in value binding.
appendTo	any	null	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
disabled	boolean	false	When present, it specifies that the component should be disabled.
tabindex	string	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the dropdown.
autoZIndex	boolean	true	Whether to automatically manage layering.
baseZIndex	number	0	Base zIndex value to use in layering.
showTransitionOptions	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation.
hideTransitionOptions	string	.1s linear	Transition options of the hide animation.
autofocus	boolean	false	When present, it specifies that the component should automatically get focus on load.

Emitters #

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.

Events #

Defines the custom events used by the component's emitters.

ColorPickerChangeEvent #

Custom change event.

name	type	description
originalEvent	Event	Browser event
value	string \| object	Selected color value.