JavaScript ColorPicker 0.6

Get the new version at

This colorPicker is a light weight all-rounder (only ~46k incl. all 13 files (gzip compressed ~28.6kB)) that can display and let you choose the entire color palette (~16.78 mil. colors) in 6 different color modes: HSB (HSV / HSL) mode and RGB mode (+3 extra modes in RGB).
This highly customizable and easy to install app comes in 4 different sizes (from 151 x 87 pixels to
405 x 302 pixels) and therefore different feature levels so you can use it for every supposable cause from 'easy choice' to 'professional determination'. That's probably all you'll ever need to let your clients choose the right color.
You'll also find a lot of extra helpers and smart features like contrast-meter, color-difference-meter, value-slider in input fields, web-smart and web-save button, color memories and much more that can help your clients make the right decision. Read about the main features to see all the extras.


Table of contents:

Bookmark and Share

The following screenshots are numbered consecutively in a little graphic in the middle (1 to 11 as red numbers). The explanations below use those numbers as a reference to these pictures.
click here or on image to see it full (real) size.

^ back to top

Main features:

^ back to top

Demo & operating instructions:

Here you can see a demo of the colorPicker 0.7 (see gray box below).
Assuming that you understand a little bit of 24-bit RGB-colors, these instructions will help you to understand how to mix colors and therefore chose them out of ~16.78 million colors.

So, go ahead and click here: (input field has attribute: onclick="colorPicker(this)")

If you want to know how picking colors of an image works: click here

The color comparison is not only about contrast but also about "when viewed by someone having color deficits or when viewed on a black and white screen"... so, sorry for the green, orange, red indicator ;o)
See also : W3C: foreground and background color combinations.
This does not include being compliant to the WCAG 2 AA or WCAG 2 AAA standard.

Get a deeper understanding (in real english ;o) about device-dependent RGB models at: or visit John Dyer's page for some nice tutorials.
There is also a tool that helps understanding at or

^ back to top

Methodes and Attributes:

There are some attributes and methodes available if you called the picker like
'var cP = new colorPicker(this)'

Those attributes can also be set on startup like for example:
onclick = "colorPicker(this, '#c67', false, 'HSB_S', 3, false, true,....)"
in the order of the above attribute list. This way there is no 'init()' needed.

^ back to top

Download (ver. 0.7 beta):

For now you can download the .zip File (~20kB) here.
To install:
<script type="text/javascript" src="colorPicker/colorPicker.js"></script> the head of your document and...
<input onclick="colorPicker(this)" value="#CC0000" />
...somewhere else

