JavaScript ColorPicker 0.9 [one file version]

...have a preview at the new version.. It will be almost the same size, a bit faster and will
support now alpha/HSL/CMYK/CMY/Lab/XYZ/WCAG2/182 different color conversion combinations/etc...
The new version will have a real and clean API, a rich color model and will be way more precise and flexible...

colorBar

This colorPicker is a light weight all-rounder (~ 29kB - only 1 file*; 12.8kB gZiped) that can display and let you choose the entire color palette in HSB and RGB color modes.

This highly customizable, easy to install and speed optimized app comes in 4 different sizes (from 151 x 87 pixels to 407 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 that make life easier.

- Now full support for IE5.5 and IE6 and all other browsers in all document types
- also works in quirksMode in all browsers. (* fallback system adds max. 5 files)

ColorPicker 0.9 for Google Chrome [ColorPicker goes Chromium]:
The new colorPicker as a web developer tool with eye dropper functionality and DOM manipulation tool is now available as a 'Google Chrome Browser Extension'. Read more and download it at the download section or directly at the Google Chrome web shop.

Table of content:

app_3D

colorPicker 0.9 - simple demo

Click inside the input fields to activate the colorPicker.

colorPicker 0.9 - playGround

This is the 'more advanced' demo that also shows the import / export interfaces.
Click on input fields, color patches, the picture to pick a color and import it to the colorPicker, drag the color bars to change values of the color...
Experience the interaction of each others element and the influence to the colorPicker.
If rendering is too slow, disable the 'magique cube' or try the colorPicker at simple demo.

Don't forget that the colorPicker is drag able / re-size able ;o)

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et ...

Drag around color bars or play around with colorPicker

Magique cube [z=red]

Headline color
Text color
Background color
Border color
Go, play with numbers and bars

This demo is done with pure JavaScript and CSS (no Flash, jQuery or canvas,...). It might be a little slow on some computers because there are over 30 elements rendered at the same time!
On Atom - WinXP it's pretty fast though; IE 5.5, 6 & 7 faster than IE8 and FF is surprisingly slow; Chrome, Safari & Opera are fastest.

Try to find the best compromise in rendering speed/method for different browsers:

redering every
Pick color within 
Color:
^ back to top

Download

chrome ColorPicker 0.9
Google Chrome Edition


ColorPicker goes Chromium: The new colorPicker is now available as a 'Google Chrome Browser Extension'. This extension can help you to make quick decisions on color settings on your web page, to check for WCAG 2 compatibility or just to collect colors from your/others' sites to quickly set up your color palettes for developing. With colorPicker Google Chrome Edition you can pick a color or change the color of any element on the current web-page. More info here.

  • colorPicker 0.91 : [source code and gzip version included]
    - fixed some HTML5 and strict mode issue
    - fixed initial value 'undefined' if none in input field
    - Includes now a very simple test.html (inline js demo and injection demo)
    - dual licensed under the MIT or GPL Version 2 licenses.
  • colorPicker 0.9 (one file version, ~29kB) [source code included]
    This version is a complete new program (from scratch, even though it looks the same) with a new and faster rendering engine, new features, etc...
     
    - fast rendering engine
    - faster import/export interfaces
    - reducing image amount down to 5 files (incl. transparent cursor and GUI grafics)
    - optimized download by putting all into one file (all images, cursor, HTML and CSS)
    - now complete support for IE5.5 and IE6 and all other browsers even in quirksMode
    - rock solid fallback system for browsers that don't support some techniques
      (adds max. 5 additional files (@IE5.5 and some IE6) to download, others use 1 MHT file)
    - new 'live'-resizing of colorPicker for better experience and handling
    - webSave/webSmart and original color values can now be restored.
    - right slider now with 3 image- layers in RGB mode (v0.7 had 64/128 DIV elements)
  • colorPicker 0.7 (~43kB incl. 12 files)
    This is the GNU License version
    See old webPage to read about usage and setup...
     
    - Reduced the amount of images by using sprites
    - Optimized some code for better performance
    - fixed some minor bugs
  • colorPicker 0.6 (~55kB incl. 16 files)
    This version is no longer available. It is fully replaced by the optimized version 0.7
If you find this tool worth it and it helps your needs
I'd kindly ask you for a little donation to maintain this project.
 

If you have questions, recommendation or just some words about my colorPicker don't be shy to write me some words at: colorPicker@dematte.at

Getting feedback is always nice and keeps the effort going ;o)

^ back to top

