Custom Colour Picker

As functional as the colour picker from Microsoft seems to be, I figured that there is always room for improvement. The selcolor.htm file from Microsoft can be completely replaced with my new version. This colour picker dialog box can also be easily included into other Web applications as the parameters that are passed back are not DEC specific.

Download the code

I revamped it, making it more similar to the way Dreamweaver does it, with the following changes:

  • Preview panes are used to display the highlight colour and the selected colour
  • a colour that is manually inputted will display in the preview pane
  • the swatch includes the Web-safe 216 colours in hexadecimal order

I recommend opening the colour picker using the following parameters for optimal use:

var arr = showModalDialog( "selcolor.htm", 
          "", "dialogWidth:380px; dialogHeight:235px; scroll:no;
          status:no; help:no");

I've use showModelDialog because this was for an IE-only application and it more closely matched the functionality of a desktop application.

Enjoy!

Published November 12, 2001 · Updated September 17, 2005
Categorized as MSHTML and DEC
Short URL: https://snook.ca/s/110

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.