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.

<h1>Apollo 11</h1> Apollo 11
				was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a>
				and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became
				the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC. Armstrong spent about <s>three and a half</s> two and a half hours
				outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a
				href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module"
				title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.
				<h2>Broadcasting and quotes <a id="quotes" name="quotes"></a></h2> Broadcast on live TV to a world-wide
				audience, Armstrong stepped onto the lunar surface and described the event as: <blockquote>One small step for [a] man, one giant leap for mankind.</blockquote>
				Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national
				goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a
				speech before the United States Congress: <blockquote>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</blockquote>
<hr/> Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a>

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.

<h1>Apollo 11</h1>
				Apollo 11 was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.
				Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.
				<h2>Broadcasting and quotes <a id="quotes" name="quotes"></a></h2>
				Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:
				<blockquote>
				One small step for [a] man, one giant leap for mankind.
				</blockquote>
				Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy">John F. Kennedy</a> in a speech before the United States Congress:
				<blockquote>
				[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.
				</blockquote>
				<hr />
				Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a>

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.25.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.25.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>