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 opacity||Whether to add opacity to the color picker. |
|Color picker options||Extra 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.
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: