New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms ColorPicker Overview

No Color
  • Demo Configurator

  • Show color palette


  • Palette mode




  • Choose Preset

  • Preview color


  • Show empty color button


  • Show recently used colors


  • Show custom color button in WebPalette


About RadColorPicker for ASP.NET AJAX

Follow your artistic urge and select the right color from the 25 skinnable color palettes coming with Telerik ColorPicker control. A lightweight UI component, yet highly configurable and customizable, RadColorPicker helps you fine tune the HEX or RGB color codes for your web page. Thanks to the underlying ASP.NET AJAX framework the selected color can be immediately reflected on the server.

RadColorPicker and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • 25 Preset Color Palettes
  • Custom Color Palettes
  • Automatic Picker Button
  • NoColor and ColorPreview Elements
  • Configurable Palette Layout
  • Automatic color box sizing
  • Advanced Skinning - The visual appearance of the color palette can be easily customized through skins
More about RadColorPicker for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" PaletteModes="All" CssClass="ColorPickerPreview"
                KeepInScreenBounds="true">
            </telerik:RadColorPicker>
        </div>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList Orientation="Vertical" Label="Show color palette"
                                ID="CheckBoxListShowIcon" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxListShowIcon_SelectedIndexChanged">
                                <asp:ListItem Value="PageLoad" Selected="True">When the page loads</asp:ListItem>
                                <asp:ListItem Value="PickerButton">With a picker button</asp:ListItem>
                            </qsf:RadioButtonList></li>
                        <li>
                            <qsf:CheckBoxList ID="CheckBoxPaletteMode" runat="server" AutoPostBack="true" RepeatDirection="Vertical"
                                OnSelectedIndexChanged="CheckBoxPaletteMode_SelectedIndexChanged" Label="Palette mode">
                                <asp:ListItem Value="WebPalette">WebPalette</asp:ListItem>
                                <asp:ListItem Value="RGBSliders">RGBSliders</asp:ListItem>
                                <asp:ListItem Value="HSB">HSB</asp:ListItem>
                                <asp:ListItem Value="HSV">HSV</asp:ListItem>
                            </qsf:CheckBoxList></li>
                        <li>
                        <h4>Choose Preset</h4>
                            <qsf:ComboBox AutoPostBack="true" ID="ChoosePreset" runat="server" OnSelectedIndexChanged="ChoosePreset_SelectedIndexChanged" Size="Medium">
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Selected="True" Text="Default" Value="Default"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Standard" Value="Standard"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Grayscale" Value="Grayscale"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Web216" Value="Web216"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="ReallyWebSafe" Value="ReallyWebSafe"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Office" Value="Office"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Apex" Value="Apex"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Aspect" Value="Aspect"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Civic" Value="Civic"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Concourse" Value="Concourse"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Equity" Value="Equity"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Flow" Value="Flow"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Foundry" Value="Foundry"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Median" Value="Median"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Metro" Value="Metro"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Module" Value="Module"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Opulent" Value="Opulent"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Oriel" Value="Oriel"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Origin" Value="Origin"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Paper" Value="Paper"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Solstice" Value="Solstice"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Technic" Value="Technic"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Trek" Value="Trek"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Urban" Value="Urban"></telerik:RadComboBoxItem>
                                    <telerik:RadComboBoxItem runat="server" Text="Verve" Value="Verve"></telerik:RadComboBoxItem>
                                </Items>
                                <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonListPreview" runat="server" AutoPostBack="true"
                                Orientation="Horizontal" Label="Preview color"
                                OnSelectedIndexChanged="RadioButtonListPreview_SelectedIndexChanged">
                                <asp:ListItem Value="True" Selected="true">True</asp:ListItem>
                                <asp:ListItem Value="False">False</asp:ListItem>
                            </qsf:RadioButtonList></li>
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonListEmptyColor" runat="server" AutoPostBack="true"
                                Orientation="Horizontal" Label="Show empty color button"
                                OnSelectedIndexChanged="RadioButtonListEmptyColor_SelectedIndexChanged">
                                <asp:ListItem Value="True" Selected="true">True</asp:ListItem>
                                <asp:ListItem Value="False">False</asp:ListItem>
                            </qsf:RadioButtonList></li>
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonListRecentColors" runat="server" AutoPostBack="true"
                                Orientation="Horizontal" Label="Show recently used colors"
                                OnSelectedIndexChanged="RadioButtonListRecentColors_SelectedIndexChanged">
                                <asp:ListItem Value="True">True</asp:ListItem>
                                <asp:ListItem Value="False" Selected="true">False</asp:ListItem>
                            </qsf:RadioButtonList></li>
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonListCustomColor" runat="server" AutoPostBack="true"
                                Orientation="Horizontal" Label="Show custom color button in WebPalette"
                                OnSelectedIndexChanged="RadioButtonListCustomColor_SelectedIndexChanged">
                                <asp:ListItem Value="True">True</asp:ListItem>
                                <asp:ListItem Value="False" Selected="true">False</asp:ListItem>
                            </qsf:RadioButtonList></li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>



    </form>
</body>
</html>

Support & Learning Resources

Find Assistance