Contribute to this guideReport an issue

Setting Text and Background Color Documentation

The optional Text and Background Color feature is provided through the Color Button plugin which by default is available in the Full distribution.

When the plugin is enabled, the   and   buttons are automatically added to the toolbar. You can use them to add some color to your content. If you want to quickly remove colors from your document, use the   button provided by the Remove Format plugin.

More Colors Option and Color Dialog

You can also add an optional Color Dialog plugin which provides the More Colors option and a user-friendly way to select the desired color through a dedicated dialog window. The editor instance below includes both features. Notice how the picked colors are saved in the color history row below the default palette for easy reuse.

Color History and Suggestions

Whenever you open any document you have worked on before, you can quickly reuse text and background colors that are present in the content. Thanks to Color History feature introduced in CKEditor 4.15 version, editor finds all colors during initialization and adds them as additional color history rows below the default palette. Additionally, every new color used is also added to the color history rows for even easier reuse. You can read more about this feature in the Color History documentation.

Custom Color List

Allowing your users to use any colors they wish might lead to undesired results, i.e. joyfully colorful content that will make your page look like it was created in the early 1990s. You can prevent this situation by customizing the color list to only include a limited number of colors that match your website style. The editor instance below uses the config.colorButton_colors option to trim down the color list to a selected few.

Additionally, since CKEditor 4.5.8 you can also disable the "Automatic" option by setting the config.colorButton_enableAutomatic option to false. The editor instance below includes customizations.

The Text and Background Color feature does not create semantically meaningful content. To create semantic content and also maintain consistent styling across your website, including user-created content, consider configuring the Styles drop-down list to include some colored styles that could be used by your users and would match your website design instead of enabling the Text and Background Color buttons and dealing with a stylistic nightmare later.

Related Features

Get Sample Source Code

  • Text and background color with Color Dialog
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Text and background color with Color Dialog</title>
      <script src="https://cdn.ckeditor.com/4.24.0-lts/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          height: 250,
          extraPlugins: 'colorbutton,colordialog',
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>
  • Custom text and background colors
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Custom text and background colors</title>
      <script src="https://cdn.ckeditor.com/4.24.0-lts/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor2" name="editor2" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor2', {
          height: 250,
          extraPlugins: 'colorbutton',
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>