Click here to Skip to main content
13,549,045 members
Click here to Skip to main content
Add your own
alternative version


32 bookmarked
Posted 25 Nov 2005

Windows Like Choose Color Dialog

, 1 Dec 2005
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 :). And because I needed it, I had to write it myself :(. 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 :). 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 :)


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 
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    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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03-2016 | 2.8.180515.1 | Last Updated 1 Dec 2005
Article Copyright 2005 by Veselin Tenev
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid