Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Color Picker

Color Picker is a form control for choosing a custom color. Use it in theme settings, brand color forms, design editors, chart settings, or any form where users need to pick an exact color value.

Use it for:
  • Choosing a custom color through saturation, hue, and optional opacity controls.
  • Binding color values in Angular forms or with ngModel.
  • Returning color values as hex, rgb, hsl, or hsv.
  • Showing a small color preview with ngs-color-picker-thumbnail.
  • Opening the picker from a thumbnail, button, or form-field suffix with ngsColorPickerTriggerFor.

Do not use Color Picker only to display status color, legend color, decorative swatches, badges, or fixed color choices. For a fixed set of colors, use Color Switcher.

API Reference

Properties for the ngs-color-picker component.

PropTypeDefault
color
The selected color as a string.
string''
disabled
Whether the color picker is disabled.
booleanfalse
asDropdown
Whether the color picker is rendered as a dropdown.
booleantrue
showOpacity
Whether to show the opacity slider.
booleantrue
resultFormat
The format of the color result ('rgb', 'hex', 'hsl', etc.).
ColorPickerResultFormat'rgb'

Events

EventDescriptionOutput type
colorChangeEmitted when the selected color changes.string
rawColorChangeEmitted when the raw color (TinyColor) changes.TinyColor

Properties for the ngsColorPickerTriggerFor directive.

PropTypeDefault
ngsColorPickerTriggerFor
The template reference of the color picker to be triggered.
TemplateRef<any>
position
The position of the color picker popover relative to the trigger.
ColorPickerPosition'below-center'

Events

EventDescriptionOutput type
openedEmitted when the color picker popover is opened.void
closedEmitted when the color picker popover is closed.void

Properties for the ngs-color-picker-thumbnail component.

PropTypeDefault
color
The color to display in the thumbnail.
string''