Click here to Skip to main content
15,035,723 members
Articles / Web Development / HTML
Posted 12 Jul 2006


18 bookmarked

ASP.NET Color Picker

Rate me:
Please Sign up or sign in to vote.
4.17/5 (9 votes)
12 Jul 2006CPOL1 min read
A web control for picking web-safe colors.

Sample Image - ColorPickerNET.gif


On a recent project, I needed an ASP.NET color picker. I created an ASP.NET 2.0 WebControl which renders some HTML, CSS and JavaScript. No external files or libraries need to be included.

Using the Code

Extract the zip file and open the solution in Visual Studio 2005. Run the test page (default.aspx).

The color picker is a table with a lot of cells that have (web-safe) background colors:

colorpickerdiv += "<div id=\"colorpicker\">";
colorpickerdiv += "     <table cellpadding=\"0\" cellspacing=\"0\" " + 
string[] websafecolorlist = {"FFFFFF","CCCCCC","999999","666666","333333", 

int rowcounter = 0;
bool needrowstart = true;
for (int i = 0; i < websafecolorlist.Length; i ++)
    if (needrowstart)
        needrowstart = false;
        colorpickerdiv += "            <tr> ";
    string color = "#" + websafecolorlist[i];
    colorpickerdiv += "                <td style=\"background-color:" + 
                      color + "\"></td>";
    if (rowcounter++ == 16)
        colorpickerdiv += "            </tr>";
        needrowstart = true;
        rowcounter = 0;
colorpickerdiv += "     </table>";
colorpickerdiv += "</div>";

if (!Page.ClientScript.IsClientScriptBlockRegistered("colorpickerdiv"))
                      "colorpickerdiv", colorpickerdiv);

The code above is a bit heavy and can be simplified, but the array of colors makes a nice image together. The table is surrounded by an invisible div. The table will be visible when the following code is fired:

opendialogscript += "    var ActiveColorPicker;\n";
opendialogscript += "    function OpenColorPicker(id)\n";
opendialogscript += "    {\n";
opendialogscript += "        ActiveColorPicker=id; \n";
opendialogscript += "        var colorpickerdiv=document." + 
opendialogscript += "'visible';\n";
opendialogscript += "" + 
opendialogscript += ";\n";
opendialogscript += ";\n";
opendialogscript += "    }\n";

And made invisible when a color has been clicked:

opendialogscript += "    function ColorPickerOnColorClick(e)\n";
opendialogscript += "    {\n";
opendialogscript += "        var td = ( ? : e.srcElement; \n";
opendialogscript += "        var; \n";
opendialogscript += ";\n";
opendialogscript += ";\n";
opendialogscript += "        ActiveColorPicker.value=color;\n";
opendialogscript += "        var colorpickerdiv=document.getElementById('colorpicker');\n";
opendialogscript += "'hidden';\n";
opendialogscript += "    }\n";

The following code is needed to render a clickable rectangle. The ID of the control is rendered with this.UniqueID. To store the color value, I use the value attribute from the textbox.

protected override void Render(HtmlTextWriter output)
    string html = "";
    string onclicker="onclick=\"javascript:OpenColorPicker(" + 
                     this.UniqueID + ");\"";
    html += "<input style=\"background-color:" + 
            SelectedHexValue + ";color:" + SelectedHexValue + 
            ";\" class=\"colorpickerbutton\" " + 
            onclicker + " readonly=\"true\" class=\"lookupmo" + 
            "dalvalue\" type=\"text\" name=\"" + 
            this.UniqueID + "\" value=\"" + 
            SelectedHexValue + "\">";

Retrieving the value after a postback is done in LoadPostData:

public bool LoadPostData(String postDataKey, NameValueCollection values)
    SelectedHexValue = values[this.UniqueID];
    return false;

The color code can be get or set with the SelectedHexValue property. If you need a Color object or RGB int, just add properties that convert the HEX-code.

Label1.Text = ColorPicker1.SelectedHexValue;

Points of Interest

