How to use the color picker widget in Concrete CMS 5.7

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Apr 1, 2015

The Concrete CMS 5.7 color picker widget uses the Spectrum color picker.
http://bgrins.github.io/spectrum/

Core::make('helper/form/color')
output( string $inputName, value $value = null, array $options = array() )

http://documentation.concrete5.org/api/class-Concrete.Core.Form.Service.Widget.Color.html

Default Options:

$defaults = array();
$defaults['value'] = $value;
$defaults['className'] = 'ccm-widget-colorpicker';
$defaults['showInitial'] = true;
// Show the color that was initially set when the color picker was opened next to the current selection.
$defaults['showInput'] = true;
// Type, copy, and paste into the color picker input text box.
$defaults['allowEmpty'] = true;
// Allow an empty value to be selected.
$defaults['cancelText'] = t('Cancel');
$defaults['chooseText'] = t('Choose');
$defaults['preferredFormat'] = 'rgb';
// The color format that is displayed in the text box and the format saved.
$defaults['clearText'] = t('Clear Color Selection');

http://documentation.concrete5.org/api/source-class-Concrete.Core.Form.Service.Widget.Color.html#8-44

More information on Spectrum color picker options.
http://bgrins.github.io/spectrum/#options

The color picker options are added to the output() method as a multidimensional associative array. The array is added as a third argument.
Example:

output('color_name', $color_name, array(…options…))

Basic Use:

$color = Core::make('helper/form/color');
$color->output('basic', $basic);

Start with a Default Color:

$color = Core::make('helper/form/color');
$color->output('defaultColor', $defaultColor ? $defaultColor : '#000000');

$defaultColor ? $defaultColor : '#000000'
A ternary operator is used in the second argument.
If $defaultColor is true, use the value of $defaultColor.
If $defaultColor is false, set the value to #000000.

Select a Preferred Color Format

$color = Core::make('helper/form/color');
$color->output('hex', $hex, array('preferredFormat' => 'hex'));

Format Options:
hex
array('preferredFormat' => 'hex')
hex3
array('preferredFormat' => 'hex3')
hsl
array('preferredFormat' => 'hsl')
Default when no format is specified:
rgb

RGB Color Format with Transparency Slider (RGBA)

$color = Core::make('helper/form/color');
$color->output('rgba', $rgba, array('showAlpha' => 'true'));

array('showAlpha' => 'true')

*** Palette colors can be HTML named colors, hex, hex3, rgba, rgba, hsl, and hsla.

Show a Color Palette

$color = Core::make('helper/form/color');
$color->output('showPalette', $showPalette, array('showPalette' => 'true', 'palette' => array(
    array('yellow', 'blue', 'red'),
    )));

array('showPalette' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))

Show a Color Palette with Custom Rows

$color = Core::make('helper/form/color');
$color->output('showPaletteRows', $showPaletteRows, array('showPalette' => 'true', 'palette' => array(
    // Row One - one color
    array('red'),
    // Row Two - two colors
    array('yellow', 'blue'),
    // Row Three - three colors
    array('orange', 'grey', 'aquamarine'),
    // Row Four - four colors
    array('#9113C6', 'rgba(95, 91, 0, 0.7)', 'rgba(58, 56, 0, 0.7)', 'lightblue'),
    )));

array('showPalette' => 'true', 'palette' => array(
array('palette_color_row1_1'),
array('palette_color_row2_1', 'palette_color_row2_2'),
array('palette_color_row3_1', 'palette_color_row3_2', 'palette_color_row3_3')
array('palette_color_row4_1', 'palette_color_row4_2', 'palette_color_row4_3', 'palette_color_row4_4')
))

The color palette can be divided into rows. Each sub-array of the palette array forms a new row. Each row can have differing numbers of colors.

Show a Color Palette in RGB Color Format with Transparency Slider (RGBA)

$color = Core::make('helper/form/color');
$color->output('showPaletteRGBA', $showPaletteRGBA, array('showAlpha' => 'true', 'showPalette' => 'true', 'palette' => array(
    // green
    array('rgba(0, 141, 6, 0.7)', 'rgba(0, 95, 4, 0.7)', 'rgba(0, 58, 3, 0.7)'),
    // lightblue
    array('rgba(0, 90, 141, 0.7)', 'rgba(0, 61, 95, 0.7)', 'rgba(0, 37, 58, 0.7)'),
    // blue
    array('rgba(0, 23, 142, 0.7)', 'rgba(0, 15, 95, 0.7)', 'rgba(0, 9, 58, 0.7)'),
    // purple
    array('rgba(61, 0, 142, 0.7)', 'rgba(41, 0, 95, 0.7)', 'rgba(25, 0, 58, 0.7)')
    )));

array('showAlpha' => 'true','showPalette' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))

Show Color Palette Only

$color = Core::make('helper/form/color');
$color->output('showPaletteOnly', $showPaletteOnly, array('showPalette' => 'true', 'showPaletteOnly' => 'true', 'palette' => array(
    // green
    array('rgba(0, 141, 6, 0.7)', 'rgba(0, 95, 4, 0.7)', 'rgba(0, 58, 3, 0.7)'),
    // lightblue
    array('rgba(0, 90, 141, 0.7)', 'rgba(0, 61, 95, 0.7)', 'rgba(0, 37, 58, 0.7)'),
    // blue
    array('rgba(0, 23, 142, 0.7)', 'rgba(0, 15, 95, 0.7)', 'rgba(0, 9, 58, 0.7)'),
    // purple
    array('rgba(61, 0, 142, 0.7)', 'rgba(41, 0, 95, 0.7)', 'rgba(25, 0, 58, 0.7)')
    )));

array(showPalette' => 'true', 'showPaletteOnly' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))
Restrict color choices to a predefined color palette.

in db.xml:

The color selected is a string and will need a field in the block table to be saved.

The type="C" field type to MySQL is VARCHAR. VARCHAR - variable characters with a 255 maximum http://www.concrete5.org/documentation/how-tos/creating-and-working-with-db-xml-files/

Recent Tutorials
WebOps Tutorial on Running and Upgrading a Concrete CMS Website
May 2, 2024
By myq.

Describes how to deploy, manage, and upgrade a Concrete CMS website

Using the Concrete Migration Tool Addon
Apr 27, 2024

How to use the Concrete CMS Migration Tool

Create custom Site Health tasks
Apr 19, 2024
By myq.

This tutorial will guide you through the creation of a new Site Health task

Reusing the same Express entity in multiple associations
Apr 11, 2024
By myq.

How to create and manage multiple associations in Express

Express Form Styling
Apr 11, 2024
By myq.

Different ways to style Express forms

Setting addon/theme version compatibility in the marketplace
Jan 9, 2024

For developers worn out with setting the latest addon or theme version manually across too many core versions, here is a JavaScript bookmarklet to do it for you.

Improvements?

Let us know by posting here.