New ColorPicker control for Web Platforms | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (225)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (938)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (157)Chart  (139)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (68)Development  (654)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (611)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

New ColorPicker control for Web Platforms

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:


    jQuery(function ($) {



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


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.


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed