Click here to Skip to main content
6,594,088 members and growing! (15,320 online)
Email Password   helpLost your password?
Web Development » ASP.NET » General     Intermediate

ASP.NET Color Picker

By Toverstudio

A web control for picking web safe colors
C#, Javascript, CSS, HTML, Windows, .NET, ASP.NET, Visual Studio, WebForms, Dev
Posted:12 Jul 2006
Views:46,700
Bookmarked:15 times
Unedited contribution
Announcements
Loading...
 
Search    
Advanced Search
Add to IE Search
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
7 votes for this article.
Popularity: 3.76 Rating: 4.44 out of 5

1

2

3
4 votes, 57.1%
4
3 votes, 42.9%
5

Sample Image - ColorPickerNET.gif

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

Using the code

Extract the zipfile and open the solution in Visual Studio 2005. Run the testpage (default.aspx).

The color picker is a table with a lot of cells that have (websafe) 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 make 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=\"lookupmodalvalue\" 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 of 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

About Loek van den Ouweland

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Toverstudio


Member
Loek van den Ouweland is a freelance Web Developer from The Netherlands.
Occupation: Web Developer
Location: Netherlands Netherlands

Other popular ASP.NET articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 25 of 27 (Total in Forum: 27) (Refresh)FirstPrevNext
GeneralGood Work PinmemberNullpro23:21 2 Sep '09  
GeneralUse within UpdatePanel PinmemberMember 39029211:04 29 Jun '09  
Generalthis control not working in fire fox Pinmembervabiahv2:26 21 Jan '09  
GeneralGood work PinmemberBrij3:44 19 Dec '08  
GeneralRe: Good work PinmemberToverstudio3:58 19 Dec '08  
Generalcan u rectify the problem in the following article Pinmemberharish4486:16 6 Sep '08  
GeneralFix the position in firefox Pinmembersudjp1:23 29 May '08  
GeneralTo Make Compatible with Firefox PinmemberEyezed23:34 13 Mar '08  
GeneralRe: To Make Compatible with Firefox PinmemberToverstudio4:00 19 Dec '08  
QuestionClose the color picker PinmemberBruno Meirelles2:39 23 Nov '07  
QuestionControl within datagrid Pinmemberbillfoster1:59 26 Sep '07  
GeneralNice work Pinmembermarwamay0:50 2 Jul '07  
GeneralPopup Position when page has scrolled... Pinmemberjhornb11:54 20 Jun '07  
Generaltry this PinmemberViper300015:36 3 Jun '07  
QuestionHow To retrieve hexadecimal values? PinmemberIbrahim Dwaikat4:11 1 Feb '07  
AnswerRe: How To retrieve hexadecimal values? [modified] PinmemberScott T.5:01 9 Feb '07  
GeneralRe: How To retrieve hexadecimal values? PinmemberToverstudio0:28 26 Feb '07  
GeneralRe: How To retrieve hexadecimal values? Pinmemberarpitcompro21:11 13 Mar '07  
GeneralRe: How To retrieve hexadecimal values? PinmemberScott T.11:17 14 Mar '07  
GeneralRe: How To retrieve hexadecimal values? Pinmemberarpitcompro2:29 15 Mar '07  
GeneralRe: How To retrieve hexadecimal values? PinmemberScott T.3:29 15 Mar '07  
GeneralRe: How To retrieve hexadecimal values? Pinmemberarpitcompro4:00 15 Mar '07  
GeneralRe: How To retrieve hexadecimal values? PinmemberScott T.5:07 15 Mar '07  
GeneralNice! Pinmemberbraham59:57 7 Oct '06  
GeneralRe: Nice! PinmemberToverstudio0:28 26 Feb '07  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 12 Jul 2006
Editor:
Copyright 2006 by Toverstudio
Everything else Copyright © CodeProject, 1999-2009
Web21 | Advertise on the Code Project