Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q3 2011 released 01/05/2012
select

ColorPicker / First Look

No Color
Configuration
Show color palette:

Palette mode:



Preview color:
Show empty color button:
Show recently used colors:
Show custom color button in WebPalette:
Choose Preset:
select

  • Telerik RadColorPicker

    Telerik RadColorPicker is a lightweight UI component that allows users to select colors from the RGB or HEX color spaces using a configurable palette view. The color palettes are skinnable and highly configurable. Thanks to the underlying ASP.NET AJAX framework the selected color can be immediately reflected on the server.

    Key features:
    • 25 Preset Color Palettes - to speed up your work RadColorPicker is shipped with 25 ready-to-use color palettes like Grayscale, Web216, ReallyWebSafe, Office, etc.
    • Custom Color Palettes - you can easily define your custom color palette, as well as combine custom with preset palettes when necessary.
    • Automatic Picker Button - RadColorPicker can render a picker button, which will open the color palette. The picker button will also display the currently selected color. Alternatively, the palette can be always visible or can be evoked using the client-side API.
    • NoColor and ColorPreview Elements - depending on the particular settings, RadColorPicker can display a “No Color” button in the color palette. furthermore, a color preview area can also be enable to display the actual color and its hex code.
    • Configurable Palette Layout - you can define the number of color columns to be displayed in the color palette. Alternatively, those can be configured automatically.
    • Automatic color box sizing - The size of the color boxes in the palette is automatically calculated according to the Columns property to fit the given Width property. The boxes are with equal width and height. By default the size of each color box is 15px/15px
    • Advanced Skinning - The visual appearance of the color palette can be easily customized through skins. You can use one of the predefined skins or create your own.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.Default.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .ColorPickerPreview
            {
                margin-top: 47px;
                margin-left: 100px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All">
        </telerik:RadFormDecorator>
        <table cellspacing="0" cellpadding="0" style="width: 880px; height: 415px; padding-top: 10px;">
            <tr>
                <td style="vertical-align: top;">
                    <telerik:RadColorPicker runat="server" ID="RadColorPicker1" PaletteModes="All" CssClass="ColorPickerPreview" KeepInScreenBounds="true">
                    </telerik:RadColorPicker>
                </td>
                <td style="vertical-align: top; width: 322px;">
                    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Configuration"
                        Expanded="true" Width="300px">
                        <div style="padding: 8px;">
                            <strong>Show color palette:</strong>
    <asp:RadioButtonList RepeatDirection="Vertical" CellPadding="0" CellSpacing="0" CssClass="text"
    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>
                            </asp:RadioButtonList>
                        </div>
                        <div style="padding: 8px;">
                            <strong>Palette mode:</strong>
    <asp:CheckBoxList ID="CheckBoxPaletteMode" runat="server" AutoPostBack="true" RepeatDirection="Vertical"
    CssClass="text" CellPadding="0" CellSpacing="0" OnSelectedIndexChanged="CheckBoxPaletteMode_SelectedIndexChanged">
                                <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>
                            </asp:CheckBoxList>
                        </div>
                        <div style="padding: 8px;">
                            <strong>Preview color:</strong>
    <asp:RadioButtonList ID="RadioButtonListPreview" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListPreview_SelectedIndexChanged">
                                <asp:ListItem Value="True" Selected="true">True</asp:ListItem>
                                <asp:ListItem Value="False">False</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div style="padding: 8px;">
                            <strong>Show empty color button:</strong>
    <asp:RadioButtonList ID="RadioButtonListEmptyColor" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListEmptyColor_SelectedIndexChanged">
                                <asp:ListItem Value="True" Selected="true">True</asp:ListItem>
                                <asp:ListItem Value="False">False</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div style="padding: 8px;">
                            <strong>Show recently used colors:</strong>
    <asp:RadioButtonList ID="RadioButtonListRecentColors" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListRecentColors_SelectedIndexChanged">
                                <asp:ListItem Value="True">True</asp:ListItem>
                                <asp:ListItem Value="False" Selected="true">False</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div style="padding: 8px;">
                            <strong>Show custom color button in WebPalette:</strong>
    <asp:RadioButtonList ID="RadioButtonListCustomColor" runat="server" AutoPostBack="true"
    RepeatDirection="Horizontal" CssClass="text" CellPadding="0" CellSpacing="0"
    OnSelectedIndexChanged="RadioButtonListCustomColor_SelectedIndexChanged">
                                <asp:ListItem Value="True">True</asp:ListItem>
                                <asp:ListItem Value="False" Selected="true">False</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div style="padding: 0 4px 8px 0; font-weight: bold;">
                            <strong>Choose Preset:</strong>
                            <telerik:RadComboBox AutoPostBack="true" ID="ChoosePreset" runat="server" OnSelectedIndexChanged="ChoosePreset_SelectedIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem runat="server" Selected="True" Text="Default" Value="Default" />
                                    <telerik:RadComboBoxItem runat="server" Text="Standard" Value="Standard" />
                                    <telerik:RadComboBoxItem runat="server" Text="Grayscale" Value="Grayscale" />
                                    <telerik:RadComboBoxItem runat="server" Text="Web216" Value="Web216" />
                                    <telerik:RadComboBoxItem runat="server" Text="ReallyWebSafe" Value="ReallyWebSafe" />
                                    <telerik:RadComboBoxItem runat="server" Text="Office" Value="Office" />
                                    <telerik:RadComboBoxItem runat="server" Text="Apex" Value="Apex" />
                                    <telerik:RadComboBoxItem runat="server" Text="Aspect" Value="Aspect" />
                                    <telerik:RadComboBoxItem runat="server" Text="Civic" Value="Civic" />
                                    <telerik:RadComboBoxItem runat="server" Text="Concourse" Value="Concourse" />
                                    <telerik:RadComboBoxItem runat="server" Text="Equity" Value="Equity" />
                                    <telerik:RadComboBoxItem runat="server" Text="Flow" Value="Flow" />
                                    <telerik:RadComboBoxItem runat="server" Text="Foundry" Value="Foundry" />
                                    <telerik:RadComboBoxItem runat="server" Text="Median" Value="Median" />
                                    <telerik:RadComboBoxItem runat="server" Text="Metro" Value="Metro" />
                                    <telerik:RadComboBoxItem runat="server" Text="Module" Value="Module" />
                                    <telerik:RadComboBoxItem runat="server" Text="Opulent" Value="Opulent" />
                                    <telerik:RadComboBoxItem runat="server" Text="Oriel" Value="Oriel" />
                                    <telerik:RadComboBoxItem runat="server" Text="Origin" Value="Origin" />
                                    <telerik:RadComboBoxItem runat="server" Text="Paper" Value="Paper" />
                                    <telerik:RadComboBoxItem runat="server" Text="Solstice" Value="Solstice" />
                                    <telerik:RadComboBoxItem runat="server" Text="Technic" Value="Technic" />
                                    <telerik:RadComboBoxItem runat="server" Text="Trek" Value="Trek" />
                                    <telerik:RadComboBoxItem runat="server" Text="Urban" Value="Urban" />
                                    <telerik:RadComboBoxItem runat="server" Text="Verve" Value="Verve" />
                                </Items>
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </telerik:RadComboBox>
                        </div>
                    </qsf:ConfiguratorPanel>
                </td>
            </tr>
        </table>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="CheckBoxListShowIcon">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" />
                        <telerik:AjaxUpdatedControl ControlID="CheckBoxListShowIcon" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBoxPaletteMode">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" />
                        <telerik:AjaxUpdatedControl ControlID="CheckBoxPaletteMode" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadioButtonListPreview">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButtonListPreview" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadioButtonListEmptyColor">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButtonListEmptyColor" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadioButtonListRecentColors">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButtonListRecentColors" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadioButtonListCustomColor">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButtonListCustomColor" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ChoosePreset">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadColorPicker1" />
                        <telerik:AjaxUpdatedControl ControlID="ChoosePreset" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451