Click here to Skip to main content
11,637,002 members (69,139 online)
Click here to Skip to main content

Windows Like Choose Color Dialog

, 1 Dec 2005 45.2K 1.3K 32
Rate this:
Please Sign up or sign in to vote.
How to implement a Windows like Choose Color dialog with HTML and JavaScript.


I was searching the internet for some JavaScript source for a Windows like Choose Color dialog (thanks to Google for making my work as a programmer easier) but I couldn't find one. May be I have to improve my search skills Smile | :) . And because I needed it, I had to write it myself Frown | :( This is the solution that I came up with, may be it is not the best, but it works. I have tested it with IE, Mozilla and Netscape, and it seems to work fine! So enjoy it, but be careful, I am not the best programmer in the universe Smile | :) . So let me know if there are any errors!


I used the Windows idea for a color dialog because people are used to that kind of a dialog. So the first thing I did was to find the Hue Sat Lum to RGB conversion method and luckily Microsoft has had published their implementation of it in their website, which at the beginning, I was thinking was not working properly because of the floating point rounding operations, but it turned out that if all the operations are forced to be in integers, everything seems to work quite pretty.

Using the code

There are two files that do the work:

  • color_conv.js - which contains the functionality.
  • color_dialog.htm - which contains the user interface.
  • pix - the folder which contains the slide images.

I hope the code is easy to use. You have to write your own callback function in your HTML which will invoke the ColorDialog.

function OnChangeColor(color,param){
        if(param== ... ){
        }else if(param== ... ){

This function will be called on closing the dialog, and color will contain the value of the color (e.g.: '#ff00ff') that was chosen, and param is the user defined value to identify the call. It can be whatever the user sets when invoking the dialog.

The dialog is called by:



  • color is the color that we set for the dialog to be displayed initially.
  • param is the user parameter returned when we choose the color to identify the call.
  • path is the relative path to color_dialog.htm which represents the user interface of the color dialog.

That's why you should also include the JavaScript file which implements that function.

<script language="javascript" src="color_conv.js"></script>

So enjoy using this code if you understand anything Smile | :)


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

Veselin Tenev
Software Developer (Senior)
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionIt is not work in Google crom Pin
Member 77497308-Jul-13 2:40
memberMember 77497308-Jul-13 2:40 
GeneralRe: It is not work in Google chrome Pin
Veselin Tenev6-Aug-13 0:21
memberVeselin Tenev6-Aug-13 0:21 
QuestionYordan Georgiev Pin
alben4ik7-Feb-10 11:12
memberalben4ik7-Feb-10 11:12 
GeneralAccept button not working on Firefox Pin
nILaRT13-Oct-08 0:11
membernILaRT13-Oct-08 0:11 
GeneralRe: Accept button not working on Firefox Pin
Veselin Tenev13-Oct-08 5:20
memberVeselin Tenev13-Oct-08 5:20 
GeneralRe: Accept button not working on Firefox Pin
nILaRT13-Oct-08 6:30
membernILaRT13-Oct-08 6:30 
GeneralRe: Accept button not working on Firefox Pin
Veselin Tenev13-Oct-08 6:52
memberVeselin Tenev13-Oct-08 6:52 
GeneralRe: Accept button not working on Firefox Pin
nILaRT13-Oct-08 20:57
membernILaRT13-Oct-08 20:57 
GeneraldialogArgument Pin
MostafaHamdy7-Feb-07 1:17
memberMostafaHamdy7-Feb-07 1:17 
GeneralRe: dialogArgument Pin
Veselin Tenev7-Feb-07 23:05
memberVeselin Tenev7-Feb-07 23:05 
GeneralWOW YOU are so Great!! Pin
veronyiu30-Nov-06 17:32
memberveronyiu30-Nov-06 17:32 
GeneralOptimizition session Pin
Yoava33330-Nov-05 5:36
memberYoava33330-Nov-05 5:36 
I hate to break it to you but you have to get in touch with some methods used in JS.
RegExp - Regular expressions is a powerful tool, using predefined patterns you are able to match a string to pattern.
for example your "myParseInt" function could be replaced with a single line:

function myParseInt(iNum){
return /^\d+$/.test(iNum) ? iNum*1 : 0;

a short test discovers that my function is 1250% faster (it's not a type error!).

Window Notation - using the window to call elements such as event is much slower than just dropping it. tests showed that dropping the window is 300% faster!

Literals - every native data type in JS has a literal (except the Date), using is is more efficient, for example using

var a = new Array();

is significantly slower than

var a = [];

in 1500% (the result in this test refer to IE only)

GeneralWow Pin
lothar4229-Nov-05 23:53
memberlothar4229-Nov-05 23:53 
GeneralSuggestion Pin
shaul_ahuva28-Nov-05 1:49
membershaul_ahuva28-Nov-05 1:49 
GeneralUpdate Pin
Veselin Tenev26-Nov-05 9:06
memberVeselin Tenev26-Nov-05 9:06 

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 | Terms of Use | Mobile
Web04 | 2.8.150728.1 | Last Updated 1 Dec 2005
Article Copyright 2005 by Veselin Tenev
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid