@madpilot makes

I have written a small colour picker using the Prototype javascript library, which I thought I would share with the world.

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

1. Include prototype.js and colourPicker.js in you html

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

3. Create an instance of the colour picker using the following javascript:

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.