ACF5 PRO Color Picker Custom Palettes

The Advanced Custom Fields color picker field is an easy way to give users control over colors on a WordPress site. It can be further enhanced to display a custom selection of color palettes, making it so you don’t have to remember the hex codes for frequently used colors.

This particular method takes advantage of ACF hooks to ensure all fields (previously saved as well as those added dynamically but not yet saved) display your custom palettes.

UPDATED METHOD 4/11/2016 (minor adjustments to append via @silentdemike):

The previous method has performance issues particularly around repeater fields. The new method (inspired by Hein Tore T√łnnesen’s comment below) is only enabled on content containing color picker fields, and only iterates on the initial load over existing color pickers:


add_action( 'acf/input/admin_enqueue_scripts', function() {
  wp_enqueue_script( 'acf-custom-colors', get_template_directory_uri() . '/js/aw-colors.js', 'acf-input', '1.0', true );

jQuery(document).ready(function($) {
  if( acf.fields.color_picker ) {
    // custom colors
    var palette = ['#111111', '#333333', '#555555', '#777777', '#999999', '#cccccc'];

    // when initially loaded find existing colorpickers and set the palette
    acf.add_action('load', function() {
      $('input.wp-color-picker').each(function() {
        $(this).iris('option', 'palettes', palette);

    // if appended element only modify the new element's palette
    acf.add_action('append', function(el) {
      $(el).find('input.wp-color-picker').iris('option', 'palettes', palette);



function my_acf_admin_head() {
  echo "<script>
    acf.add_action('ready append', function() {
      acf.get_fields({ type : 'color_picker'}).each(function() {
          palettes: ['#111111', '#333333', '#555555', '#777777', '#999999', '#cccccc'],
          change: function(event, ui) {
            $(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());

add_action( 'acf/input/admin_head', 'my_acf_admin_head' );