Color PickerPRO

Docs Fields Color Picker

#Field Render

A collection of advanced settings for the ACF Color Picker. The field can now be displayed as a palette, custom colors can be predefined and RGBA mode is supported using the WP Color Picker Alpha library.

Field Group

Color Picker

#Field Settings

Setting name	Description
Return Format	Added “Color Array”, “Slug & “Label”
Display Style	Choose to display the default color picker or Palette style
Button Label	Change the default “Select Color” text
Color Picker	Choose to display the color picker
Position Absolute	Display the color picker in absolute mode
Text Input	Allow or disallow text color input
Allow Null	Allow to clear the color
RGBA	Enable the alpha color channel
Use Theme Colors	Inject theme support and `theme.json` colors
Custom Colors	Add custom colors

#Field Value

#Return Format: Color Array

$color_picker = get_field('color_picker');

/**
 * array(
 *     'color' => '#2271b1',
 *     'slug'  => 'primary',
 *     'label' => 'Primary',
 *     'rgba'  => array(
 *         'red'   => 34,
 *         'green' => 113,
 *         'blue'  => 117,
 *         'alpha' => 1.0,
 *     )
 * )
 */

#Return Format: Slug

$color_picker = get_field('color_picker');

// primary

#Return Format: Label

$color_picker = get_field('color_picker');

// Primary

#Unformatted Value

$color_picker = get_field('color_picker', false, false);

// #2271b1

#Custom Colors

It is possible to add custom colors directly within the field settings, using the following format:

#2271b1 : Primary
#d63638 : Secondary
#00a32a : Tertiary

#Use Theme Colors

The “Use Theme Colors” setting will automatically inject colors defined:

As theme support (see documentation)
As Theme’s theme.json color palette (see documentation).

In order to add custom colors in your theme, you can use the following code:

add_action('after_theme_support', 'my_after_theme_support');
function my_after_theme_support(){
    add_theme_support('editor-color-palette', array(
        array(
            'name'  => 'Primary',
            'slug'  => 'primary',
            'color' => '#a156b4',
        ),
        array(
            'name'  => 'Red',
            'slug'  => 'secondary',
            'color' => '#d0a5db',
        ),
    ));
}

#Javascript Hooks

A new Javascript hook has been added to perform an action when a new color is selected. It is recommended to use the acf/input/admin_enqueue_scripts hook to enqueue a custom ACF JS file. See documentation.

#Color Picker Update Value

/**
 * acfe/fields/color_picker/update_color
 * 
 * @string  val    Color value
 * @object  field  ACF Field instance
 */
action('acfe/fields/color_picker/update_color',                         val, field);
action('acfe/fields/color_picker/update_color/name=my_color_picker',    val, field);
action('acfe/fields/color_picker/update_color/key=field_608abfa17fa7f', val, field);

acf.addAction('acfe/fields/color_picker/update_color/name=my_color_picker', function(val, field){

    console.log('new color:', val);

});