Skip to content
Controls

Color Picker

Color picker control lets users select colors from a predefined palette or choose custom colors with optional opacity.

Color Picker Control

Control Settings

  • Alongside Text - Text displayed next to the control
  • Alpha Channel - Enable semi-transparent colors with rgba
  • Color Palette - Show predefined color options
  • Output Format - Choose between Color or Array (Color + Slug)

Usage

PHP
<p style="color: <?php echo esc_attr( $attributes['control_name'] ); ?>">
  Text with custom color using inline css.
</p>
PHP with Output Format as Array
<p style="color: <?php echo esc_attr( $attributes['control_name']['color'] ); ?>">
  Text with custom color using inline css.
</p>
 
<p class="color-<?php echo esc_attr( $attributes['control_name']['slug'] ); ?>">
  Text with custom color using classname.
</p>
Handlebars
<p style="color: {{control_name}}">
  {{text}}
</p>
Handlebars with Output Format as Array
<p style="color: {{control_name.color}}">
  {{text}}
</p>
<p class="color-{{control_name.slug}}">
  {{text}}
</p>
Post Meta
<p style="color: <?php echo esc_attr( get_lzb_meta( 'control_meta_name' ) ); ?>">
  Text with custom color.
</p>
Previous ArticleSelectNext ArticleDate Time Picker

Was this article helpful?