You can also use onmouseover instead and use a <div>or something else instead of <input>.
There are still some uneaven parts that have to be recoded,... (as soon as I've time for that ;o)

Be aware that this colorPicker only runs from a server and not local (offline).
If you need it as a stand alone version, just let me know... it's certainly also possible,... although you'll loose the ability to reskin it (but it might even load faster and loose some weight - up to 7k maybe, so it's then only 39k and only 8 files instead of 13).

This colorPicker is still in beta, so please, if you find anything I could change or make better,... please let me know:
Gettin feedback always motivates and make things going. (so you'll benefit from it too ;o)

If you need more (better) instructions than let me also know... then I'll rewrite them.

The new release (version 1.0 0.9) of this colorPicker will be out in (around) November 2010 December 2010. is out now (Dec. 1st) and can be seen as a demo for now until the website is ready!!
The new version will work with 8 (maybe even 6) files only one file and will probably be less than 40kB in sum 30kB.
This program will be new from scratch and includes more, new and faster rendering methodes and a whole new concept of how to use sprites to get all the colors needed for all sizes (see preperation here)
There will be true IE 6 and IE5.5 support and all kinds of fallback systems...
This new version will also contain readable source code with documentation.  
Rewriting for jQuery, YUI, prototype etc. is easily possible because all the browser dependent methodes are seperated in 'standard' functions (like findMousePos, findObjOrigin, addEvent, etc...) that just have to be rewritten as such...
The rendering engine and the other logical elements are browser independent.


Somebody asked me why I didn't write this whole thing in jQuery. It's way smarter/saver to do so...
Well,first of all, if I wrote this app 5 years ago I would probably have used prototype and this app would be 'dead' by now because not too many people tend to use prototype any more (even though I think the jQuery code is not written very optimized and therefore slower (and bigger) than it needed to be...) .
The new versionof colorPicker is mostly written in CSS (?) and therefore off most of the JS-crossbrowser issues (unless IE decides to change their filter declaration again ;o) and the rendering engine just changes classNames of the HTML tags (and that's very save for the long future...). If there could be browser issues, there are enough fallbacks (to the most native) routines included.
This way I wrote a program that can be used by anyone and doesn't need any library if not needed anywhere else but still can be easily adapted for libraries because the cross browser dependent elements are seperated to methodes that are sooo standard and therefore easy to be rewritten.

So, don't be shy to use it as it is (it's very tiny anyhow...) and if there will be an issue with newer browsers,... you can always download an update...

The future updates will only contain more optimizations and reduction of code, not any new functionality. All new functions will be as external plugins that will be loaded automatically.
And there is the second reason why I wrote the colorPicker in native javaScript:
These days I'm specializing in code and rendering optimization. Every little thing that the colorPicker does while rendering is optimized to the most possible (except the kind of variables I'm using, but that's only for convenience and size reduction ;o).
With jQuery I'm alwas dependent on the way they programmed things... and all the overload that comes with every function...
My intention in doing this colorPicker was primarely because I wanted to learn javaScript in all it's facettes, combine grafical skills and CSS with this powerfull language and therefore make it even more powerfull... and I have a lot of fun finding faster and more optimized ways of doing things. (How else could you ever put so much functionality into 29kB of javaScript code ;o)... well, yes, I'm done with the new version... but not ready to release it yet... it still needs some more optimization ;o) ^ back to top

(Possible) future features (maybe):

^ back to top

Usage / Details of (some) features:

Installation: is as easy as including the colorPicker.js as usual in the header of your page (<script type="text/javascript" src="colorPicker/colorPicker.js"></script>)
Usage: and then call it the like, onclick="colorPicker(this)" inline or with any other method..

Customization: you have loads of parameters that you can send to your newly created object, at the time you call it, like onclick="var myCP=new colorPicker(this, cPSubDir, cPHTMLFile, cPCSSFile, cPSize, colorMode, color, slLoGrade, slHiGrade...) or like myCP.cPSubDir = 'mySubDir'; etc... and then start it with myCP.init();
The parameters are for:

RGB mode: these modes use an additional special feature. The right button next to the input fields (see screenshot 10, the button is up) in RGB modes let you turn on/off the true color mode.
In off-mode you can only see the grade of adding that specific color to the others to the left pane (from black=none to e.g. green=full). This way it might be more understandable for 'newbies' how color mixing works.

Separate cursors: the right, vertical slider has 2 separate indicators (or cursors). While dragging, the right one stays where it was before dragging to give a better understanding how fare off the last choice was to the upcoming. These two cursors react also separate to contrast adjustment (see screenshot 7 and 10)
The far right square of the color memories also keeps the last picked color so you can compare it with the current color.

Colors and state memories: the colors you choose can be stored in the nine (black at first startup) squares at the left bottom of your colorPicker. the 10th square shows the picked color after dragging and fills up the memory with the current color if clicked. These colors can then be recalled by clicking on the desired slot (square).
If you choose a color twice or you chose one of the stored colors and want to save it again, a blinking of the equivalent square will indicate that this color already exists and ignores the request. The blinking is also contrast dependent (dark-gray for light colors and light-gray for dark colors).
The memory also keeps the state of the application: size (scaling) and color modes (HSB, RGB and RGB easyMode).

Skin able: This app uses a technique that can separate HTML and CSS from javaScript. This way it is possible to make the whole thing look totally different, so called skin able, by screen designers that have no clue about programming. There are just some rules that have to be obtained, like: don't rename or delete existing class-declarations, ... that was it actually.

Web-save colors: in the screenshots you see the button with an '?' instead of an 'W'. That's because the pictures I used were old. Clicking it changes the colorPicker in a mode that on mouseUp it recalculates the closest web-save color and moves the cursor(s) there.

Files and sizes: this app needs 12 (IE - 13) files (all together approximately 46k):
1 javaScript (~30kB), 1 HTML, 1 CSS for all different scaling sizes, 1 transparent cursor, (1 transparent pixel GIF for IE), 1 icon png for the design and 8 PNGs for displaying wonderful colors (most of them only 1 or 2 pixels wide or high). As mentioned before, there is the HTML file and its CSS that makes designing the UI easier.

^ back to top

Techniques (and what I learned with this project)

Even though programming a colorPicker seems to be the most boring and stupid thing to do, I had my reasons and needs to do this for an other project and while learning different techniques (not only JS) I wanted to combine everything in one.... and here it is. (great thanks to Peter-Paul Koch, the guy who runs this wonderful web-site, for actually teaching me javaScript ;o)
I was (am) pretty new to javaScript and used it very spartanic, most of the time not really knowing and understanding what was going on,... but still somehow working, so I was (kind of) happy with what I got. This experimenting most of the time can also be very frustrating though,... so I decided to do this project and learn javaScript (maybe also because I once failed at a job-interview at a company because of the lack of JS-knowledge).

...details and tutorials will follow...
I've used so many different useful techniques in here that I planned on writing several tutorials for some every day usage. Some techniques might not seem so obviously being needed in other apps,... you would think, but I'll show you some other application areas as well.

The tutorials will be about:

In the future I'll also present some tutorials for:

... so, see you soon ;o)

^ back to top
madeinheaven  branch office Amsterdam