Click here to Skip to main content
Click here to Skip to main content
Go to top

ASP.NET Color Picker

, 12 Jul 2006
Rate this:
Please Sign up or sign in to vote.
A web control for picking web-safe colors.

Sample Image - ColorPickerNET.gif

Introduction

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\" " + 
                  "onclick=\"javascript:ColorPickerOnColorClick(event);\">";
string[] websafecolorlist = {"FFFFFF","CCCCCC","999999","666666","333333", 
        "000000","FFCC00","FF9900","FF6600","FF3300","FFFFFF",
        "FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","99CC00",
        "FFFFFF","FFFFFF","FFFFFF","FFFFFF","CC9900","FFCC33",
        "FFCC66","FF9966","FF6633","CC3300","FFFFFF","FFFFFF",
        "FFFFFF","FFFFFF","CC0033","CCFF00","CCFF33","333300",
        "666600","999900","CCCC00","FFFF00","CC9933","CC6633",
        "330000","660000","990000","CC0000","FF0000","FF3366",
        "FF0033","99FF00","CCFF66","99CC33","666633","999933",
        "CCCC33","FFFF33","996600","996600","663333","993333",
        "CC3333","FF3333","CC3366","FF6699","FF0066","66FF00",
        "99FF66","66CC33","669900","999966","CCCC66","FFFF66",
        "996633","663300","996666","CC6666","FF6666","990033",
        "CC3399","FF66CC","FF0099","33FF00","66FF33","339900",
        "66CC00","99FF33","CCCC99","FFFF99","CC9966","CC6600",
        "CC9999","FF9999","FF3399","CC0066","990066","FF33CC",
        "FF00CC","00CC00","33CC00","336600","669933","99CC66",
        "CCFF99","FFFFCC","FFCC99","FF9933","FFCCCC","FF99CC",
        "CC6699","993366","660033","CC0099","330033","33CC33",
        "66CC66","00FF00","33FF33","66FF66","99FF99","CCFFCC",
        "FFFFFF","FFFFFF","FFFFFF","CC99CC","996699","993399",
        "990099","663366","660066","006600","336633","009900",
        "339933","669966","99CC99","FFFFFF","FFFFFF","FFFFFF",
        "FFCCFF","FF99FF","FF66FF","FF33FF","FF00FF","CC66CC",
        "CC33CC","003300","00CC33","006633","339966","66CC99",
        "99FFCC","CCFFFF","3399FF","99CCFF","CCCCFF","CC99FF",
        "9966CC","663399","330066","9900CC","CC00CC","00FF33",
        "33FF66","009933","00CC66","33FF99","99FFFF","99CCCC",
        "0066CC","6699CC","9999FF","9999CC","9933FF","6600CC",
        "660099","CC33FF","CC00FF","00FF66","66FF99","33CC66",
        "009966","66FFFF","66CCCC","669999","003366","336699",
        "6666FF","6666CC","666699","330099","9933CC","CC66FF",
        "9900FF","00FF99","66FFCC","33CC99","33FFFF","33CCCC",
        "339999","336666","006699","003399","3333FF","3333CC",
        "333399","333366","6633CC","9966FF","6600FF","00FFCC",
        "33FFCC","00FFFF","00CCCC","009999","006666","003333",
        "3399CC","3366CC","0000FF","0000CC","000099","000066",
        "000033","6633FF","3300FF","00CC99","FFFFFF","FFFFFF",
        "FFFFFF","FFFFFF","0099CC","33CCFF","66CCFF","6699FF",
        "3366FF","0033CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
        "3300CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
        "FFFFFF","00CCFF","0099FF","0066FF","0033FF","FFFFFF",
        "FFFFFF","FFFFFF","FFFFFF","FFFFFF"};

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"))
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
                      "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." + 
                    "getElementById('colorpicker');\n";
opendialogscript += "        colorpickerdiv.style.visibility='visible';\n";
opendialogscript += "        colorpickerdiv.style.left=ActiveColorPicker" + 
                    ".style.left+ActiveColorPicker.style.width;\n";
opendialogscript += "        colorpickerdiv.style.top=window.event.y;\n";
opendialogscript += "        colorpickerdiv.style.left=window.event.x;\n";
opendialogscript += "    }\n";

And made invisible when a color has been clicked:

opendialogscript += "    function ColorPickerOnColorClick(e)\n";
opendialogscript += "    {\n";
opendialogscript += "        var td = (e.target) ? e.target : e.srcElement; \n";
opendialogscript += "        var color=td.style.backgroundColor; \n";
opendialogscript += "        ActiveColorPicker.style.backgroundColor=color;\n";
opendialogscript += "        ActiveColorPicker.style.color=color;\n";
opendialogscript += "        ActiveColorPicker.value=color;\n";
opendialogscript += "        var colorpickerdiv=document.getElementById('colorpicker');\n";
opendialogscript += "        colorpickerdiv.style.visibility='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 + "\">";
    output.Write(html);
}

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: colorpicker@toverstudio.nl.

History

  • 2006-07-11: Release 1.0.

License

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

Share

About the Author

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

Comments and Discussions

 
GeneralGood Work PinmemberNullpro2-Sep-09 22:21 
GeneralUse within UpdatePanel PinmemberMember 390292129-Jun-09 0:04 
Generalthis control not working in fire fox Pinmembervabiahv21-Jan-09 1:26 
GeneralGood work PinmemberBrij19-Dec-08 2:44 
GeneralRe: Good work PinmemberToverstudio19-Dec-08 2:58 
Questioncan u rectify the problem in the following article Pinmemberharish4486-Sep-08 5:16 
GeneralFix the position in firefox Pinmembersudjp29-May-08 0:23 
GeneralTo Make Compatible with Firefox PinmemberEyezed13-Mar-08 22:34 
GeneralRe: To Make Compatible with Firefox PinmemberToverstudio19-Dec-08 3:00 
QuestionClose the color picker PinmemberBruno Meirelles23-Nov-07 1:39 
QuestionControl within datagrid Pinmemberbillfoster26-Sep-07 0:59 
GeneralPopup Position when page has scrolled... Pinmemberjhornb20-Jun-07 10:54 
Generaltry this PinmemberViper30003-Jun-07 14:36 
QuestionHow To retrieve hexadecimal values? PinmemberIbrahim Dwaikat1-Feb-07 3:11 
AnswerRe: How To retrieve hexadecimal values? [modified] PinmemberScott T.9-Feb-07 4:01 
GeneralRe: How To retrieve hexadecimal values? PinmemberToverstudio25-Feb-07 23:28 
GeneralRe: How To retrieve hexadecimal values? Pinmemberarpitcompro13-Mar-07 20:11 
GeneralRe: How To retrieve hexadecimal values? PinmemberScott T.14-Mar-07 10:17 
GeneralRe: How To retrieve hexadecimal values? Pinmemberarpitcompro15-Mar-07 1:29 
GeneralRe: How To retrieve hexadecimal values? PinmemberScott T.15-Mar-07 2:29 
GeneralRe: How To retrieve hexadecimal values? Pinmemberarpitcompro15-Mar-07 3:00 
GeneralRe: How To retrieve hexadecimal values? PinmemberScott T.15-Mar-07 4:07 
GeneralNice! Pinmemberbraham57-Oct-06 8:57 
GeneralRe: Nice! PinmemberToverstudio25-Feb-07 23:28 
Generalgenerating colors Pinmemberomar_86622-Jul-06 21:02 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140921.1 | Last Updated 12 Jul 2006
Article Copyright 2006 by Toverstudio
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid