ColorPicker - vi knallgrau

NEW: colorpicker.js moved to Google Code.

This script provides an easy to use and integrate HSV color picker.

see the DEMO

or just download (VERSION 0.9) it (includes prototype and script.aculo.us)

How to implement it

include the javascript files in your HEAD
link the colorpicker.css file in your HEAD or Stylesheet
add an input field holding the hex color value (without the leading #)
initialize the ColorPicker

Options

swatch ... specify and ID of an element that will be used as a button to open the colorPicker popUp, and will also display the selected color as it's background.

IMAGE_BASE ... base URL where the images used for the ColorPicker are located (including the trailling slash)

Callback	Description
onOpen	Called after the slider popUp is opened.
onClose	Called after the slider popUp is closed.
onUpdate	Called whenever a user picked a different color. If the user is dragging the slider, or the colorpicker (circle) the update occures onMouseMove.
getPopUpPosition	If you want to get control over the position of the colorPicker popUp you may provide this function. ColorPicker expects this function to return an Array with two number values [x,y]. getPopUpPosition will receive the open event (click) as the only argument. You may access all values and methods of ColorPicker via this.

Full Example

<form><p>color 1 #<input type="text" id="colorfield1" value="FF33FF"></p><p>color 2 #<input type="text" id="colorfield2" value="CC3366"></p><p>color 3 #<input type="text" id="colorfield3" value="66FF66"></p><p>color 4 #<input type="text" id="colorfield4" value="339900"> <button style="width: 1.5em; height: 1.5em; border: 1px outset #666;" id="colorbox4" class="colorbox"></button></p></form>

<script type="text/javascript">["1", "2", "3"].each(function(idx) {  new Control.ColorPicker("colorfield" + idx, { IMAGE_BASE : "img/" });});new Control.ColorPicker("colorfield4", { "swatch" : "colorbox4" });</script>

STYLESHEET

To make the ColorPicker work like it should, you also need to include the colorpicker.css file to your page.

This file defines the appearance of the ColorPicker PopUp and is using the following keys:

#colorpicker ... container for popUp (adapt width, hight, background to your needs)
#colorpicker-hue-slider ... slider container (adapt width and height to your needs)
#colorpicker-hue-bg-img ... slider bg
#colorpicker-hue-thumb ... slider handle
#colorpicker-div ... container for color picker area (adapt width, height to your needs)
#colorpicker-bg ... color picker area
#colorpicker-selector ... circle, that indicates the current color
#colorpicker-footer ... container for OK button
#colorpicker-value ... span containing the value input, prefixed by '#'
#colorpicker-value-input ... input.text containing the current color value (without the #)
#colorpicker-okbutton ... the blue OK button

License

This script is published under an MIT-License (just as script.aculo.us)

Credits

written by Matthias Platzer AT knallgrau.atinspired by YUI Color Picker script.implemented using script.aculo.us, YUI Util color.js and some more EasyRGB math

Code

ColorPicker

Plugin Framework

DropDownMenu

Color Picker

This Color Picker was inspired by YUI Color Picker script, but is based on the fantastic script.aculo.us library.