Usage & interfaces

The writeable attributes can also be set as arguments of the function in the following order:

Methods you can use for manipulation:

Be careful if you render things by your own and not let colorPicker.exportColor do this job. You should let everything that displays on the screen (even changing values in input fields, ...) been done by that function, otherwise the rendering starts stuttering in slower browsers. If you still decide to render things by your own, you might want to set colorPicker.rSpeed to zero.

You have also access to the following readable attributes:

^ back to top

History / techniques and some answers to FAQ

In this paragraph I'll talk about:

How it all started

In spring 2010 I decided to (seriously) learn javaScript because I was pretty new to javaScript and used it in a very limited way, 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).

Now I'm specialized in optimizing code in size and efficiency and including and developing (maybe) unusual but efficient techniques to develop high end, efficient applications for the web.

In this project, which was my first serious javaScript project, I could include many different techniques and therefore had a wide variety of things to solve. The best way to gain a lot of knowledge at once.
Great thanks to Peter-Paul Koch who runs a fabulous web-page and also a brilliant book 'ppk on JavaScript' about javaScript for intermediate beginners and how the back cover says 'Whether you're an old-school scripter who needs to modernize your JavaScript skills or a standards-aware Web developer in search of best practices...' I learned javaScript in very little time.
Some more books and the Web made me get very deep into optimization and professionalizing javaScript applications and learning barely known techniques.
I released the colorPicker (version 0.5) for the first time in late Spring of 2010. Later on I tried to optimize the code, the images,... until I decided, while I had a lot of other projects running that taught me even more techniques and programming styles, to start it all over...
So now (Fall 2010) I'm presenting the new version 0.9 of the colorPicker. It will stay in this 0.x kind of beta state until it's seriously tested by all the programmers who are using it already in their applications.

Some techniques I used

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 test on quirksmode.org/dom/classchange.html I offered above is not quite correct...
In the script on line 88 and 89 (in the HTML) you'll see:
x[i].style.backgroundColor = '#00cc00';
x[i].style.fontSize = '120%';

these are 2 accesses to the DOM which is not quite fair compared to the one access with the className change, where both instructions are in one declaration. This test can only be a 'true' comparison test if you have only one access when using 'style' in the script like:
x[i].style.cssText = 'background-color:#00cc00; font-size:120%';
But most browsers, except FireFox, are still faster with className changes (IE doesn't quite care...).
 
Firefox is slow with colorPicker because it takes it forever to change/find the values of inputFields, no matter if it's styled or not (HEX.value = '#FFFFFF' takes very long!!!). If I take out the part of code where it fills all the inputs... then it's 3 times faster (33ms / 11ms) even if I unset the styling.
So speeding up for FF would mean, storing the values somewhere else and only refresh values if different from last time updated, or get rid of inputFields, use DIVs instead and change data...

By the way: if someone of you understands the URI-images / MHT thing:
It's actually also possible to place the MHT file just on top of the javaScript file and make the path straight to it self (the javaScript file) to stick with one file. The only thing you might have problems with ... the server configuration. If IE gets the JS and doesn't except it as MHT... it doesn't work.
(I send even IE to get this file because IE8 can read base64 images off the CSS but not the cursor File,...but it does recognize it from the MHT-file. bummer).
I decided not to do so because I could never expect someone to setup the sever settings to make it run.

For compressing my code I'm using 'yuicompressor' first and then the 'packer'. This combination makes code even smaller (although I think 49kB for the source code is not big either ;o)
The 'yuicompressor' just minifies the code and responds with excelent hints for your code...
For compressing to gZip I only use 'yuicompressor', not the 'packer'. gZip is way better and packer is for this purpose just obstructive.

Displaying the colors is based on layers of color-images (backgroundImage) and setting opacity of the layers above (in most modes) or changing the backgroundColor. If I only programmed for modern browsers I would have needed only 1 layer on the right side for HSB mode and 1 for the left side in HSB_B mode, 2 for HSB_S and HSB_H that would have made it faster in rendering. To stay compatible with older browsers (especially IE) I used 3 layers on both sides (whereas you always need 3 layers on the right side to render in RGB mode). The fourth layer is like a glass screen above to be able to handle the mouseEvents better.

Why native javaScript and not jQuery...

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 version of colorPicker is mostly written in CSS (?) and therefore off most of the JS-cross-browser 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 fallback routines (to the most native) 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 separated to methods 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...

Why just a function and not using OOP

...well, this is kind of funny to explain.
First of all, when I started to read Peter-Paul Koch's book 'ppk on JavaScript' I stumbled upon his 'Introduction' to his book where he writes:
'...Therefore this book only treats those language features I work with. Object-oriented JavaScript, for instance, is conspicuously absent because I've never seen the need to use it.' - and I started to grin.
I tent not do believe so until a colleague of mine told me that it's impossible not to write this colorPicker in OOP... well, ... I wanted to dismiss that opinion and made a game out of it to proof Peter-Paul Koch's 'Introduction ;o)
I first started this project in OOP but then re-prgrammed it back to 'old-school' javaScript which suits perfectly to this type of application.

OOP makes live so much easier and is essential in most cases,... but not really with this colorPicker ;o)

