Point and Click: Color Picker / Color Code Generator

Do you need to pick a color for your web pages? Use the color picker to the left; point and click, then copy the hexadecimal color code to your website or TWiki. The color picker uses the intuitive HSL (hue, saturation, and lightness) color space rather than the more common HSB (hue, saturation, and brightness), which means it's easy to make a color brighter without touching its saturation, or vice versa. This is a jQuery-based widget called Farbtastic, developed by Steven Wittens of Acko.net.

TWiki has a ColorPickerPlugin that makes this color picker widget available to TWiki users. Application developers can add color pickers to TWiki applications. Once the ColorPickerPlugin is installed and enabled, it is easy to use the color picker in an HTML form. Example:

<form action="...">
Color: %COLORPICKER{ name="color_demo" size="12" value="#123456" class="twikiInputField" }%
<form>

This will show an HTML input field named "color_demo" and a color picker tied to it. The size, value and class parameters are optional.

The ColorPickerPlugin also adds a new type color to TWikiForms. Example form definition:

Name:	Type:	Size	Values:	Tooltip message:
Color demo	color	12		Select color

Any TWiki topic that uses this form will have the color picker accessible when editing the topic. See details in TWikiForms.

It is also possible to use the color picker in HTML forms on your website, outside of TWiki:

1. Download jQuery library and put the css and js files in your html enabled directory, such as into a jquery subdirectory.

2. Download the ColorPickerPlugin, unpack it and put the content of the pub/TWiki/ColorPickerPlugin directory into the jquery subdirectory. You do not need any other directories. Alternatively, download Farbtastic from acko.net.

3. Add the color picker to your HTML form. Example, assuming jQuery is located at /jquery:

<link rel="stylesheet" href="/jquery/jquery-all.css" type="text/css" media="all" />
<script type="text/javascript" src="/jquery/jquery-all.js"></script>
<script type="text/javascript" src="/jquery/farbtastic.js"></script>
<link rel="stylesheet" href="/jquery/farbtastic.css" type="text/css" />
<form action="...">
Color: <input type="text" id="color_demo" name="color_demo" value="#808080" size="12" />
<div id="color_demo_picker"></div>
<script type="text/javascript">
  $(document).ready(function() {
    $('#color_demo_picker').farbtastic('#color_demo');
  });
</script>
</form>

This will show an HTML input field named "color_demo" and a color picker tied to it.

References:

• Wikipedia:Web_colors - web colors with HTML color names and hex codes
• Wikipedia:Color_space - color space
• Wikipedia:HSL_and_HSV - comparing HSL and HSB
• ColorPickerPlugin - TWiki's color picker
• http://acko.net/dev/farbtastic - Farbtastic color picker widget

Comments

.