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

Field Settings

Setting nameDescription
Return FormatAdded Label and Color + Label Array
Display StyleChoose to display the default color picker or Palette style
Button LabelChange the default “Select Color” text
Color PickerChoose to display the color picker
Position AbsoluteDisplay the color picker in absolute mode
Text InputAllow or disallow text color input
Allow NullAllow to clear the color
RGBAEnable the alpha color channel
Use Theme Colors
Inject theme support and theme.json colors
Custom Colors
Add custom colors

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

});