About Color

Field that stores a color value as 32bit integer reflecting a RGBA value. Many options for Input (HTML5 Inputfield Color, Textfield with changing background, various jQuery/JS ColorPickers, custom jQuery/JS/CSS) and Output (RGB, RGBA, HSL, HSLA, HEX, Array).

Category 1Field Types
Fieldtype modules that represent a data type used by fields.
Category 2Input Fields
Inputfield modules that provide a UI input widget in the ProcessWire admin.
Release StateStable
Should be safe for use in production environments. *
Authorkixe
Module Version1.1.0
Class NameFieldtypeColor
Compatibility2.7, 3.0
Date AddedJuly 6, 2017
Last UpdatedAugust 12, 2019
Recommended ByNew recommendations may take up to 1 day to appear.

Instructions

This module's files should be placed in /site/modules/FieldtypeColor/
How to install or uninstall modules

README

FieldtypeColor

Fieldtype/Inputfield for ProcessWire 2.0, 3.0

Field that stores a color value as 32bit integer reflecting a RGBA value. Many options for Input (HTML5 Inputfield Color, Textfield with changing background, various jQuery/JS ColorPickers, custom jQuery/JS/CSS) and Output (RGB, RGBA, HSL, HSLA, HEX, Array).

Inputfield

Select between 5 types of Inputfields

  • Html5 Inputfield of type='color' (if supported by browser)
  • Inputfield type='text' expecting a 24bit hexcode string (RGB). Input format: '#4496dd'
    The background color of the input fields shows selected color
  • Inputfield of type='text' expecting 32bit hexcode strings (RGB + alpha channel) Input format: '#fa4496dd'
  • Inputfield with Spectrum Color Picker (JavaScript)
    Options modifiable
  • Inputfield type='text' with custom JavaScript and/or CSS

Output

Define output format under Details - Tab in field settings. Select from the following options:

  • string 6-digit hex color. Example: '#4496dd'
  • string 8-digit hex color with leading Alpha channel (limited browser support). Example: '#fa4496dd'
  • string CSS color value RGB. Example: 'rgb(68, 100, 221)'
  • string CSS color value RGBA. Example: 'rgba(68, 100, 221, 0.98)'
  • string CSS color value HSL. Example: 'hsl(227, 69.2%, 56.7%)'
  • string CSS color value HSLA. Example: 'hsla(227, 69.2%, 56.7%, 0.98)'
  • string 32bit raw hex value. Example: 'fa4496dd' (unformatted output value)
  • int 32bit. Example: '4198799069' (storage value)
  • array()
	array(
		[0] => 0-255, // opacity
		[1],['r'] => 0-255,
		[2],['g'] => 0-255,
		[3],['b'] => 0-255,
		['rx'] => 00-ff,
		['gx'] => 00-ff,
		['bx'] => 00-ff,
		['ox'] => 00-ff, // opacity
		['o'] => 0-1 // opacity
	)

Templates & API

You can always modify values or output format via ProcessWire API.

Modify output format

$f = $page->fields->get('myColorField');
$f->outputFormat = 8;
echo $page->color['rx'];

Modify values

  • Delete the page field value by setting empty string or NULL.
  • The values (int) 0, (string) '0', '00000000' and '#00000000' are similar and stored as (int) 0 (black, full transparent).
$page->of(false);
$page->myColorField = 'ff0000'; // red
$page->save('myColorField');

Notes

Deleting values is only possible with inputfields of type='text' and via API.

If a default value is set, the field is filled with it if the field is empty (for example on newly created pages).
If Inputfield of type='text' 32bit is selected you can set the value to '#00000000' and the default value will be ignored.

The Fieldtype includes Spectrum Color Picker by Brian Grinstead

Any custom Javascript based Inputfield can be used.