Wordpress - How do you add custom color swatches to all WYSIWYG editors?
Click on the Custom...
text and the color picker will pop up. Pick the color of your choice and press OK
. Chosen color will appear as a custom swatch for later use.
Note! The solution above is not a solution. See comments and edit below.
Edit:
Here is a function which replaces the entire default palette with custom swatches.
Note, there are 7 colors in the list instead 8. That's because there should be also the multiplication X (✕) at the end of the color list which removes any color applied to the text. So, when adding one more row there should be 15 colors, not 16.
function my_mce4_options($init) {
$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.']';
// 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');
Also, you can build you own swatch grid depending on the color number and UI requrements:
$init['textcolor_rows'] = 4;
$init['textcolor_cols'] = 2;
Largely based on this WPSE answer.
For more information and customization see this blog post.
In addition to Max's answer, if you are looking to add to the existing pallet, here is the default colour pallet:
$custom_colours = '[
"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"333333", "Very dark gray",
"800000", "Maroon",
"FF6600", "Orange",
"808000", "Olive",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"808080", "Gray",
"FF0000", "Red",
"FF9900", "Amber",
"99CC00", "Yellow green",
"339966", "Sea green",
"33CCCC", "Turquoise",
"3366FF", "Royal blue",
"800080", "Purple",
"999999", "Medium gray",
"FF00FF", "Magenta",
"FFCC00", "Gold",
"FFFF00", "Yellow",
"00FF00", "Lime",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Red violet",
"FFFFFF", "White",
"FF99CC", "Pink",
"FFCC99", "Peach",
"FFFF99", "Light yellow",
"CCFFCC", "Pale green",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum",
... CUSTOM HERE ...
]';