ACF colour editor

functions.php

<?php
add_action('after_setup_theme', 'prefix_register_colors');
function prefix_register_colors()
{
    add_theme_support(
        'editor-color-palette', [
            [
                'name' => esc_html__('Black', 'prefix_textdomain'),
                'slug' => 'black',
                'color' => '#333',
            ],
            [
                'name' => esc_html__('Blue', 'prefix_textdomain'),
                'slug' => 'blue',
                'color' => '#669BC9',
            ],
            [
                'name' => esc_html__('Light', 'prefix_textdomain'),
                'slug' => 'light',
                'color' => '#eef2f5',
            ],
            [
                'name' => esc_html__('Yellow', 'prefix_textdomain'),
                'slug' => 'yellow',
                'color' => '#c3a144',
            ],
        ]
    );
}

function output_the_colors()
{

    // get the colors
    $color_palette = current((array)get_theme_support('editor-color-palette'));

    // bail if there aren't any colors found
    if (!$color_palette)
        return;

    // output begins
    ob_start();

    // output the names in a string
    echo '[';
    foreach ($color_palette as $color) {
        echo "'" . $color['color'] . "', ";
    }
    echo ']';

    return ob_get_clean();

}

add_action('acf/input/admin_footer', 'gutenberg_sections_register_acf_color_palette');
function gutenberg_sections_register_acf_color_palette()
{

    $color_palette = output_the_colors();
    if (!$color_palette)
        return;

    ?>
    <script type="text/javascript">
        (function ($) {
            acf.add_filter('color_picker_args', function (args, $field) {
                // add the hexadecimal codes here for the colors you want to appear as swatches
                args.palettes = <?php echo $color_palette; ?>
                // return colors
                return args;
            });
        })(jQuery);
    </script>
    <?php
}