---
title: "New ColorPicker control for Web Platforms"
published_at: "2014-12-19T19:19:00+00:00"
modified_at: "2024-11-21T07:51:12+00:00"
url: "https://www.syncfusion.com/blogs/post/new-colorpicker-control-for-javascript-aspnet-webforms-and-aspnet-mvc"
excerpt: "The ColorPicker control is a new component that was introduced in Essential Studio® 2014 Volume 3. It provides a rich visual interface for color selection. End users can either choose a custom color or select colors from a set of..."
taxonomy_category:
  - ".NET"
  - "Company"
taxonomy_post_tag:
  - "ASP.NET"
  - "Essential Studio"
  - "JavaScript"
  - "MVC"
  - "Web Forms"
---

# New ColorPicker control for Web Platforms

[Diljith Harshan](https://www.syncfusion.com/blogs/author/diljithharshan)

![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2018/08/newcolorpicker_ctrl.png)

The ColorPicker control is a new component that was introduced in Essential Studio® 2014 Volume 3. It provides a rich visual interface for color selection. End users can either choose a custom color or select colors from a set of professionally-designed palettes.

You can also select colors in different specifications, such as Red Green Blue Alpha (RGBA) opacity, hue-saturation-value (HSV), and hexadecimal (HEX). The ColorPicker control provides a selection of basic colors, standard presets, custom colors, and color swatches.

#### Standard Model

The ColorPicker control displays a drop-down menu with multiple ways to pick a specific color in a WYSIWYG manner. The selected color is displayed in the drop-down menu. You can also adjust the opacity value and hue value by moving the corresponding sliders.

1. The following code snippet is used to declare a ColorPicker control:

| <input type=”text” id=”colorPicker” /> |
| --- |

2. The following code snippet will render the ColorPicker control:

| <script> jQuery(function ($) { $(“#colorPicker”).ejColorPicker(); |
| --- |


Figure 1: Standard Model

#### Palette Model

The ColorPicker palette model has 12 different palette patterns. Each pattern consists of 50 colors, and 600 colors are available by default.


Figure 2: Palette Model

### Configure Custom Palette

Custom palettes are created by passing either a comma-delimited string of hex values or an array of colors.


Figure 3: Custom Palette

### Configure Recent Color Swatches

The ColorPicker control will keep up to 11 colors in a custom list. If you want to add a color from the picker or palette into a recent color list, then click the add button.


Figure 5: Recent Color Swatches

### Conclusion

The ColorPicker control provides an efficient interface for end users to select colors in web applications. The appearance and functionality can also be customized to meet your requirements.