• Material 3
  • Fluent
  • Fluent2
  • Bootstrap v5
  • Tailwind CSS
  • High Contrast
Mode Selection
Theme Selection
Theme Mode
*Translated by Google Translator.

Example of Default Functionalities in ASP.NET Core Color Picker Control

This sample demonstrates the default functionalities of the color picker/palette with default colors and predefined styles.


Choose a color

The ColorPicker is a user interface to select and adjust color values. This supports various color specifications like RGB (Red Green Blue), HSV (Hue Saturation Value), and Hex codes.

In this sample, the ColorPicker popup contains picker area, slider to adjust hue and opacity value, input textarea, and control buttons.

  • Drag the handle in the Picker area to select your favorite color.
  • You can manually set the color by typing the color values in the input text boxes
  • By clicking the format switching icon at the right side of the input text area, switch between rgb and hsv color value format.
  • By clicking the mode switching icon at the left bottom of the popup, switch between picker and palette type.
  • Using the value property, set the color value to picker and palette initially.

In mobile mode, the popup opens at the center of the viewport.

More information about ColorPicker can be found in this documentation section.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
opens in a new tab