JavaScript ColorPicker 0.9 [one file version]

^ back to top

Download

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

• Usage is as simple as:
  <script type="text/javascript" src="colorPicker.js"></script>
  and then something like: onclick="colorPicker(event)" inside an input field.
  The colorPicker can be called from any HTML-tag and doesn't need an initial value.

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

• colorPicker.mode: String 'H', 'S', 'V', 'R', 'G', 'B'
  initial colorMode
• colorPicker.size: Integer 1, 2, 3, 4
  initial size from XXS to L
• colorPicker.allowResize: Boolean true, false
  switch toallow/disallow resizing of colorPicker
• colorPicker.allowClose: Boolean true, false
  switch to allow/disallow closing of app with 'x' in right top corner
• colorPicker.allowDrag: Boolean true, false
  switch to allow/disallow dragging colorPicker
• colorPicker.expColor: Boolean true, false
  switch for exporting colors to background of initial object
• colorPicker.expHEX: Boolean true, false
  switch for exporting color-value to initial object (as value or text)
• colorPicker.offsetX: Integer 0
  x-offset in pixels relative to initial object
• colorPicker.offsetY: Integer 3
  y-offset in pixels relative to initial object
• colorPicker.orientation: String 'left||right','bottom||top':
  initial xy-position relative to initial object
• colorPicker.parentObj: HTMLObject [input.parentNode]
  initial parent of colorPicker
• colorPicker.parentXY: String (for example: 'position:absolute;right:12px;top:12px')
  initial style (coordinates,...) if colorPicker was not initiated by an object.onclick
• colorPicker.color: String "rgb(r,g,b) || #rgb || #rrggbb || rgb || ##rgb..."
  initial color in common web-formats
• colorPicker.difPad: Integer 2
  LR padding/border/left of contrast / color difference bar
• colorPicker.rSpeed: Integer 15
  rendering speed; 0 renders right after mousemove, any other number calls the rendering engine every x milliseconds.
• colorPicker.cookieLife: Integer 0
  days of how long the saved colors, the size of the colorPicker and the colorMode should be saved in cookies

Methods you can use for manipulation:

• colorPicker.importRGB: function ([r,g,b]) (as array):
  This method imports the RGB color into the colorPicker and starts the rendering engine if not yet running. (The method colorPicker.exportColor is included in the rendering engine). You can either write the whole RGB array to the function or just one of the array parts and set the others to false. This way you can just increase / decrease the red, the green or the blue value. The other values then stay as they are.
• colorPicker.importHSB: function ([h,s,b]) (as array):
  The same as colorPicker.importRGB just with the HSB values.
• colorPicker.stopRendering: function ():
  This function stops the rendering engine if you don't us onMouseMove while mouseDown.
  As soon as you call the above methods the rendering engine starts to run. It would stop on document.body.mouseup, but dosn't if you use a different procedure.
