WordPress TinyMCE 🎨 Customize color palette

Share on email
Share on twitter
Share on linkedin
Share on facebook
Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email

The respect of the colors of the graphic charter of a site is essential for a successful web design. A simple way to encourage this good practice is to configure the default colors proposed by the TinyMCE plugin editor palette.

Just add the following code to the file functions.php by placing the colors in hexadecimal format (without the'#') followed by a name that will be displayed if you fly over a color in the palette with your pointer.

Replace the default colors

/*
* Customize the default color palette for TinyMce editor
*/
function wpr_custom_color_tinymce( $options ) {
    $options['textcolor_map'] = json_encode(
        array(
            '26374D', 'main',
            '50B4D8', 'Secondary',
            '5A5A5A', 'Text',
            'DA4453', 'Accent',
            'E7CE57', 'Code - Yellow',
            'EF7C2B', 'Code - Orange',
            '78BC65', 'Code - Green',
        )
    );
    return $options;
}
add_filter( 'tiny_mce_before_init', 'wpr_custom_color_tinymce' );

Add colors to default colors

/*
* Customize the default color palette for TinyMce editor
*/
function wpr_custom_color_tinymce( $options ) {
    $options['textcolor_map'] = json_encode(
        array(
            // My custom colors
            '26374D', 'main',
            '50B4D8', 'Secondary',
            '5A5A5A', 'Text',
            'DA4453', 'Accent',
            'E7CE57', 'Code - Yellow',
            'EF7C2B', 'Code - Orange',
            '78BC65', 'Code - Green',
            // The default colors 
            '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',
        )
    );
    return $options;
}
add_filter( 'tiny_mce_before_init', 'wpr_custom_color_tinymce' );
Julien MA Jacob
WordPress Developer
Julien MA JACOB - WordPress Developer
Passionate about the web and programming with always many projects in mind
  Discussion of the article
Subscribe to the newsletter
Notify to
guest
0 Comments
Inline Feedbacks
View all comments