UI Color Picker — CKEditor Sample
Description: Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.

# CKEditor Samples » UI Color Plugin

This sample is not maintained anymore. Check out its brand new version in CKEditor Examples.

This sample shows how to use the UI Color picker toolbar button to preview the skin color of the editor. Note:The UI skin color feature depends on the CKEditor skin compatibility. The Moono and Kama skins are examples of skins that work with it.

If the uicolor plugin along with the dedicated UIColor toolbar button is added to CKEditor, the user will also be able to pick the color of the UI from the color palette available in the UI Color Picker dialog window.

To insert a CKEditor instance with the uicolor plugin enabled, use the following JavaScript call:

    CKEDITOR.replace( 'textarea_id', {
    	extraPlugins: 'uicolor',
    	toolbar: [ [ 'Bold', 'Italic' ], [ 'UIColor' ] ]
    });

## Used in themed instance

Click the UI Color Picker toolbar button to open up a color picker dialog.

<p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>

## Used in inline instance

Click the below editable region to display floating toolbar, then click UI Color Picker button.

This is some sample text. You are using CKEditor.