How to customize the colour palette for ACF’s colour picker field

Ever found yourself wishing you could define an exact colour palette for ACF’s colour picker field?

Good news! You totally can.

Using the JavaScript API built right into Advanced Custom Fields we can use a very small snippet of code to specify exactly which colours appear in the palette of suggested colours.

<?php

add_action( 'admin_footer', function () {
	?>
    	<script>
	    if (window.acf) {
	        acf.addFilter('color_picker_args', function (args, $field) {

		    args.palettes = [
		        '#E6D8D5',
		        '#E75274',
		        '#F9FEFD',
		        '#58C2B5',
		    ];

		    return args;
	        });
	    }
    	</script>
	<?php
} );

Now, in this example, I’m just dropping this into the admin as an inline script. This works perfectly fine but you may consider adding this to a JavaScript file and enqueuing it.