The colorpicker wizard allows you to select a HTML color value from a user-friendly pop-up box. The wizard type is “colorbox” which will first of all add a colored box next to an input field. Here’s how it looks in a “haiku” record of the “examples” extension:

onefunction (color)

‘config’ => array (
‘type’ => ‘input’,
‘size’ => ’10’,
‘eval’ => ‘trim’,
‘wizards’ => array(
‘_PADDING’ => 2,
‘color’ => array(
‘title’ => ‘Color:’,
‘type’ => ‘colorbox’,
‘dim’ => ’12×12′,
‘tableStyle’ => ‘border:solid 1px black;’,
‘script’ => ‘wizard_colorpicker.php’,
‘JSopenParams’ => ‘height=300,width=250,status=0,menubar=0,scrollbars=1’,
),
),
)

The color of the box is set to the value of the text field. Clicking the box will open a popup window with the full color picker wizard:

Here you can select from the web-color matrix, pick a color from the sample image or select a HTML-color name from a selector box.

The corresponding TCA configuration looks like this:

twofunction(colorbox):

'color' => array(

'exclude' => 0,

'label' => 'LLL:EXT:examples/locallang_db.xml:tx_examples_haiku.color',

'config' => array(

'type' => 'input',

'size' => 10,

'eval' => 'trim',

'wizards' => array(

'colorChoice' => array(

‘type’ => ‘colorbox’,

‘title’ => ‘LLL:EXT:examples/locallang_db.xml:tx_examples_haiku.colorPick’,

‘script’ => ‘wizard_colorpicker.php’,

‘dim’ => ’20×20′,

‘tableStyle’ => ‘border: solid 1px black; margin-left: 20px;’,

‘JSopenParams’ => ‘height=600,width=380,status=0,menubar=0,scrollbars=1’,

‘exampleImg’ => ‘EXT:examples/res/images/japanese_garden.jpg’,

)

)

)

),

Notice the wizard type which is “colorbox”.