This code snippet add a colour picker for  text or background colour found inside the visual editor  toolbar with a customisable colour grid.

The Code

Just add the following block of code to your theme’s functions.php file, and customise to suit your requirements:

Explaining the Code

Before the TinyMCE toolbar is initialised, it calls the tiny_mce_before_init hook.

We create a function called wptb_tinymce_options that will run when this hook is called, by registering it with the tinymce_before_init hook:

function ($init){
//Do stuff<
//We register our function to run when the tiny_mce_before_init hook fires:
add_filter('tiny_mce_before_init', 'ns_mce4_options';

Our function receives an array of TinyMCE $init. Since we receive this array before the TinyMCE component initialises, we can modify it before everything is rendered to the screen.

One of the items in this array is $init[‘textcolor_map’], which contains a specially-formatted string of colours and colour names. By replacing this string with our own, we can override the built-in colour palette.

    $custom_colours = '
        "3366FF", "Color 1 name",
        "CCFFCC", "Color 2 name",
        "FFFF00", "Color 3 name",
        "99CC00", "Color 4 name",
        "FF0000", "Color 5 name",
        "FF99CC", "Color 6 name",
        "CCFFFF", "Color 7 name"

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

Lastly, the hook expects us to return the updated $init array so that the TinyMCE Editor can complete initialisation:

return $init;