JavaScript ColorPicker 0.6

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:

• Easy installation and use (onclick="colorPicker(this)")
• Highly custumizable (input, output, scaling, modes,...)
• color pickers (cursors) are individually draggable
• app is draggable (toggle available to avoid)
• App is scaleable in 4 different sizes (see screenshot 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)
• scaling has a visual helper that adjust with contrast of chosen color (see screenshot 8)
• Skin is transparent. Nice to all backgrounds and fully scaleable
  (see screenshot 11, right bottom corner)
• 6 choose-able modes (H, S, B and R, G and B) with 3 extra 'easyModes' for RGB (for better understanding) (see screenshot 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, ...)
• App is entirely skinn-able (even for non javaScripters). HTML and CSS are totally separate from javaScript (see screenshot 5, shows small GUI with HTML and CSS only)
• so, coders and designers can develop at the same time (without knowing or understanding what the other is doing...)
• all cursors adjust with the contrast individually (see screenshot 7 and 10)
• vertical slider has 2 separate cursors for better experience and understanding (see screenshot 7 and 10, cursors split while dragging)
• HSB, RGB and HEX values are editable and readable. 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 easyer to change withot loosing the value of the other axis. Also usefull 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 draging.
• 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 and black 1px dot in Chrome for Windows)
• very compact design (UI) that is still easy accessible
• hidden feature that lets you see color on existing web page background
   
