Custom swatches in ACF Color picker

Posted in Snippets

The immensely popular Advanced Custom Fields plugin is used by a lot of developers. One of many reasons for working in ACF is the user-friendly admin section.

One of the many modules is obviously the color picker. This module got so called swatches in 2014 which is a great way to easily access colors used on the website.

Color Picker looks like this and comes with a bunch of predefined colors.

acf plugin color swatches

So how do I set my own colors?

You can’t change the colors from admin.

It must be done with a filter using ACF API. PHP and Javascript snippet available below.

add_action('acf/input/admin_footer', function() {
    ?>
    <script type="text/javascript">
        (function($) {
            acf.add_filter('color_picker_args', function( args, $field ){
                args.palettes = ['#5ee8bf', '#2f353e', '#f55e4f']

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