New ColorPicker control for JavaScript, ASP.NET Web Forms, and ASP.NET MVC

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();

clip_image003

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.

clip_image005

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.

clip_image007

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.

Loading