4.4
Rating: 4.4/5 (64 votes)

Color Picker

A simple color picker control that supports saving custom colors to the palette via cookies. To open the palette, click the color box at the right side of the input box.

Demo

Color:

Source Example

<html> <head> <script language="javascript" src="protoplasm.js"></script> <script language="javascript"> Protoplasm.use('colorpicker').transform('input.colorpicker'); </script> </head> <body> <input type="text" name="color" class="colorpicker" value="#FFCC00" /> </body> </html>

Usage

To create color pickers out of all elements that match a given CSS rule:

Protoplasm.use('colorpicker').transform(selector[, options]);

Parameters:

Parameter Required Description
selector yes A CSS rule matching the text inputs to turn into color pickers
options no An object (hash) containing name/value pairs of additional options.

Available options:
colors An array of 40 colors (in hex format) to display in the swatch grid
addLabel The text to display in the "add custom color" button, defaults to "Add"

Advanced Usage

If you want more control over creation and destruction of the color picker, you can instantiate it manually instead of using Protoplasm.transform.

In your <head> section:

Protoplasm.use('colorpicker');

To create a color picker:

var picker = new Control.ColorPicker(element[, options]);

To destroy the color picker:

picker.destroy();

For more details, see the API documentation for Control.ColorPicker.