It is very simple, but does the job suprisingly well. I may very well add extra features to it later on, so watch this space.
You can download the source file here.
Instructions for use
Include prototype.js and colourPicker.js in you html
Create a “target” element and a “trigger” element. The target element is the input tag that will store the colour hex code, so a text box or hidden input will work nicely. The trigger element is the element the user will click to popup the colour picker
<input type="text" name="colour" id="picker" value="" /> <a id="trigger">Pick a colour</a>
var picker = new ColourPicker(‘picker’, ‘trigger’);
And that is it! Clicking the link will popup the colour picker and after a colour is selected, the text box will then have the hex value in it.
Future plans include better positioning of the popup, and callback functions to you can intecept the colour.
Update: you can see a demo here.