Why do you write so ugly code?

...well, thank you ;o)
But you're right and... there are reasons for it.

This project was never meant to be a 'group project' or part of a bigger project where more people are involved. I would definitely write in a different style if not only me would write on it.
By the way: there is an excellent (small and expensive though) book from O'Reilly® called 'JavaScript Patterns' that teaches a lot about this issue.
I like to finish thoughts in one line and kind of hate to scroll up and down all the time just to solve one little thing. I also like to make code more compact if I'm done with a task to get better overview... if I have to repair, re-code things I usually 'unfold' the code again (which is not too much of work to do).
I also never forget code I did, not even after years... so it's easy for me to recognice pattern of my code. That's probably because I am a very visual oriented person.

I also declare variables more often in one scope... not a good ideal! But if you know what you're doing and how variables are treated and when they are declared... it's kind of OK,... sometimes. (The 'yuicompressor' tells me tons of those mistakes ;o)
For example: If you look at the source code of colorPicker.js at the function:
cP.onmousedown = function(e){...}
This peace of code is 60 lines long (even with my style of writing ;o) and it covers all the events of all buttons and ... best practice if you think of event delegation, but this way you need a lot of variables and might loose track of them (by scrolling up and down the code...

If you prefer to see the code in a more readable way ... there are a lot of 'code beautifiers' out there.

Updates in the future

The future updates will only contain more optimizations and reduction of code, not any new functionality. All new functions will be as external plug-ins 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 always dependent on the way they programmed things... and all the overload that comes with every function... 
My intention in doing this colorPicker was primarily because I wanted to learn javaScript in all it's facets, combine graphical skills and CSS with this powerful language and therefore make it even more powerful... 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)...

Explanations and tutorials

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

Screen shots

screen-shots

The following screen shots are numbered consecutively in a little graphic in the middle (1 to 11 as red numbers). Some explanations below might use those numbers as a reference to these pictures.

Click on the image to see the screen shots in full resolution (1015 x 745 pixels)

The images might differ from the actual software due to changes to the colorPicker.

^ back to top

Main Features

Use the following demo of the colorPicker to compare with feature list.

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 about device-dependent RGB models at:
http://en.wikipedia.org/wiki/HSL_and_HSV or visit John Dyer's page for some nice tutorials.
There is also a tool that helps understanding at http://dematte.at/cp2/ or http://dematte.at/cp3/

^ back to top

How to use the (a) colorPicker

Use the following demo of the colorPicker with instructions.
If the colorPicker hides the text, drag it around to get it out of your way.

^ back to top

DOM-Explorer in Google Chrome Extension

The DOM-Explorer looks in some ways like the one in Google Chrome's Element Inspector. At least the bottom line, which shows the element you picked from the page and its parents. You con also choose its parents by clicking on them to make this your desired element for changing colors.

DOM-Explorer

Choose then an attribute you'd like to change: color, background-color, ...
The border-color options only appear if your choosen element has some border.
Now use the color picker/chooser to change the color.

Use the spy-glass to close the explorer (to get it out of your way) and choose an other element by hovering the document. The DOM-Explorer just like the colorPicker is also draggable.
Try also to drag the right-bottom corner of the colorPicker to make it smaller (4 sizes).

In the top of this explorer you find on option field and a check-box for overwriting tag-color-values in common (for the whole document. The option box only shows TAGS that are used in the current document (to avoid frustration ;o). Select a TAG and use the color picker/chooser to change the colors.
The !imp checkbox adds an '!important' to the CSS rule to make it stronger and overwrite any other rule (except the ones declared inline...)

Some times, things might not change as you probably expect them to... this is probably due to some strong rule in the style sheet... well, if you wrote this document yourself, you'll probably know.

^ back to top