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:
There are some attributes and methodes available if you called the picker like
'var cP = new colorPicker(this)'
- cP.importColor(col,update)
- col could be 'this.style.backgroundColor' or some valeu like '#C00', '#CF8574', '985' or 'rgb(123,243,100)' etc... or array of rgb-values (like [123,234,012]... this works faster)
- update is a trigger for immediate display update of all features of the colorPicker.
If set to false (or not set at all) display update triggers at mouseUp anywhere in the document
- cP.exportColor(colorArray,'rgb(r,g,b)') can be prototyped for onchange simulation.
This method doesn't do anything but getting color values as RGB array and as 'rgb(r,g,b)' every time the color is changed or after color picking (see attribute cP.exportUpdate)
- cP.init() if you changed some of the below attributes and want to reset.
- cP.objs =[objs]; one or meore objects thats backgroundColor should be affected
- cP.color =[color]; initial color in common web-formats
- cP.cPCatchColor =[true,false] captures the backgroundColor of object for initial color
- cP.colorMode =['RGB_R', 'RGB_G', 'RGB_B', 'HSB_H', 'HSB_S', 'HSB_B'] initial mode
- cP.cPSize =[1, 2, 3, 4] initial size from XXS to L
- cP.allowResize =[true, false] switch to allow/disallow resizing of app
- cP.allowClose =[true, false] switch to allow/disallow closing of app with 'x' in right top corner
- cP.allowDrag =[true, false] switch to allow/disallow dragging app
- cP.cPOffsetTypeX = ['left', 'right'] initial x-position relative to initial object (def = 'left')
- cP.cPOffsetTypeY = ['top', 'bottom'] initial y-position relative to initial object (def = 'bottom')
- cP.cPOffsetX = [int] x-offset in pixels relative to initial object (def = 0)
- cP.cPOffsetY =[int] y-offset in pixels relative to initial object (def = 3)
- cP.slideTh = [int] threshold in pixels when dragging input field starts to change values (def = 8)
- cP.expColor =[true, false] switch for exporting colors to background of initial object
- cP.expHEX = [true, false] switch for exporting color-value to initial object (as value or text)
- cP.cPSubDir = ['path'] initial path for script if other than 'colorPicker'
- cP.cPHTMLFile = ['filename'] initial file name of skin if other than 'colorPicker.html'
- cP.cPCSSFile =['css-filename'] initial file name of skin-css if other than 'colorPicker.css'
- cP.slLoGrade = [int] initial value for accuracy of colorbar in RGB mode while dragging (def = 64). This value is for performance reasons. Coosing a higher vale (max = 255) might slow down performance on older computers (especially using IE because of its slow rendering engine)
- cP.slHiGrade =[int] initial value for accuracy of colorbar in RGB mode after/before dragging (default = 128)
- cP.compare = [true, false] switch for enabling / disabling color-difference/contrast display
- cP.exportUpdate = [true, false] switch for export immediately or after mouseup
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>
...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.
^ 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
