Use Different Color Palettes for Text and Highlights in TinyMCE

Sometimes one color palette just isn’t enough. Text colors usually need to be dark and readable, while highlight colors should be soft and subtle. By default, TinyMCE uses the same color palette for both—but with a small customization, you can fully separate them.

By replacing the built-in color buttons with custom toolbar buttons, you gain complete control over which colors are available for text and which are used for background highlights. This approach is ideal for platforms that care about accessibility, readability, and consistent visual design.

What this approach enables:

• Dark, high-contrast colors for text
• Soft, low-saturation colors for highlights
• Full control over labels, order, and UX
• Clear separation of purpose for each color picker

How it works:
You register two custom menu buttons—one for text color and one for background color—and apply styles manually using editor commands.

tinymce.init({
  selector: '#editor',
  toolbar: 'textcolorpicker highlightpicker',
  setup: (editor) => {

    editor.ui.registry.addMenuButton('textcolorpicker', {
      text: 'Text Color',
      fetch: (callback) => {
        callback([
          { type: 'choiceitem', text: 'Black', value: '#000000' },
          { type: 'choiceitem', text: 'Blue', value: '#2563EB' },
          { type: 'choiceitem', text: 'Red', value: '#DC2626' }
        ]);
      },
      onItemAction: (api, value) => {
        editor.execCommand('ForeColor', false, value);
      }
    });

    editor.ui.registry.addMenuButton('highlightpicker', {
      text: 'Highlight',
      fetch: (callback) => {
        callback([
          { type: 'choiceitem', text: 'Yellow', value: '#FEF08A' },
          { type: 'choiceitem', text: 'Light Blue', value: '#DBEAFE' },
          { type: 'choiceitem', text: 'Light Green', value: '#DCFCE7' }
        ]);
      },
      onItemAction: (api, value) => {
        editor.execCommand('HiliteColor', false, value);
      }
    });

  }
});

When to use this approach:

• Shared or public content feeds
• Editorial or knowledge platforms
• Accessibility-focused designs
• Strict brand or design systems

Why it’s worth it:
Although this requires a bit more setup, it’s currently the only reliable way to enforce different color rules for text and highlights in TinyMCE—without confusing users or sacrificing flexibility.