RGB ColorPicker

An advanced javascript colorpicker

RGB ColorPicker is a javascript color selection tool. It features an RGB color cube which allows users to easily select the desired color. It's also possible to enter HTML rgb hexcodes or decimal RGB triplets. The corresponding color will be shown by the colorpicker. A color palette remembers the most recent selected colors. The palette can also be preloaded with a certain selection of colors.


A few examples are probably the best method to demonstrate how to use the RGB ColorPicker.

example 1
The first example is a standard text field with an icon to launch the color picker. The field contents changes with the selected color.

HTML code for this example:

<input id="example_1" type="text" name="field_name_1" size="6" maxlength="6">
<script language="javascript">cp_color_field('example_1', CP_FIELD_ICON);</script>

example 2
The second example is a also a normal text field, but this time with a colorbox that launches the color picker. The box's color changes with the selected color. If a color is manually entered into the field, the box's color is also updated.

HTML code for this example:

<input id="example_2" type="text" name="field_name_2" size="6" maxlength="6" onchange="cp_update_color_box(this.id);">
<script language="javascript">cp_color_field('example_2', CP_FIELD_BOX);</script>

example 3
The third example is the same as the previous one, but with the textfield hidden.

HTML code for this example:

<input id="example_3" type="hidden" name="field_name_3" size="6" maxlength="6">
<script language="javascript">cp_color_field('example_3', CP_FIELD_BOX);</script>

example 4
The last example shows how to load a custom palette. Click on the link below to load a palette.
load palette
HTML code for this example:

<a href="javascript: void(0);" onclick="cp_pal_load(Array('FCE94F','EDD400','C4A000','8AE234'));">load palette</a>