New to Telerik UI for ASP.NET AJAX? Download free 30-day trial


To make customizing the appearance of RadColorPicker as easy as possible, this control uses skins. A skin is a set of images and a CSS stylesheet that are applied to the HTML elements which make up the control, defining the look and feel.

To apply a skin, set the Skin property of the RadColorPicker control. You can set the Skin property using the properties pane or the control's Smart Tag.

RadColorPicker is installed with a number of predefined skins:


The Material skin is available for the Lightweight RenderMode only. If you experience visual issues with it, make sure your controls are not using the default Classic mode.

Customizing Skins

You can tweak the existing skins, or create your own. Each skin has two main elements: images and a stylesheet. When creating your own, it is a good idea to start with the stylesheet for an existing skin and alter that. See the Tutorial: Creating a Custom Skin topic for a step-by-step walk through. To use your own skin

  1. Add the new CSS file to your project.

  2. Drag and drop the CSS file from the Project Explorer onto your Web page.

  3. Set the EnableEmbeddedSkins property of the controls that use the skin to False.

The stylesheet for a RadColorPicker skin has the name ColorPicker.[SkinName].css and can be found in the ...Skins/[SkinName] directory. The images are found in the ...Skins/[SkinName]/ColorPicker directory. For example, the stylesheet for the "Black" skin is called ColorPicker.Black.css and is located in the ...Skins/Black directory.The images are found in the ...Skins/Black/ColorPicker directory. The images are referenced by name from within the stylesheet.

For information on the CSS File structure, see the Understanding the Skin CSS File topic.

See Also

In this article