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 using the Color Widget Service output method and signature:

output( string $inputName, value $value = null, array $options = array() )

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');

More information on Spectrum color picker options:
[https://bgrins.github.io/spectrum/#options][5]

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);
 note: \Core::make() is deprecated . Use app() (since 8.5.2) or \Concrete\Core\Support\Facade\Application::getFacadeApplication() . See this tutorial for more details.

Start with a Default Color:

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

$defaultColor ? $defaultColor : '#000000' explained:
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.concretecms.org/developers/packages/custom-database-tables-in-packages/db-xml-doctrine-xml-format

Recent Tutorials
Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Upgrading Concrete from 8.5 to 9.x
Jun 21, 2024
By myq.

How to avoid problems upgrading from 8.5 to 9.x

How to change the default date format
May 30, 2024
By myq.

Change the format of the default date

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

Improvements?

Let us know by posting here.