How to use the color picker widget in Concrete CMS 5.7

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
Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Add-On Developers: Get Your Add-Ons Ready for Concrete CMS 9.0
Aug 6, 2021
By andrew.

Concrete CMS 9.0 is coming! But there are some changes in version 9 that might affected your add-ons and themes. This document aims to answer questions about the most common ways that your add-ons might need to be changed, and common problems you'll run into.

Permissions for editors in a multilingual site
Jun 2, 2021
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Getting Started with Doctrine in Concrete CMS
Jan 20, 2021
By linuxoid.

Doctrine is a very flexible, simple (once you get to know it better) and powerful PHP library for database interactions primarily focused on the ORM = Object Relational Mapping and DBAL = DataBase Abstraction Layer.

Was this information useful?
Thank you for your feedback.