Rudimentary jQuery color picker demo

Demo 1

If you have JavaScript enabled, this paragraph "should" be replaced once the JS code loads.

When you click a color in the selector (above), this paragraph should change its background. Note that the '?' color entry (transparent) is not terribly useful with most elements, but is useful when the target of the color change is an IMG element which itself has a transparent background (e.g. transparent PNGs).

The JS code for this section looks something like:

Demo 2

If you have JavaScript enabled, this paragraph "should" be replaced once the JS code loads.

When you click a color in the selector (above), this paragraph should change its border and text colors.

The JS code for this section looks something like:

Draggable...

By using a small bit of code from the jqDnR plugin you can create draggable color selectors. Try dragging the following selector around your screen:

The JS code for this section looks something like:

I am an example Box "#ex2"
You can *DRAG* Me.

The End

To see how the above examples work, view the source code for this page and search for "text/javascript" to jump directly to the script code. Also note that they implicitly use a style sheet definition which looks something like this:

.ColorBlotch { 
	border: 1px solid #000000;
	padding: 0 2px 0 2px;
	font-family: monospace;
	cursor: pointer;
	font-size: 1.2em;
}

But the class name which the code uses is configurable (see the documentation, in the source code, for how it's done). The source code can be downloaded from the main page.