Syncfusion AI Assistant

How can I help you?

Style and appearance in Angular Color picker component

26 Feb 20261 minute to read

Customize the ColorPicker appearance by overriding its default CSS styles. The following table lists the CSS classes used to style different ColorPicker elements. Alternatively, create a custom theme using the Theme Studio.

CSS Class Purpose
.e-custom-picker .e-container .e-handler Customizes the color selection handler appearance
.color-picker.e-dropdown-popup ul .e-container Customizes the main ColorPicker container
.color-picker.e-dropdown-popup ul .e-item.e-palette-item Customizes individual palette color tiles
.color-picker.e-dropdown-popup .e-container .e-switch Customizes the mode switcher button
.color-picker.e-dropdown-popup .e-container .e-slider-preview Customizes the slider and color preview area