Botón colores por defecto varios color picker

Hola,
Un saludo a todos, tengo un inconveniente con el wpcolorpicker, estoy creando un plugin que necesita 4 colores para personalizar, y además he creado un botón «Colores por Defecto» que al pulsarlo cambia los colores seleccionados a otros que elegido por defecto.

El problema es que solo me cambia el valor del input del color picker, pero no el color del botón que se visualiza. He visto, mediante inspección del html que es un botón:
<button type="button" class="button wp-color-result" aria-expanded="false" style="background-color: rgb(255, 61, 112);"><span class="wp-color-result-text">Elegir color</span></button>
Pero no tiene id, ni name, y la clase es la misma para los 4 botones del color picker.
El input está definido así en el plugin:
<input type="text" id="pddp_option_colorBanner" name="pddp_option_colorBanner" class="color-field-1" value="<?php echo esc_attr( get_option('pddp_option_colorBanner') ); ?>" />
Y en el js:
$('#pddp_option_colorBanner').wpColorPicker(opciones);
Así para los 4 color picker,

La función js para cambiar el valor es:

$('#btnDefValues').click(function(){
        //$(this).addClass('active');
        $('#pddp_option_colorBanner').val('#252e39');
        $("#pddp_option_colorBanner").css({ 'background-color': 'rgb(37, 46, 57)' });

        $('#pddp_option_colorTextBanner').val('#ffffff');
        $("#pddp_option_colorTextBanner").css({ 'background-color': 'rgb(255, 255, 255)' });

        $('#pddp_option_colorButtonBanner').val('#b6c9aa');
        $("#pddp_option_colorButtonBanner").css({ 'background-color': 'rgb(182, 201, 170)' });

        $('#pddp_option_colorTextButtonBanner').val('#000000');
        $("#pddp_option_colorTextButtonBanner").css({ 'background-color': 'rgb(10, 10, 10)' });

        alert('DO');
    });

Pero lo anterior solo me cambia el valor del input, más no del color mostrado en el botón.

Alguno de ustedes que haya resuelto algo similar, espero me pueda ayudar.

Gracis