ColorPicker

Basic

Open the swatch to choose a color. The preview updates as you make changes.

Inline

Keep the palette visible. Drag across the color area or adjust the labeled sliders.

Formats

HEX uses a six-digit string. RGB and HSB return objects with numeric channels.

{
  "r": 100,
  "g": 102,
  "b": 241
}

{
  "h": 239,
  "s": 59,
  "b": 95
}

Reactive forms

Choose a color or confirm the default with Done. Reset returns the control to its empty state.

Disabled and read-only

Usage and API

import { AvColorPicker, AvColorPickerRGB } from 'avero-ui';
import { FormsModule } from '@angular/forms';

color = '0f766e';
rgb: AvColorPickerRGB = { r: 100, g: 102, b: 241 };

<av-color-picker inputId="brand" label="Brand color"
  [(ngModel)]="color" />

<av-color-picker inputId="palette" label="Palette"
  [(ngModel)]="color" inline />

<av-color-picker inputId="rgb" label="RGB color"
  [(ngModel)]="rgb" format="rgb" />

Import AvColorPicker with FormsModule or ReactiveFormsModule. Provide inputId and label. format accepts hex (default), rgb or hsb. HEX values are emitted without #; writes accept # and three-digit shorthand. RGB channels range from 0 to 255; HSB uses hue 0–360 and saturation/brightness 0–100.

inline keeps the panel visible. Other inputs include disabled, readonly, required, invalid, describedBy, defaultColor and avSize (sm, md, lg). Null or malformed values display an empty swatch; defaultColor only sets the editing palette until a user chooses or confirms a color. Invalid hex text restores the previous color. Use Angular validators for required fields.

onChange emits value and originalEvent for user edits, onShow and onHide report popup visibility. Form writes do not emit onChange. Changes apply immediately; Escape closes without reverting edits. The popup is local to the component; ancestors must allow visible overflow.

Enter or Space opens the popup and focuses Hue. Native sliders support arrows, Home and End; the HEX field supports exact entry. Enter in a field or Done confirms and closes; Escape restores trigger focus and Tab follows normal focus order. Customize hueLabel, saturationLabel, brightnessLabel, hexLabel and closeLabel for localization. The pointer color area has equivalent keyboard controls below it.

Reference: PrimeNG ColorPicker.