• colorPicker.importColor: function (rgb) (as string || array [r,g,b]):
  This is the save but also slow method to import a color to the colorPicker and make it render it. (the rendering engine doesn't start though).
  You can send values in standard rgb values like 'rgb(r,g,b)' or '#RRGGBB' or '#RGB' or even without or more '#'.
• colorPicker.exportColor: function ():
  This function is executed each time the rendering engine cycles and is initially empty.
  You can overwrite this function with any other function you want (In this demo it draws the color bars and the colors in the 'Lorem ipsum' box).

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:

• colorPicker.CP.rgb: Array [r,g,b] (as numbers):
  Values of the current picked color in RGB as an array with numbers
• colorPicker.CP.rgbRND: Array [r,g,b] (as integer):
  Rounded values of the current picked color in RGB as an array with integers
• colorPicker.CP.hsv: Array [h,s,b] (as integer):
  Rounded values of the current picked color in HSB as an array with integers.
  These values don't come as expected in max. values of 360, 100, 100 but in values as coordinates: 255, 255, 255
• colorPicker.CP.cmyc: Array [c,m,y,k] (as number):
  Rounded values of the current picked color in CMYK as an array with numbers.
  Thes values range from 0 to 1
• colorPicker.CP.hex: String 'rrggbb':
  This is the String containing the current picked color as hex string.
• colorPicker.CP.mode: String 'H', 'S', 'V', 'R', 'G', 'B':
  This String tells you the mode the colorPicker is currently in.
• colorPicker.cP: [objectHTMLDivElement]:
  This is the colorPicker it self. You can add styles, position, ... do whatever you need to do to it.

^ back to top

History / techniques and some answers to FAQ

In this paragraph I'll talk about:

• How and why it all started
• Some techniques I used
• Why javaScript and not jQuery?
• Why just a function and not using OOP?
• Why do you write so ugly code?
• Updates in the future
• Explanations and tutorials

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.

• optimizing images by building sprites and perfect positioning inside
• optimizing images with Smush.it™, PngThing, ...
• BASE64 encoding images to build URI-images and mht-files (IE) in CSS
• dynamically building CSS for single use of URI-code and mht
• dynamically building CSS for compatibility to all browsers
• changing classNames instead of changing styles (faster in most browsers,... the test (the link I offered) is not completely correct*)
• combining style changes with cssText for reduction of DOM access
• using arrays to reduce code and to skip many lines of 'if's
• excessive event propagation
• building the whole colorChooser with HTML-text and including it by innerHTML. Faster with big HTML, less code and nicer to edit/change.
• setting pointers to single elements by className (no id or getElementById necessary... saver)
• optimizing 'onMouseMove' routines by excluding things that are not needed inside those routines and using closures for speed optimization
• excessive usage of regularExpressions ... my friend,... in sections where speed is no issue.
• ...to be continued

* 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:

• PNGs and the big variety of usage
• how to make patches for colorPicker
• colorMixing
• transparency and browser issues
• using 'layers' (e.g. <DIV>s) in JS (just like you would think of in Photoshop)
• correct mouse-, eventHandling
• eventHandler caching (of anonymous functions)
• smart CSSing
• collecting Elements without using IDs
• objectSniffing instead of browser detection
• clousures and it's powerful effects
• building buttons as easy as changing classes...
• howTo separate design from javaScript
• consequences of smart code while dragging...
• ...etc.. you'll see!

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

• fast real-time motion tweening with JS...
• ... JS vs. Flash
• how to make slide-frames with only 2 elements (some more if it should look even nicer)
• rounded corners (many different techniques with less elements and also usage of PNGs)
• why and when using sprites
• how to pick colors of an image
• separate programming in PHP and displaying things on the web
• how to help programmers and designers get along ;O)
• endless OS-lookalike drop-down menu in CSS only
• animated TABbing (like in older OSX ... settings)
• ... and many more

... so, see you soon ;o)

^ back to top

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.

• Easy installation and use (onclick="colorPicker(event)")
• Highly customizable (input, output, scaling, modes,...)
• App is scale able in 4 different sizes (see screen shot 1, 2, 3 and 4) (151 x 87 (HSB only), 155 x 155, 260 x 159 and full size 405 x 302 (pro mode)) (toggle available to avoid)
• 6 choose-able modes (H, S, B and R, G and B) with 3 extra 'easyModes' for RGB (for better understanding) (see screen shot 6, 7 and 10)
• 9 color memories
• no double saved colors (indicator available) in memory to preserve memory slots
• memory even keeps the last setup (color mode, RGB 'easyMode' and size of App)
• Contrast and color difference meter for color comparison with indicator for compliant choice.
• works in all browsers (IE since 5.5, FF, Safari, Crome, Opera, Konqueror, ...) even in quirksMode
• App is entirely skin-able (even for non javaScripters).
• app is drag able (toggle available to avoid)
• all cursors adjust with the contrast individually (see screen shot 7 and 10)
• vertical slider has 2 separate cursors for better experience and understanding (see screen shot 7 and 10, cursors split while dragging)
• HSB, RGB and HEX values are editable and readable. Input is evaluated immediately (without blinking characters). CMYK is readable only.
• HSB and RGB values can be adjusted by dragging the input fields up and down, so x-axis and y-axis of main color-area is easier to change without loosing the value of the other axis. Also useful to get more accurate values in smaller S-mode where dragging input fields is always decreasing / increasing values by 1, where as dragging cursors in S-mode is always 2 steps per pixel of dragging.
• Keyboard support in input fields to change values (arrowKeys and pageUp/Down keys)
• all colors are displayed as 'true' colors, even in RGB mode, so the color you navigate the cursor to will be displayed. (in scaled modes you can choose only every second color though and in XXS-mode ...)
• web-smart and web-safe colors as approximation/recalculation of picked color.
• disappearing system cursor for better experience (not in Opera, Konqueror)
• very compact design (UI) that is still easy accessible hidden feature that lets you see color on existing web page background
• fast input / outpu interfaces
• no prototype, mootools, etc. (except some knowledge). All native code.
• ...maybe I forgot some... just try it out and find some more

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

