Color Switcher

Color Switcher lets users choose one color from a fixed allowed palette. Use it for brand color presets, accent color presets, project colors, category colors, tag colors, tenant branding, and theme playground controls.

Use it for:

Selecting one color from a predefined list of allowed colors.
Binding the selected color with selectedColor and colorChange.
Using the component as an Angular form control with ngModel.
Disabling the color choice when the palette should be visible but not editable.

Do not use Color Switcher for arbitrary custom colors; use Color Picker for that. Do not use it for light, dark, or auto theme mode; use Color Scheme for that. Do not replace it with Segmented or custom buttons when the task is choosing from a fixed color set.

The NgStarter Angular Color Switcher component lets you let users choose one color from a fixed allowed palette. Use for brand color presets, accent color presets, project colors, category colors, tag colors, tenant branding, and theme playground controls. It includes examples for Basic Color Switcher, Custom Palette, Disabled State, and Form Control.

Basic Color Switcher

Use Color Switcher when users must choose one color from a fixed preset palette.

Selected color: #08b0fe

Custom Palette

Pass a custom color list when the product, tenant, project, category, or tag has its own allowed palette.

Selected color:

Disabled State

Disable Color Switcher when the selected preset should be visible but cannot be changed.

Selected color: #08b0fe

Form Control

Use Color Switcher with Angular forms when the selected preset color is part of form state.

Selected color: #4ed7ff