Home Forums Feature Requests Customise Color Picker Swatches Reply To: Customise Color Picker Swatches

  • Eureka!

    Thanks to @ractoon and this snippet i managed to solve it:

    This is how my function looks right now:

    In my child themes functions.php i declare the colors:

    // Adds client custom colors to WYSIWYG editor and ACF color picker. 
    $client_colors = array(

    Then in my main themes functions.php:

    global $client_colors;
      array_push($client_colors, "FFFFFF", "000000");
      function change_acf_color_picker() {
        global $parent_file;
        global $client_colors;
        $client_colors_acf = array();
        foreach ( $client_colors as $value ) {
          $client_colors_acf[] = '#'.$value;
        $client_colors_acf_jquery = json_encode($client_colors_acf);
        echo "<script>
          acf.add_action('ready append', function() {
            acf.get_fields({ type : 'color_picker'}).each(function() {
                color: $(this).find('.wp-color-picker').val(),
                mode: 'hsv',
                palettes: ".$client_colors_acf_jquery.",
                change: function(event, ui) {
                  $(this).find('.wp-color-result').css('background-color', ui.color.toString());
      add_action( 'acf/input/admin_head', 'change_acf_color_picker' );

    One problem remains though: when i click(not drag circle) on the colorpicker, it seems to hold the old color value from when i’ve grabbed the circle and dragged it around. This becomes obvious when i drag the vertical slider.