About web controls: LoadPostData is a tricky event. In order for it to fire, you must name one of the HTML controls exactly like the UniqueID of the control!

If you have any comments regarding the code, please feel free to email me at:


  • 2006-07-11: Release 1.0.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
Netherlands Netherlands
Loek van den Ouweland is a freelance Web Developer from The Netherlands.

Comments and Discussions

GeneralGood Work Pin
Nullpro2-Sep-09 22:21
MemberNullpro2-Sep-09 22:21 
GeneralUse within UpdatePanel Pin
Member 390292129-Jun-09 0:04
MemberMember 390292129-Jun-09 0:04 
Generalthis control not working in fire fox Pin
vaibhav kothia21-Jan-09 1:26
Membervaibhav kothia21-Jan-09 1:26 
GeneralGood work Pin
Brij19-Dec-08 2:44
mentorBrij19-Dec-08 2:44 
GeneralRe: Good work Pin
Toverstudio19-Dec-08 2:58
MemberToverstudio19-Dec-08 2:58 
Questioncan u rectify the problem in the following article Pin
harish chepuri6-Sep-08 5:16
Memberharish chepuri6-Sep-08 5:16 
GeneralFix the position in firefox Pin
sudjp29-May-08 0:23
Membersudjp29-May-08 0:23 
GeneralTo Make Compatible with Firefox Pin
Eyezed13-Mar-08 22:34
MemberEyezed13-Mar-08 22:34 
GeneralRe: To Make Compatible with Firefox Pin
Toverstudio19-Dec-08 3:00
MemberToverstudio19-Dec-08 3:00 
QuestionClose the color picker Pin
Bruno Meirelles23-Nov-07 1:39
MemberBruno Meirelles23-Nov-07 1:39 
QuestionControl within datagrid Pin
billfoster26-Sep-07 0:59
Memberbillfoster26-Sep-07 0:59 
GeneralPopup Position when page has scrolled... Pin
jhornb20-Jun-07 10:54
Memberjhornb20-Jun-07 10:54 
Generaltry this Pin
Viper30003-Jun-07 14:36
MemberViper30003-Jun-07 14:36 
QuestionHow To retrieve hexadecimal values? Pin
Ibrahim Dwaikat1-Feb-07 3:11
MemberIbrahim Dwaikat1-Feb-07 3:11 
AnswerRe: How To retrieve hexadecimal values? [modified] Pin
Scott T.9-Feb-07 4:01
MemberScott T.9-Feb-07 4:01 
GeneralRe: How To retrieve hexadecimal values? Pin
Toverstudio25-Feb-07 23:28
MemberToverstudio25-Feb-07 23:28 
GeneralRe: How To retrieve hexadecimal values? Pin
arpitscd13-Mar-07 20:11
Memberarpitscd13-Mar-07 20:11 
GeneralRe: How To retrieve hexadecimal values? Pin
Scott T.14-Mar-07 10:17
MemberScott T.14-Mar-07 10:17 
GeneralRe: How To retrieve hexadecimal values? Pin
arpitscd15-Mar-07 1:29
Memberarpitscd15-Mar-07 1:29 
GeneralRe: How To retrieve hexadecimal values? Pin
Scott T.15-Mar-07 2:29
MemberScott T.15-Mar-07 2:29 
GeneralRe: How To retrieve hexadecimal values? Pin
arpitscd15-Mar-07 3:00
Memberarpitscd15-Mar-07 3:00 
GeneralRe: How To retrieve hexadecimal values? Pin
Scott T.15-Mar-07 4:07
MemberScott T.15-Mar-07 4:07 
GeneralNice! Pin
illiniguy7-Oct-06 8:57
Memberilliniguy7-Oct-06 8:57 
GeneralRe: Nice! Pin
Toverstudio25-Feb-07 23:28
MemberToverstudio25-Feb-07 23:28 
Generalgenerating colors Pin
omar_86622-Jul-06 21:02
Memberomar_86622-Jul-06 21:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.