Source: https://primeng.org/colorpicker

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

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" />

Inline #

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

<p-colorpicker [(ngModel)]="color" [inline]="true" />

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" inputId="cp-hex" />

<p-colorpicker [(ngModel)]="colorRGB" format="rgb" inputId="cp-rgb" />

<p-colorpicker [(ngModel)]="colorHSB" format="hsb" inputId="cp-hsb" />

Forms #

Template Driven

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex flex-col gap-4"> <div class="flex flex-col items-center gap-2"> <p-colorpicker name="color" [(ngModel)]="color" #colorModel="ngModel" required defaultColor="989898" /> @if (colorModel.invalid && (colorModel.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">Color is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

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.

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-col items-center gap-2"> <p-colorpicker formControlName="color" defaultColor="989898" /> @if (isInvalid('color')) { <p-message severity="error" size="small" variant="simple">Color is required.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Disabled #

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

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

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 arrow__down arrow | Changes hue. |

• Import

• Basic

• Inline

• Format

• Forms

  • Template Driven

  • Reactive Forms

• Disabled

• Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek