RadColorPicker - Telerik ASP.NET ColorPicker

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


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 90+ 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
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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>

Find Assistance

Help Us Improve

Was this example helpful?