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

Last updated • October 13th, 2019

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

view raw customising-acf-colour-picker-field-pallet.php hosted with ❤ by GitHub

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.

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

Got a project? Let's talk.