Contribute to this guideReport an issue

UI Color Picker Documentation

The editor UI color can also be changed dynamically by the user with help of the color picker. This tool is provided by the optional UI Color Picker plugin that needs to be available in the editor build.

When the UI Color Picker plugin is enabled, the   button is automatically added to the toolbar. The tool can then be used by the developer to conveniently try out a few options and adjust the color of the editor user interface. The code that needs to be pasted to the editor configuration in order to preserve the color choice is displayed in the dialog window. With some adjustment this tool can also be made available for end-users, for example in the administration panel of a CMS system where the user can customize the look of the entire application, including the editor.

Please note that this configuration option can only be used for editor skins that are compatible with the so-called "chameleon" feature, for example Moono and Kama.

Click the UI Color Picker toolbar button in the editor instance below to set a custom user interface color. Refer to the Using the UI Color Picker article to learn more about this feature.

Related Features

Get Sample Source Code

  • UI color picker
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>UI color picker</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', {
          extraPlugins: 'uicolor',
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>