Skip to main content


The color field allows you to select a color. This field uses the built-in WordPress color picker with an extension to select the alpha channel for colors.



Besides the common settings, this field has the following specific settings, the keys are for use with code:

Allow to select opacityalpha_channelWhether to add opacity to the color picker. true or false (default). Optional.
Color picker optionsjs_optionsExtra color picker options. See here.

This is a sample field settings array when creating this field with code:

'name' => 'Color picker',
'id' => 'field_id',
'type' => 'color',
'alpha_channel' => true,
'js_options' => [
'palettes' => ['#125', '#459', '#78b', '#ab0', '#de3', '#f0f'],


This field saves the hex value of the picked color in the database.

If the field is cloneable, then the value is stored as a serialized array in a single row in the database.

Template usage

Getting the value:

<?php $value = rwmb_meta( 'my_field_id' ) ?>
<div style="background-color: <?= $value ?>">
<h2>My section title</h2>
<p>My section content</p>

Displaying the selected color:

<p>This is the color: <?php rwmb_the_value( 'my_field_id' ) ?></p>

which displays the color as a single dot like this:

display color