The pre-determined color swatch options in a wysiwyg are colors that usually clash with the overall branding of the website. To encourage the content editor to use colors that coincide with the branding identity of an organization, we can manually insert the brand’s color palette as the color swatch options.

To do this, add this code to your functions.php file. Be sure to edit the actual hex values of the color as well as the name of the color which follows.

/*************************************************************/
/*  custom color swatches in Wysiwyg */
/***********************************************************/

function my_mce4_options($init) {

    $custom_colors = '
        "36454f", "Gray",
        "6ad4e0", "Teal",
        "5f6cb2", "Blue",
        "ffefcf", "Ivory",
        "ff3232", "Red",
        "C0C0C0", "Light Gray",
        "e4dbc0", "Beige",
        "fff", "White"
    ';

    // build color grid default+custom colors
    $init['textcolor_map'] = '['.$custom_colors.']';

    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init['textcolor_rows'] = 1;

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

And voilà! Here is a snapshot of how the wysiwyg color swatches look.

Source: https://wordpress.stackexchange.com/questions/233450/how-do-you-add-custom-color-swatches-to-all-wysiwyg-editors