Color PickerPRO

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 Settings

Field Value

Return Format: Label

$color_picker = get_field('color_picker');

// Primary

Return Format: Color + Label Array

$color_picker = get_field('color_picker');

/**
 * array(
 *     'color' => '#2271b1',
 *     'label' => '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 in the theme support (see documentation) and theme.json color palette (see documentation).

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

add_theme_support('editor-color-palette', array(
    array(
        'name'  => 'Primary',
        'slug'  => 'primary',
        'color' => '#a156b4',
    ),
    array(
        'name'  => 'Red',
        'slug'  => 'secondary',
        'color' => '#d0a5db',
    ),
));

Note: We recommend to use full 6-characters hex values in lowercase to enhance compatibility with the Color Picker palette.

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);

});