• as less (nested) elements used as possible
• most program parts load only as needed at runtime with interaction
• all pictures are automatically preloaded for faster mode switching
• smart eventHandling
• smart handling and calculations at dragging time for better performance even with old browsers/computers
• no 'id's used (and therefore no single document.getElementById)
• CSS uses only one global class-selector
• no unwanted memory consumption (growth) at runtime
• no prototype, mootools, etc. (except some knowledge). All native code.
• javaScript, HTML, stylesheats and images are all together in all modes and sizes ~46k.
  (for comparison...: the page you're just at is >180k without the colorPicker?!!)

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

• Click on the input field in the gray box below to see the picker. Clicking again makes it disappear.
• Resize and see other modes by dragging the lower right corner.
  To follow these instructions, try to get it in full size mode (screenshot 4, eg. L)
  You might have realized that changeing the size also changes the color mode. This is because the initial mode is RGB B but in XXS size there is no RGB mode so it automaticaly changes to HSB S.
• Change color mode by clicking the buttons H, S, B and R, G, and B.
  Click now on RGB-B mode button to follow further instructions:
  This way you'll see the square to the left gaining red on the x-axis and green on the y-axis. Lower left corner is the origin 0,0. There, red has the value 0 and green is also 0. On the upper right corner red is 255 and green is 255 (the maximum: in hexadecimal it equals #FF).
• Drag around cursor in big square to chose color. See the right slider changing its colors. It shows you the range of colors you could get by adding or reducing blue to the picked color.
• Click and drag cursors in the right slider to gain or lower amount of 'blueness' in left square. (See colors change in the left slider). Bottom is 0 and top is 255 of blue.
• Change to easyMode by clicking the empty button next to the 'blue' input field.
  This way you'll see the amount of blue you've added, but you'll also loose the preview of colors.
• While dragging cursors inside the right slider you'll see that only one cursor moves... this gives you a better overview of how far you're off your last choice.
• The 'W' button changes the picked values to the closest web-smart color value.
• Double-clicking the 'W' button changes color to the closest web-safe color value.
   
• HSB stands for hue, saturation and brightness. It's just an other representation of the RGB color model. In HUE (or HSB-H) mode you'll see the color spectrum in the right slider showing the changing mix of respectively two of the three colors (red, green and blue).
  In the left slider box you can choose saturation by changing values on the x-axis and brightness by sliding parallel to the y-axis.
• HSB-S and HSB-B are probably the most common modes. HSB-S mode shows the colors fading in brightness towards the bottom and HSB-B mode shows them with fading in saturation. With the right slider you can then choose either brightness or saturation.
• Drag the app around at the borders if it's in your way or too fare away from instructions ;o)

• The colored button with the circle in it is the 'save color' trigger. Clicking it stores the picked color in one of the nine black squares to the left of it, beginning from the left, shifting to the right.
  You can recall these colors later by simply clicking them.
• Typing in values (HSV and RGB) changes the color imediately.
• Dragging the value fields (HSV and RGB) up and down changes the color values.
• The 'SAVE' button is meant to save the chosen color in the right color swatch. Clicking it overwrites the initial color. (This way you can compare that color with a newly picked one or a restored color from the memory. Read more about color comparison later.)
• The 'RES' resets the right color swatch to its initial value. Doubleclicking deletes the stored colors in the nine squares left to the button.
• Change color mode by clicking the buttons H, S, B and R, G, and B works fine in L-mode. In S-mode you can switch from HSB to RGB (and vs.) by double-clicking one of the 3 mode-buttons.
• the overlaid bars above the color swatches indicate the contrast and color difference of the two colors of the color swatches. The one that is always colored stands for color difference, the other one is either white if bigger then color difference or just a dark dot if smaller and stands for the contrast between the two colors.
  The colors red, orange and green indicate if the two colors are compliant (traffic light system). Green if contrast > 50% and color difference > 65%, orange if only one of those conditions match, red if none match.
• Click right color swatch to display that (saved) color.
• Doubleclick right color swatch to turn off color coparison bars.
• Click the left color swatch to get oposit color (+180° of HUE, where as brightness and satturation keep their values).
• Double click the left color swatch above the 'RES' button to see your choice all over the background of this page.

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

Methodes and Attributes:

^ 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>
 
...in 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: colorPicker@dematte.at
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.

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

• Soon done: make single colorPicker and move it around instead of multiple instances...
• Make right slider also with PNGs in RGB mode (might be slower though...)
• put more images into single sprites (so there will be 11 instead of 17 files and a bit smaller too)
• put CSS together to 1 single file and rename classes instead...done!
  (reduces file amount to 8 files then)
• Auto detection of YUI, jQuery, prototype, mootools, Tween, etc. for animated cursors and animated color memory
• ...or native animations
• and customizable routines for animations
• keyboard support (arrows to move cursors)
• more universal design (for different docTypes)
• jQuery version (guessed size of whole package (8 files): ~27 - 31kB, but same features)
• WebSave colors is easily doable like in Photoshop (even HSB mode),
  but... (it's only a colorPicker app ;o)
• more options to choose colors, like in preset color palettes
• RGB and/or HSB modes as sliders (for better understanding, maybe?)
• HSB as 'native' circle (doable with little memory)
• Lab color picker
• ... (what else could you do to 'a color picker' ;o)
• some features I don't want to talk about yet (secrets??),... but very nice ones though. Things I'll need for my CMS, hmmm? I'll make it a real colorPICKER then just like in dematte.at/colorPicking.

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

• setting the name of the Directory
• setting the name of the HTML file
• .. the CSS file
• the initial scaling of the app
• the initial color mode (HSB H is used for the smallest size (XXS), but if scaling changes, it remembers the initial setting)
• the initial chosen color (it can automatically read the color, background color, text, value, etc... from any target (div, a, input,...) in modes like #CC0000, CC0000, #C00, rgb(204,0,0), etc...)
• resolution setup for vertical slider in RGB mode
• effected objects when changing colors, so all the named objects will change color while dragging (objects or object names as array)
• setting the allowed scales
• setting the allowed modes
• turn on/off automatic modes
• turn on/off memory
• etc...

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 http://quirksmode.org/, 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:

• 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 inPhotoshop)
• 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
• successive memory usage
• 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 realtime 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 of my secrets... (also PHP, like: upload, shrink and iconize pictures at the same time for best usage in CMSs, etc...)

... so, see you soon ;o)

^ back to top