• Clicking on the input fields activates the colorPicker. Clicking again hides it.
• Click or drag around in color patches to get the cursors to the desired color.
  Cursors always show the current color (left and right). Dragging on left field changes the color range in the right field or better, adds the current color(s) to the other side and shows the possible colors (color range) on the other slider.
  The same happens the other way around.
  The splitting cursors while dragging in the right slider might help you to see the difference between your new choice and the one before.
• Click on H, S, B, R G, B to change the color modes. You will be able to add / reduce colors (or Hue, Saturation, Brightness) in different ways.
  Mode R lets you add red color to the left slider, where as you can add green and blue to the right side. The same procedure happens to G and B mode.
  Using H mode lets you chose HUE on the right slider, where as in the right slider you change saturation on the x-axis and brightness on the y-axis. (and so on)
  If the app is in a smaller view, you'll be only able to see either the R, G, B or H, S, B buttons. In this case you can double click on the buttons to switch to the other modes.
• Click on the buttons right to R, G, B to avoid color change if dragging cursor on the left side when you're in that specific color mode. (e.g. R mode and the button right to R)
  This might help to keep in mind which color is added to the left side.
• Type in some numbers into the input fields next to H, S, B, R, G, B to change the amount of that segment.
• You can also use the arrow keys or the pageUp / pageDown keys to change the values
• You can also click in that field, hold the mousebutton down and drag the cursor
  up / down to change the values (1 number per pixel, even if app is smaller).
• Changing the color through typing hex code in the '#' field only changes if you hit the ENTER key (where as colors change immediately if changed in other fields)
• The button to the right of the '#' field shows if color is
  web-save [W] / web-smart [M] or not [!].
  Clicking the button switches between those modes and changes the color. You will always be able to get back to where you were.
• The left colored patch almost all the way right / down (above the 'RES' button) always shows the current picked color.
  Clicking it changes the color to 180° Hue, so the opposite color on the Hue circle but with the same brightness and saturation.
  Double clicking it internally saves the background of the document and overwrites it with the current color of the picker. This way you have a bigger area to see your chosen color. Double clicking again restores to normal.
• The right color patch stores the color of the originally clicked input field (when you opened the colorPicker). It is the color that is compared in color difference and contrast difference to the left color patch, which is shown in the bars above (more later).
  Clicking on it picks that specific color.
• If you click on the 'SAV' button you can store the current color in the right color patch to be able to compare that new saved color to the color in the left color patch.
• Clicking the 'RES' button recalls or resets the right color patch to the initial color.
• The square to the left of the 'RES' button always keeps the last picked color even while dragging in the color sliders until the mousebutton is released. This way you can always compare to the last picked color to the new one.
  Clicking it saves the current color in the furthest left color box to the left of it.
• The 9 squares on the bottom hold the saved colors that are save with the 10th (the one with the circle in it).
  Clicking on those squares makes the colorPicker choose that color.
  If you try to save a color that's already saved, the square with the matching color will blink. This avoids double colors. Except with the 9th: this one disappears on the right and just skews over to the left to keep it in your collection.
• The bar(s) right above the two bigger color patches to the right show the
  color difference / contrast difference of the two color patches right underneath.
  The colored bar shows the color difference and changes color if the combination of difference and contrast values reach a certain value. It's red if contrast is below 50% and color difference is below 65%, changes to orange if one of those exceeds those values and turn green if both of them are on ore above those marks.
  If the color difference is bigger than the contrast, the contrast bar only shows as a little vertical black line as if it where underneath the other one. If it grows over the right side of the other one, the rest is displayed as white.
• Closing the app is also possible by clicking the little x on the far right / top corner.
• Changing to one of the 4 different sizes of the colorPicker is possible in the far right, bottom corner of the app. This activates the double click feature of the color mode buttons. This way you can change from RGB mode to HSB mode without having to change back to the big size.
• You can drag the app on almost all parts of it self where there is no other function assigned to as described above by clicking and holding the mouse and the drag the mouse around the screen.

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

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